body {
  font-family: 'Cedarville Cursive', Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.8rem);
  overflow-x: hidden;
  letter-spacing: clamp(0.5px, 0.15vw, 2px);
  transition: background-color 0.3s, color 0.2s;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

h1, h2 {
  letter-spacing: clamp(4px, 0.2vw, 3px);
}

.paragraph-style {
  font-family: Georgia, "Times New Roman", Times, serif;
}

/* Main container */
.container {
  display: flex;
  border: 4px solid black;
  background-color: rgba(231, 227, 192, 0.662);
  justify-content: center;
  flex-direction: row;
  align-items: center;
  overflow: auto;
  flex-wrap: wrap;
  gap: clamp(10px, 3vw, 30px);
  padding: clamp(10px, 3vw, 40px);
  position: relative; /* REQUIRED */
  z-index: 4;
}

/* Inner container items */
.container > div {
  font-size: clamp(1.2rem, 1.5vw + 0.5rem, 2rem);
  margin: clamp(5px, 1vw, 10px);
  padding: clamp(8px, 1vw + 5px, 20px);
  text-align: center;
}

/* Buttons */
.box,
.container > button {
  padding: clamp(8px, 1vw + 5px, 20px) clamp(12px, 2vw, 30px);
  font-size: clamp(1.2rem, 1.5vw + 0.5rem, 2rem);
  cursor: pointer;
  margin: clamp(5px, 1vw, 10px);
  border-radius: 10px;
  border: 2px solid black;
  background: linear-gradient(120deg, goldenrod, #8e44ad);
  font-weight: bold;
  font-family: 'Cedarville Cursive';
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Specific spacing tweaks */
.container > .box {
  margin-bottom: clamp(10px, 2vw, 20px);  /* extra space below boxes */
}

#colorBtn {
  font-size: clamp(1.4rem, 2vw + 0.5rem, 2rem);
  margin-top: clamp(10px, 2vw, 20px);     /* pushes the color button down */
}

/* Hover effects */
#colorBtn:hover,
.box:hover {
  transform: scale(1.1);
  box-shadow: 0px 4px 15px rgba(10, 1, 1, 0.3);
}

/* Cat emoji spin */
.cat:hover {
  display: inline-block;
  animation: rotate 2s;
  cursor: pointer;
  will-change: transform;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Header animation */
h1 {
  animation: catBounce 2.8s ease-in-out infinite;
  position: relative;
  text-align: center;
  margin-bottom: 60px; /* space for the cat */


}

@keyframes catBounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-5px); }
  60%  { transform: translateY(0); }
  80%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

@keyframes catBounceSoft {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-2px); }
  60%  { transform: translateY(0); }
  80%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

@keyframes catBounceNano {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-1px); }
  60%  { transform: translateY(0); }
  80%  { transform: translateY(-0.5px); }
  100% { transform: translateY(0); }
}

h2 {
  text-align: center;
}

p {
  margin: 0;
}

/* Cat image */
.cat-image {
  width: clamp(250px, 40vw, 500px);
  height: clamp(250px, 40vw, 500px);
  object-fit: cover;
  border: 4px solid black;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cat-image.loaded {
  opacity: 1;
  will-change: opacity;
}


/* Footer */
.footer-info {
  display: flex;
  justify-content: center;
  margin: 10px;
  text-align: center;
}

/* Tablet breakpoint */
@media (max-width: 1299px) {
  .container {
    flex-direction: column;
    align-items: center;
  }
}

/* Mobile breakpoint */
@media (max-width: 600px) {
  h1 {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    padding: 0 5px;
  }

  .container {
    flex-direction: column;
    padding: 0 10px;
  }

  .cat-image {
    width: 100%;
    height: auto;
  }

}

#catCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
}

/* Parallax cats */
.parallax {
  position: absolute;
  width: clamp(80px, 10vw, 150px);
  pointer-events: none;
  opacity: 0.85;
  will-change: transform, top, left;
  transition: transform 0.1s ease-out;
  z-index: 0;
}

/* Unique starting positions + depth */
.cat1 { top: 10%; left: 80%; transform: scale(1.1); }
.cat2 { top: 15%; left: 10%; transform: scale(1.1); }
.cat3 { top: 55%; left: 50%; transform: scale(1.0); }

/*
.scene {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 120px;
}
  */


/* peeking cat */
.cat-peek {
  position: absolute;
  top: 112%;          /* sits directly under the text */
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 12vw, 180px);
  pointer-events: none;
  z-index: 10;
}

/* side cats */
.cat-left {
  top: clamp(-70px, -4vw, -110px);
  left: 8%;
  width: clamp(90px, 12vw, 150px);
}

