/* Brand palette from the Kukuyo Studio logo guide: #FFFFFF, #3D3D3D, #FFD101.
   Other tones are tints and shades of those three. */
:root {
  --yellow: #FFD101;
  --charcoal: #3D3D3D;
  --white: #FFFFFF;

  --on-dark-muted: #C9C9C9;

  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

::selection { background: var(--yellow); color: var(--charcoal); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  padding: 64px var(--gutter);
  background: var(--charcoal);
}
.fireflies { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.hero-inner {
  position: relative; max-width: 640px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  pointer-events: none;
}
.hero-inner a { pointer-events: auto; }

.wordmark { width: min(70vw, 260px); height: auto; margin-top: 36px; }
.hero h1 {
  margin-top: 28px;
  font-size: clamp(44px, 8vw, 88px); font-weight: 700; letter-spacing: -0.02em;
  color: var(--yellow);
}
.contact {
  margin-top: 28px; color: var(--white); font-weight: 700; text-decoration: none;
  border-bottom: 3px solid var(--yellow);
}
.contact:hover { color: var(--yellow); }

.catch-hint {
  margin-top: 36px; font-size: 13px; font-weight: 700; color: var(--on-dark-muted); opacity: .6;
  transition: opacity .6s ease;
}
.catch-hint.is-gone { opacity: 0; }
.catch-count {
  position: absolute; right: var(--gutter); bottom: 28px; z-index: 2; margin: 0;
  font: 700 13px/1 var(--font-body); color: var(--charcoal);
  background: var(--yellow); padding: 9px 14px; border-radius: 999px;
}

/* ---------- Mascot ---------- */
.mascot-wrap { width: min(52vw, 280px); }
.mascot { width: 100%; height: auto; overflow: visible; animation: bob 5s ease-in-out infinite; }
.mascot-ring { fill: var(--yellow); }
.mascot-face { fill: var(--charcoal); }
.mascot-eye { fill: var(--yellow); transform-box: fill-box; transform-origin: center; transition: transform .09s ease; }
.mascot [data-eyes] { transition: transform .12s ease-out; }
.mascot.is-blinking .mascot-eye { transform: scaleY(.08); }
.mascot.is-happy .mascot-eye { transform: scaleY(.35) translateY(-30%); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

@media (prefers-reduced-motion: reduce) {
  .mascot { animation: none; }
}