/* === Footer Base === */
.site-footer {
  background: var(--color-white);
  border-top: 2px solid var(--color-primary);
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--color-muted);
  position: relative;
  overflow: hidden;
}

.site-footer p {
  font-size: 0.95rem;
  margin: 0;
}

.utility-links {
  background: var(--color-panel);
  padding: 3rem 1rem;
}

.utility-links h3 {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 1rem;
}

.utility-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.utility-list a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.utility-list a:hover {
  color: var(--color-accent);
}

/* === Katniss & Ozzy Easter Egg === */

#ozzy-secret,
#katniss-secret {
  position: fixed;
  bottom: 22px;
  width: 120px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0) rotate(0deg);
  transition: opacity .45s ease, transform .45s ease;
  z-index: 9999;
  display: none; /* start hidden; JS adds .show-cat */
}

/* distinct anchoring so they don't overlap */
#ozzy-secret { right: 22px; }
#katniss-secret { right: 164px; bottom: 28px; } /* slightly higher & further left */

/* when revealed */
.show-cat {
  display: block !important;            /* critical when using display:none */
  opacity: 1 !important;
  pointer-events: auto;
}

/* give each cat its own quirky pose */
#ozzy-secret.show-cat {
  transform: translateY(-10px) rotate(-5deg) scale(1.02);
}
#katniss-secret.show-cat {
  transform: translateY(-16px) rotate(6deg) scale(0.98);
}

/* gentle idle bob for extra charm */
@keyframes catBob {
  from { transform: translateY(-2px); }
  to   { transform: translateY(-8px); }
}
#ozzy-secret.show-cat { animation: catBob 1.6s ease-in-out .1s infinite alternate; }
#katniss-secret.show-cat { animation: catBob 1.8s ease-in-out .25s infinite alternate; }

/* keep z-order above most things */
#cat-message { z-index: 10000; }

/* small screens: stack them a bit tighter so they don’t collide */
@media (max-width: 480px) {
  #ozzy-secret { right: 14px; bottom: 18px; width: 100px; }
  #katniss-secret { right: 130px; bottom: 24px; width: 100px; }
}


@keyframes slideUpBounce {
  0% {
    transform: translate(-50%, 30px);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -4px);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 2px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}


#cat-message {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-family: var(--font-main, "Poppins", sans-serif);
  font-size: .9rem;
  letter-spacing: .3px;
  opacity: 0;
  z-index: 999999;
  text-align: center;
  box-shadow: 0 0 12px rgba(225,0,106,.4);
  pointer-events: none;
}

#cat-message.show {
  animation: slideUpBounce 4.7s ease-out forwards;
}


#cat-message.show .steam {
  animation: steamRise 1.8s ease-out infinite;
}

#cat-message .steam {
  display: inline-block;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6),
               0 0 14px rgba(255, 183, 3, 0.4),
               0 0 20px rgba(225, 0, 106, 0.3);
  animation: gentleGlow 2.4s ease-in-out infinite alternate;
}

@keyframes gentleGlow {
  from { text-shadow: 0 0 6px rgba(255, 255, 255, 0.4); }
  to   { text-shadow: 0 0 14px rgba(255, 255, 255, 0.8),
                     0 0 22px rgba(255, 183, 3, 0.4),
                     0 0 30px rgba(225, 0, 106, 0.3); }
}

.konami-mode {
  animation: rainbowGlow 3s infinite alternate;
}

@keyframes rainbowGlow {
  0% { background-color: #00798c; }
  50% { background-color: #ffc300; }
  100% { background-color: #ff66b2; }
}

/* === KO Modal === */
.ko-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ko-modal__content {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  max-width: 400px;
  text-align: center;
  padding: 2rem 2.5rem;
  position: relative;
  animation: slideUp 0.4s ease forwards;
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.ko-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  border: none;
  background: none;
  font-size: 1.5rem;
  color: var(--color-text);
  cursor: pointer;
}

.ko-modal h2 {
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.ko-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-panel);
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-family: "Courier New", monospace;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.copy-btn {
  background: var(--color-accent);
  border: none;
  color: var(--color-white);
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.copy-btn:hover {
  background: var(--color-primary);
}

.small-print {
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.8;
}

.konami-footer {
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  color: rgba(0,0,0,0.3);
  text-align: center;
  margin-top: 2rem;
  user-select: none;
  letter-spacing: 2px;
  transition: color 0.3s ease;
}

.konami-footer:hover {
  color: var(--color-accent);
}

/* === Re-hide cats === */
.show-cat {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(-10px) rotate(-3deg);
  pointer-events: auto;
}



/* === Katniss & Ozzy — final positions & behaviour === */

/* shared base (hidden by default; JS toggles .show-cat) */
#ozzy-secret,
#katniss-secret {
  position: fixed;
  width: 120px;
  bottom: 22px;
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: opacity .4s ease, transform .4s ease;
  z-index: 9999;
}

/* distinct anchoring so they don't overlap */
#ozzy-secret { right: 22px !important; }
#katniss-secret { right: 176px !important; bottom: 28px !important; }

/* visibility toggle ONLY — no transform here */
.show-cat {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* individual poses & bobbing */
@keyframes catBob { from { transform: translateY(-2px); } to { transform: translateY(-10px); } }

#ozzy-secret.show-cat {
  transform: translateY(-8px) rotate(-5deg) scale(1.02);
  animation: catBob 1.6s ease-in-out .1s infinite alternate;
}
#katniss-secret.show-cat {
  transform: translateY(-14px) rotate(6deg) scale(0.98);
  animation: catBob 1.8s ease-in-out .25s infinite alternate;
}

/* message stays above */
#cat-message { z-index: 10000; }

/* small screens: tighten spacing */
@media (max-width: 480px) {
  #ozzy-secret { right: 14px !important; bottom: 18px !important; width: 100px; }
  #katniss-secret { right: 138px !important; bottom: 24px !important; width: 100px; }
}