.cat-right {
  top: 60%;
  right: 8%;
  width: clamp(90px, 12vw, 150px);
}

.title-wrap {
  position: relative;
  display: block;        /* full width */
  text-align: center;    /* centers text AND the cat */
   margin-bottom: 120px; /* try 100–150px depending on cat size */


  width: 100%;           /* ensures full-width alignment */
}

@media (max-width: 600px) {
  .cat-left,
  .cat-right {
    display: none;
  }

  .scene {
    margin-top: 80px;
  }
}

/* Mobile adjustments */
@media (max-width: 600px) {
  h1 {
    margin-bottom: 40px;
    animation: catBounceNano 2.8s ease-in-out infinite;
  }

   .title-wrap {
    margin-bottom: 40px; /* or 0 if you want it tight */
  }

.cat-peek {
    top: 152%; /* lower the cat so it sits closer to the container */
    width: clamp(100px, 10vw, 150px); /* optional: scale slightly */
  }

}

@media (min-width: 601px) and (max-width: 1050px) {
  .title-wrap {
    margin-bottom: 70px; /* reduce from 120px */
  }

  .cat-peek {
    top: 118%; /* lower the cat so it sits closer to the container */
    width: clamp(100px, 10vw, 150px); /* optional: scale slightly */
  }

  .scene {
    margin-top: 60px; /* reduce the big desktop top margin */
  }

  h1 {
    animation: catBounceSoft 2.1s ease-in-out infinite;
  }


}

@media (max-width: 220px) {

  /* Reduce bounce to almost nothing */
  h1 {
    animation: catBounceNano 2.8s ease-in-out infinite;
    font-size: 0.9rem; /* optional: prevent text wrapping chaos */
    margin-bottom: 20px;
  }

  #colorBtn, .box {
    font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
}

  /* Keep the cat from dipping under the container */
  .cat-peek {
    top: 100%;      /* slightly lower than default */
    width: 70px;    /* small enough for tiny screens */

  }

  /* Reduce spacing between title and container */
  .title-wrap {
    margin-bottom: 20px;
  }

  /* Tighten the scene spacing */
  .scene {
    margin-top: 40px;
  }
}

button:focus-visible,
#colorBtn:focus-visible,
.support-cat button:focus-visible,
a:focus-visible,
#darkModeBtn:focus-visible {
  outline: 3px solid #f5d36c;
  outline-offset: 3px;
  box-shadow: 0 0 8px rgba(245, 211, 108, 0.8);
}



/* Screen Reader Styles */
.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.support-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 40px auto;
  padding: clamp(10px, 3vw, 40px); /* matches container responsiveness */
  gap: clamp(10px, 2vw, 20px);     /* spacing between content */
  border: 4px solid black;
  background-color: rgba(245, 211, 108, 0.1);
  box-sizing: border-box;
}

/* Personal cat image: responsive + center */
/* Support Cat Image — matches .cat-image exactly */
.support-cat .personal-cat {
  width: clamp(250px, 40vw, 500px);
  height: clamp(250px, 40vw, 500px);
  object-fit: cover;
  object-position: center -25%;

  border: 4px solid black;
  border-radius: 6px;

  display: block;
  margin: 0 auto 12px;

  opacity: 0;
  transition: opacity 0.4s ease, transform 0.3s ease;
}

/* Fade-in */
.support-cat .personal-cat.loaded {
  opacity: 1;
}

/* Hover polish */
.support-cat .personal-cat:hover {
  transform: scale(1.07) rotate(.5deg);
}


/* Paragraph */
.support-cat p {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.4rem);
  margin-bottom: 12px;
}

/* Button */
.support-cat button {
  padding: clamp(8px, 2vw, 16px) clamp(12px, 4vw, 24px);
  font-size: clamp(1rem, 2vw + 0.5rem, 1.3rem);
  cursor: pointer;
  background: linear-gradient(120deg, goldenrod, #8e44ad);
  border: 2px solid black;
  border-radius: 8px;
  font-family: 'Cedarville Cursive';
  transition: transform 0.2s, box-shadow 0.2s;
}

.support-cat button:hover {
  transform: scale(1.1);
  box-shadow: 0px 4px 12px rgba(10, 1, 1, 0.3);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .support-cat {
    padding: clamp(8px, 5vw, 20px);
  }

  .support-cat .personal-cat {
    width: 70%;
  }

  .support-cat button {
    width: 90%;
    font-size: clamp(1rem, 2vw, 1.1rem);
  }
}

/* Homepage copy section */
.homepage-copy {
  max-width: 900px;
  margin: 60px auto;
  padding: clamp(20px, 4vw, 40px);
  background-color: rgba(245, 211, 108, 0.08); /* subtle highlight */
  border: 2px solid #f5d36c;
  border-radius: 10px;
  font-family: 'Cedarville Cursive', cursive;
  line-height: 1.6;
  text-align: left;
}

.homepage-copy h2 {
  font-size: clamp(1.4rem, 2vw + 0.5rem, 2rem);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  text-align: center;
  color: #8e44ad; /* playful accent */
}

.homepage-copy p {
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.3rem);
  margin-bottom: 1em;
  text-align: center;
}

