@font-face{
  font-family:'GameBoy';
  src:url('../fonts/game_boy_1989.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Nintendo';
  src:url('../fonts/nintendo.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

#hero{
  --title-delay: 0s;
  --char-dur: 1.6s;
  --char-stagger: .04s;

  --hero-bg:#fff;
  --title-size: clamp(48px, 12vmin, 160px); /* natural size; scaled down further by fitToViewport() */

  /* Shine controls */
  --shine-delay: 2.2s;
  --shine-width: 28vw;
  --shine-overscan: 40vw;

  position:relative;
  height:100svh;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  background:var(--hero-bg);
  color:#111;
  font-family:'GameBoy',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Absolutely center, then scale */
#hero .fitbox{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%) scale(1);
  transform-origin:center;
  will-change: transform;
  visibility:hidden; /* reveal after first fit to avoid offscreen flash */
}

#hero .logo-link{ display:block; text-decoration:none; }
#hero .logo-link:hover, #hero .logo-link:focus-visible{ text-decoration:none; }

#hero .logo{ text-align:center; user-select:none; position:relative; overflow:visible; }

#hero .word{
  display:inline-flex;
  flex-wrap:nowrap;          /* force single line */
  white-space:nowrap;        /* force single line */
  align-items:flex-end; justify-content:center;
  gap:0; line-height:.9; position:relative; overflow:visible;
}
#hero .word.gb{
  font-weight:900; text-transform:uppercase; font-style:italic;
  font-family:'GameBoy',sans-serif; letter-spacing:-0.04em; transform:scaleY(1.2);
  font-size:var(--title-size);
}

#hero .char{
  display:inline-block; transform-origin:50% 100%;
  opacity:0; position:relative;
  /* This bold italic font's glyph ink overhangs its own advance-width box by
     up to ~0.21em on the right (measured via canvas actualBoundingBoxRight),
     and the tightened line-height (.9, set on .word) plus the word's
     scaleY(1.2) stretch leaves too little room above each glyph too. Each
     character is animated independently, which some mobile WebKit builds
     paint as a box-clipped layer — that overhang gets cropped even though
     overflow is visible everywhere. Padding gives the ink room on both
     edges. The right padding's matching negative margin cancels it back out
     so the tight letter-spacing look is unaffected; padding-top needs no
     such compensation since flex-end alignment anchors each character's
     bottom edge, so extending upward doesn't shift anything. */
  padding-right:.28em; margin-right:-.28em;
  padding-top:.3em;
  animation-name:char-entry,gb-color;
  animation-duration:var(--char-dur);
  animation-timing-function:linear;
  animation-fill-mode:both;
  animation-delay:var(--char-delay);
}

@keyframes char-entry{
  0%   { opacity:0; transform: scale(3.5) translate(var(--ox,0em), 8em) }
  15%  { opacity:1 }
  45%  { transform: translate(calc(var(--ox,0em) * .6), -3.2em) } /* biggest hop up */
  50%  { transform: translate(calc(var(--ox,0em) * .5), -.4em) }
  55%  { transform: translate(calc(var(--ox,0em) * .45), 0em) }
  60%  { transform: translate(calc(var(--ox,0em) * .3), 0em) }
  65%  { transform: translate(calc(var(--ox,0em) * .15), -0.8em) }
  70%  { transform: scale(1) translate(0, -1.6em) }
  80%  { transform: translate(0, 0) }
  90%  { transform: translate(0, -0.8em) }
  100% { opacity:1; transform: translate(0, 0) }
}

@keyframes gb-color{
  0%   { color:#fff }
  13.52%{ color:#ff3dee }
  37.04%{ color:#f96e09 }
  48.82%{ color:#f9fa2d }
  66.48%{ color:#07f905 }
  90%  { color:#05f9f7 }
  100% { color:#1733ff }
}
#hero .gb .char{ color:#1733ff; }

/* Shine sweep, contained to the hero so it never leaks over content below */
#hero .shine{
  position:absolute; pointer-events:none; z-index:9999;
  top:-20%; bottom:-20%;
  left: calc(-1 * var(--shine-overscan));
  width: var(--shine-width);
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.70) 50%, transparent 100%);
  mix-blend-mode: screen;
  transform: translateX(0);
  animation: shine-move 1.8s ease-in-out var(--shine-delay) forwards;
}
@keyframes shine-move{
  to { transform: translateX(calc(100vw + var(--shine-overscan) * 2)); }
}

#hero .space{ display:inline-block; width:.4em; }

/* Scroll-down affordance — styled after the pink "Nintendo" sub-brand text
   under the GAME BOY logo: same real Nintendo font, magenta, sitting close
   below the logo's actual rendered edge (--logo-bottom, set by
   fitToViewport()). */
#hero .scroll-cue{
  position:absolute; left:50%;
  top:calc(var(--logo-bottom, 60%) + clamp(28px, 6vh, 56px));
  transform:translateX(-50%);
  display:flex; align-items:center;
  color:#ff3dee; text-decoration:none;
  opacity:0; animation: cue-fade-in .6s ease-out 3s forwards;
}
#hero .scroll-cue svg{
  width:24px; height:24px;
}
@keyframes cue-fade-in{ to{ opacity:.65 } }

@media (prefers-reduced-motion: reduce){
  #hero .char{ animation:none; opacity:1 }
  #hero .shine{ display:none }
  #hero .scroll-cue{ animation:none; opacity:.65 }
}