@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:var(--bg);   /* was #fff; now follows the theme */
  --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;
  /* Was 100svh. With six exhibits below it, a full screen of name meant
     most visitors never saw that there was anything under it. */
  height:min(86svh, 780px);
  width:100%;
  overflow:hidden;
  isolation:isolate;
  background:var(--hero-bg);
  color:var(--text);   /* was #111; now follows the theme */
  font-family:'GameBoy',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Absolutely center, then scale */
#hero .fitbox{
  position:absolute;
  /* Nudged up by half the space the index occupies, so the name stays
     optically centred in what's left rather than overlapping it. */
  top:calc(50% - var(--hero-reserve, 0px) / 2);
  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%, var(--shine-tint, 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; }

/* The scroll cue — a lone magenta chevron — was deleted on 2026-10-05 and
   replaced by the index below, which does the same job (there is more
   page down there) while also saying what is down there, and is the only
   navigation a phone gets: the rail is desktop-only. */

#hero .hero-index{
  position:absolute;
  left:50%;
  bottom:clamp(16px, 3.5vh, 34px);
  transform:translateX(-50%);
  width:min(92vw, 820px);
  opacity:0;
  animation:cue-fade-in .7s ease-out 2.6s forwards;
}

#hero .hero-index ol{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 8px;
}

#hero .hero-index a{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:5px 11px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--muted);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--fs-sm);
  letter-spacing:.06em;
  text-decoration:none;
  line-height:1.5;
}

#hero .hero-index a:hover,
#hero .hero-index a:focus-visible{
  color:var(--text);
  border-color:var(--muted);
  text-decoration:none;
}

#hero .hero-index a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

#hero .hero-index .ix-no{
  font-family:var(--mono);
  font-size:10px;
  color:var(--accent);
}

@keyframes cue-fade-in{ to{ opacity:1 } }

/* The index carries the page's only navigation on a phone, and it was
   starting at opacity:0 and animating in — so under reduced motion it
   should simply already be there. Caught by the audit in this same run,
   against a thing added two runs earlier. */
@media (prefers-reduced-motion: reduce){
  #hero .hero-index{ opacity:1; animation:none; }
}

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