.homepage-copy ul {
  list-style: none;
  padding: 0;
  margin: 1em auto;
  max-width: 600px;
}

.homepage-copy li {
  background: linear-gradient(120deg, goldenrod, #8e44ad);
  color: #fff;
  padding: 10px 15px;
  margin: 8px 0;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.homepage-copy li:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .homepage-copy {
    padding: 15px;
    margin: 30px auto;
  }

  .homepage-copy h2 {
    font-size: 1.2rem;
  }

  .homepage-copy p {
    font-size: 1rem;
  }
}


/* ===============================
   Dark Mode (CSS Variables)
=============================== */

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --card-bg: rgba(231, 227, 192, 0.662);
  --border-color: #000000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Dark mode overrides */
body.dark {
  --bg-color: #0f1115;
  --text-color: #f5f5f5;
  --card-bg: rgba(30, 30, 30, 0.9);
  --border-color: #f5d36c;
}


/* Apply vars to existing elements */
.container,
.support-cat {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

.cat-image,
.support-cat .personal-cat {
  border-color: var(--border-color);
}

/* ===============================
   Dark Mode Toggle Button — Subtle Version
=============================== */

#darkModeBtn {
  position: fixed;
  top: clamp(10px, 2vw, 50px);     /* scales top offset */
  right: clamp(10px, 2vw, 15px);   /* scales right offset */
  z-index: 1000;
  
  padding: clamp(3px, 1vw + 2px, 12px) clamp(6px, 2vw, 18px); /* vertical | horizontal */
  font-size: clamp(0.65rem, 1.5vw, 1.1rem);

  border-radius: 8px;
  border: 2px solid var(--border-color);
  background: linear-gradient(120deg, goldenrod, #8e44ad);
  color: var(--text-color);
  cursor: pointer;
  font-family: 'Cedarville Cursive';
  
  transition: background 0.3s, color 0.3s, transform 0.15s, box-shadow 0.15s;
  box-shadow: none;
}

body.dark h2,
body.dark .homepage-copy {
  color: #f5d36c; /* brighter yellow for readability */
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}


/* Hover effect — subtle but visible */
#darkModeBtn:hover {
  transform: scale(1.05);                /* smaller scale on hover */
  box-shadow: 0px 2px 8px rgba(10, 1, 1, 0.25);
}


/* Mobile adjustments — responsive padding + font size */
@media (max-width: 600px) {
  #darkModeBtn {
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    font-size: 0.95rem;
  }
}

@media (max-width: 400px) {
  #darkModeBtn {
    padding: 5px 10px;
    font-size: 0.9rem;
  }
}

/* ===============================
   Dark Mode Button Small Screen Fix
=============================== */
@media (max-width: 450px) {
  #darkModeBtn {
    top: 50px;          /* move it down so it doesn’t clash with h1 */
    right: 10px;        /* slight right adjustment */
     padding: clamp(3px, 1vw + 2px, 12px) clamp(6px, 2vw, 18px);
  font-size: clamp(0.65rem, 1.5vw, 1.1rem);
  }
}

/* ===============================
   Dark Mode Button Extra Small Screens
=============================== */
@media (max-width: 350px) {
  #darkModeBtn {
    top: 40px;           /* move it higher */
    right: 8px;          /* a bit inward */
    padding: 2px 6px;    /* smaller padding */
    font-size: 0.65rem;  /* smaller font for tiny viewports */
  }
}



/* Slightly reduce h1 bounce for mid-desktop screens to avoid cat cutoff */
@media (min-width: 1000px) and (max-width: 1050px) {
  h1 {
    animation: catBounceSoftAdjust 2.1s ease-in-out infinite;
  }
}

@keyframes catBounceSoftAdjust {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-3px); } /* slightly less than -7px of original soft bounce */
  60%  { transform: translateY(0px); }
  80%  { transform: translateY(-1.5px); } /* slightly less than -4px */
  100% { transform: translateY(0); }
}