/* The marketing page of Hoverboard racer. The colors, the font stack and the sticker buttons are the game's own
   (prototype/src/app/style.css, the UI kit of owner decision O51).
   Motion: main.js adds the class "motion" to <html> when the visitor has not asked for less motion. Only then do the hero and the
   maps pin to the screen, and only then do the layers move. Each scene ([data-scene]) gets --p, its scroll progress from 0 to 1,
   and each layer gets --d, its depth (data-depth). A layer moves by --p x --d x --run, where --run is the distance of the scene. */
:root {
  --ink: #1B1B2F; --deep: #2E2E48; --sky: #5EC8FF; --candy: #FF5FA2; --sunset: #FF8A3D; --lime: #B6F03C;
  --paper: #F4F7FB; --cream: #F6F3E8; --sun: #FFD93D; --mint: #2ED3A8; --coral: #FF5A5A; --violet: #9B7BFF;
  --bevel: inset 2px 3px 0 rgba(255, 255, 255, .55), inset -2px -4px 0 rgba(27, 27, 47, .13);
  --sunk: inset 2px 3px 0 rgba(27, 27, 47, .16), inset -1px -1px 0 rgba(255, 255, 255, .4);
  --gloss: linear-gradient(rgba(255, 255, 255, .24) 50%, transparent 50%);
  --spring: cubic-bezier(.3, 1.7, .5, 1); --ease: cubic-bezier(.2, .8, .2, 1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sticker: 900 italic 1em/1 var(--font);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); overflow-x: clip;
  -webkit-font-smoothing: antialiased; line-height: 1.5; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink);
  color: var(--paper); font-weight: 800; }
.skip:focus { left: 16px; }
:focus-visible { outline: 3px solid var(--candy); outline-offset: 3px; }

/* Type */
.kicker { margin: 0 0 .7em; font: var(--sticker); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: #C8246D; }
.title { margin: 0 0 .5em; font: var(--sticker); font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: .98; letter-spacing: -.01em;
  text-transform: uppercase; text-wrap: balance; }
.lead { margin: 0 0 1em; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; max-width: 34em; }
.on-dark .title, .friends .title, .finale .title { color: var(--paper); -webkit-text-stroke: .14em var(--ink); paint-order: stroke fill;
  text-shadow: 0 .07em 0 var(--ink); }
.on-dark .kicker, .friends .kicker { color: var(--sun); }

/* Buttons: a toy sticker lit from the top left, like the PLAY button of the lobby. */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .95em 1.7em; border: 3px solid var(--ink);
  border-radius: 16px; font: var(--sticker); font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--gloss), var(--sun); box-shadow: var(--bevel), 0 5px 0 var(--ink);
  transition: transform .18s var(--spring), box-shadow .18s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--bevel), 0 7px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: var(--sunk), 0 1px 0 var(--ink); }
.btn-sm { padding: .6em 1.1em; font-size: .85rem; border-radius: 12px; box-shadow: var(--bevel), 0 3px 0 var(--ink); }
.ctas { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.soon { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.soon span { padding: .45em 1em; border: 2px solid var(--ink); border-radius: 99px; background: rgba(255, 255, 255, .78);
  color: var(--ink); font: var(--sticker); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }

/* The bar on top. Clear over the sky, frosted once you leave the hero. */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  transition: background-color .3s, box-shadow .3s; }
.scrolled .bar { background: rgba(244, 247, 251, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(27, 27, 47, .1); }
.bar-logo { display: flex; align-items: center; gap: 10px; font: var(--sticker); font-size: 1rem; letter-spacing: .02em;
  text-transform: uppercase; text-decoration: none; color: var(--ink); }
.bar-logo img { border: 2px solid var(--ink); border-radius: 9px; }
.bar .bar-logo { opacity: 0; transition: opacity .3s; }
.scrolled .bar .bar-logo, .bar .bar-logo:focus-visible { opacity: 1; }
.bar-nav { display: flex; gap: 2px; margin-left: auto; }
.bar-nav a { padding: 8px 12px; border-radius: 10px; font: var(--sticker); font-size: .88rem; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; }
.bar-nav a:hover { background: rgba(255, 255, 255, .6); }
@media (max-width: 760px) { .bar-nav { display: none; } .bar .btn { margin-left: auto; } }
@media (max-width: 420px) { .bar .bar-logo span { display: none; } }

/* Scenes and layers */
[data-scene] { position: relative; --p: .5; --run: 30vh; }
.hero, .maps { --p: 0; }
.layer { position: absolute; }
.motion [data-depth] { will-change: transform; transform: translate3d(0, calc((var(--p) - .5) * var(--d, 0) * var(--run) * -1), 0); }
.motion .hero [data-depth] { transform: translate3d(0, calc(var(--p) * var(--d, 0) * var(--run) * -1), 0); }
.stage { position: relative; overflow: hidden; }

/* Hero: the sky over the fair. With motion it is 90 svh taller than the screen, and the stage stays pinned while you scroll. */
.hero { --run: 90vh; --run: 90svh; }
.motion .hero { height: 190vh; height: 190svh; }
.hero .stage { height: 100vh; height: 100svh; min-height: 540px; }
.motion .hero .stage, .motion .maps .stage { position: sticky; top: 0; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #2F9BEF 0%, #5EC8FF 36%, #A6E0FF 68%, #E2F4FF 100%); }
.sun { top: 8vh; right: 9vw; width: 34vmin; height: 34vmin; border-radius: 50%;
  background: radial-gradient(circle, #FFFDF0 0 24%, rgba(255, 245, 190, .7) 27%, rgba(255, 245, 190, .25) 45%, rgba(255, 245, 190, 0) 68%); }
.far, .fair { left: 0; bottom: 0; width: 100%; }
.far { height: 50vh; }
.fair { height: 52vh; }
.wheel { transform-box: fill-box; transform-origin: center; }
.motion .wheel { animation: spin 60s linear infinite; }
.cloud { height: auto; pointer-events: none; }
.c-a { top: 13vh; left: -6vw; width: clamp(220px, 30vw, 520px); opacity: .9; }
.c-b { top: 30vh; right: -8vw; width: clamp(200px, 26vw, 460px); opacity: .85; }
.c-c { bottom: 6vh; left: -10vw; width: clamp(300px, 44vw, 760px); }
.c-d { bottom: 2vh; right: -14vw; width: clamp(320px, 50vw, 860px); }
.motion .c-a, .motion .c-c { animation: drift 18s ease-in-out infinite alternate; }
.motion .c-b, .motion .c-d { animation: drift 22s ease-in-out infinite alternate-reverse; }

.streaks { position: absolute; inset: 0; pointer-events: none; }
.streaks i { position: absolute; right: -30vw; width: 22vw; height: 3px; border-radius: 3px; opacity: 0; rotate: -24deg;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95)); }
.streaks i:nth-child(1) { top: 22%; animation-delay: 0s; }
.streaks i:nth-child(2) { top: 48%; animation-delay: .7s; }
.streaks i:nth-child(3) { top: 66%; animation-delay: 1.3s; }
.streaks i:nth-child(4) { top: 34%; animation-delay: 1.9s; }
.streaks i:nth-child(5) { top: 78%; animation-delay: 2.4s; }
.streaks i:nth-child(6) { top: 56%; animation-delay: 3.1s; }
.motion .streaks i { animation: streak 3.6s linear infinite; }
.motion .streaks i:nth-child(odd) { animation-duration: 2.9s; }

.hero-copy { z-index: 2; left: 0; right: 0; top: max(76px, 11vh); width: min(940px, 100% - 32px); margin-inline: auto; text-align: center; }
.motion .hero-copy { opacity: calc(1 - var(--p) * 1.9); }
.wordmark-wrap { margin: 0; }
.wordmark { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 0 rgba(27, 27, 47, .18)); }
.wordmark text { font-family: var(--font); font-weight: 900; font-style: italic; stroke-linejoin: round; }
.wm-main { font-size: 168px; fill: url(#wm-fill); stroke: var(--ink); stroke-width: 22px; paint-order: stroke; }
.wm-shadow { font-size: 168px; fill: var(--ink); stroke: var(--ink); stroke-width: 22px; }
.wm-ribbon { font-size: 84px; fill: var(--paper); stroke: var(--ink); stroke-width: 14px; paint-order: stroke; }
.wm-spark { fill: #FFFBE6; stroke: var(--ink); stroke-width: 5px; stroke-linejoin: round; }
.motion .wm-spark { animation: twinkle 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.tagline { margin: .2em 0 1em; font: var(--sticker); font-size: clamp(1.15rem, 2.4vw, 1.75rem); letter-spacing: .02em; text-transform: uppercase;
  color: var(--paper); -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; }

/* The board: the Streeter deck of the game icon, tilted flat in 3D, on two jets of light. */
.board-fly { position: absolute; z-index: 3; left: 61%; top: 63%; width: clamp(190px, 27vmin, 330px); pointer-events: none; }
.motion .board-fly { will-change: transform;
  transform: translate3d(calc(var(--p) * 58vw), calc(var(--p) * -84vh), 0) rotate(calc(var(--p) * -8deg)) scale(calc(1 + var(--p) * .7)); }
.board-bob { position: relative; perspective: 900px; }
.motion .board-bob { animation: bob 2.6s ease-in-out infinite alternate; }
.board-3d { position: relative; width: 36%; margin-inline: auto; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(58deg); }
.board-3d img { width: 100%; height: auto; }
.deck { position: relative; }
.deck-edge { position: absolute; inset: 0; transform: translateZ(-10px); filter: brightness(.3); }
.jet { position: absolute; left: 50%; width: 120%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) translateZ(-22px);
  background: radial-gradient(circle, #FFFFFF 0 14%, rgba(150, 225, 255, .95) 24%, rgba(94, 200, 255, .5) 40%, rgba(94, 200, 255, 0) 66%); }
.jet-a { top: 20%; }
.jet-b { top: 80%; }
.motion .jet { animation: flicker .16s ease-in-out infinite alternate; }
.board-trail { position: absolute; right: 52%; top: 52%; width: 150%; height: 14px; border-radius: 99px; rotate: -22deg; transform-origin: right center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9)); filter: blur(1px); }

/* The near clouds rise faster than every other layer. At the end they are a bank over the lower half of the stage, and the page
   goes on under them in the same paper color. */
.near { z-index: 4; left: 0; right: 0; top: 88%; height: 160vh; }
.near .cloud { position: absolute; }
.n-a { top: -11vh; left: -8vw; width: max(380px, 48vw); }
.n-b { top: -15vh; left: 28vw; width: max(420px, 52vw); }
.n-c { top: -9vh; right: -10vw; width: max(380px, 46vw); }
.near-fill { position: absolute; left: 0; right: 0; top: 2vh; bottom: 0; background: linear-gradient(rgba(244, 247, 251, 0), var(--paper) 12vh); }
.motion .near { transform: translate3d(0, calc(var(--p) * var(--run) * -.44), 0); }

.cue { position: absolute; z-index: 5; left: 0; right: 0; bottom: max(18px, 3vh); margin: 0; text-align: center; font: var(--sticker);
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--deep); }
.cue::after { content: ""; display: block; width: 12px; height: 12px; margin: 8px auto 0; border: solid var(--deep); border-width: 0 3px 3px 0;
  rotate: 45deg; }
.motion .cue { opacity: calc(1 - var(--p) * 8); }
.motion .cue::after { animation: nudge 1.4s ease-in-out infinite; }

/* Race */
.race { z-index: 2; padding: 4vh 0 12vh; overflow-x: clip; background: var(--paper); --run: 36vh; }
/* With motion, the race scene rises over the last 45 vh of the pinned hero, so its title comes up out of the cloud bank. */
.motion .race { margin-top: -45vh; padding-top: 16vh; background: linear-gradient(rgba(244, 247, 251, 0), var(--paper) 14vh); }
.race-grid { scroll-margin-top: 90px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.feats { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.feats li { padding: 14px 18px; border: 3px solid var(--ink); border-radius: 18px; background: #FFFFFF; box-shadow: 0 5px 0 var(--ink); }
.feats h3 { margin: 0 0 4px; font: var(--sticker); font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; }
.feats p { margin: 0; color: #3A3A58; }
.race-shot { position: relative; margin: 0; }
.device { overflow: hidden; border: 6px solid var(--ink); border-radius: 30px; background: var(--ink); rotate: 2deg;
  box-shadow: 0 10px 0 var(--ink), 0 40px 70px -28px rgba(46, 46, 72, .55); }
.device img { width: 100%; height: auto; border-radius: 22px; }
.float { position: absolute; width: clamp(54px, 7vw, 108px); height: auto; filter: drop-shadow(0 6px 0 rgba(27, 27, 47, .18)); }
.f-1 { top: -12%; left: -5%; }
.f-2 { bottom: -12%; left: 10%; }
.f-3 { top: -16%; right: 16%; }
.f-4 { bottom: -9%; right: -3%; }
.f-5 { top: 38%; right: -8%; }
.motion .float { animation: wobble 3.2s ease-in-out infinite alternate; }
.motion .f-2, .motion .f-4 { animation-duration: 4.1s; animation-direction: alternate-reverse; }

.items { margin-top: 12vh; }
.items-title { margin: 0 0 18px; text-align: center; }
.items-view { overflow-x: auto; padding: 6px 0 14px; scrollbar-width: none; }
.motion .items-view { overflow: hidden; }
.items-row { display: flex; gap: 14px; width: max-content; margin: 0 auto; padding: 0 16px; list-style: none; }
.motion .items-row { transform: translate3d(calc((var(--p) - .5) * -46vw), 0, 0); }
.items-row li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 118px; padding: 14px 8px 12px;
  border: 3px solid var(--ink); border-radius: 18px; background: #FFFFFF; box-shadow: 0 5px 0 var(--ink); }
.items-row img { width: 68px; height: 68px; }
.items-row span { padding: .3em .7em; border-radius: 99px; background: var(--kind); font: var(--sticker); font-size: .72rem; letter-spacing: .03em;
  text-align: center; text-transform: uppercase; }
.atk { --kind: #FFB3B3; }
.def { --kind: #A6F5DE; }
.boo { --kind: #DDF7A8; }
.items-key { margin: 6px 0 0; text-align: center; font-size: .9rem; color: #5A5A78; }

/* Maps: a pinned stage. main.js sets --shift, how far the deck slides, and --pin-h, the height of the section. */
.maps { color: var(--paper); background: var(--deep); }
.motion .maps { height: var(--pin-h, 300vh); }
.maps .stage { background: radial-gradient(120% 90% at 50% 0%, #3E3E6E 0%, var(--deep) 50%, #23233B 100%); display: flex; flex-direction: column; justify-content: center; gap: max(18px, 3vh); min-height: 100vh; min-height: 100svh;
  padding: 88px 0 5vh; }
.motion .maps .stage { height: 100vh; height: 100svh; }
.maps-ghost { position: absolute; top: 54%; left: 0; margin: 0; white-space: nowrap; pointer-events: none; font: var(--sticker);
  font-size: 30vh; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .07); translate: 0 -50%; }
.motion .maps-ghost { transform: translate3d(calc(var(--p) * var(--shift, 0px) * -.3), 0, 0); }
.maps-head .title { font-size: clamp(1.9rem, 4.2vw, 3.4rem); max-width: 18em; margin: 0; }
.track-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.motion .track-view { overflow: hidden; scroll-snap-type: none; }
.track { display: flex; align-items: flex-start; gap: 24px; width: max-content; margin: 0; padding: 8px max(16px, (100vw - 1180px) / 2) 24px;
  list-style: none; }
.motion .track { will-change: transform; transform: translate3d(calc(var(--p) * var(--shift, 0px) * -1), 0, 0); }
.map-card { flex: none; width: clamp(270px, 31vw, 450px); padding: 10px 10px 18px; border: 3px solid var(--ink); border-radius: 22px;
  background: #27273F; box-shadow: 0 6px 0 #111120; scroll-snap-align: center; }
.map-card:nth-child(even) { margin-top: 28px; }
.map-media { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: #111120; }
.map-media video { width: 100%; height: 100%; object-fit: cover; }
.tier { display: flex; align-items: center; gap: 4px; margin: 14px 6px 6px; font: var(--sticker); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tier); }
.tier i { width: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.tier i:nth-child(3) { margin-right: 6px; }
[data-tier="1"] { --tier: var(--mint); }
[data-tier="2"] { --tier: var(--sun); }
[data-tier="3"] { --tier: var(--coral); }
[data-tier="1"] .tier i:nth-child(-n+1), [data-tier="2"] .tier i:nth-child(-n+2), [data-tier="3"] .tier i:nth-child(-n+3) { background: var(--tier); }
.map-card h3 { margin: 0 6px 6px; font: var(--sticker); font-size: 1.35rem; text-transform: uppercase; }
.map-card p:last-child { margin: 0 6px; font-size: .96rem; line-height: 1.45; color: #CDD3E4; }
.track-bar { width: min(420px, 60vw); height: 6px; margin: 0 auto; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.track-bar span { display: block; height: 100%; background: var(--candy); transform-origin: left; transform: scaleX(var(--p)); }
.track-bar { display: none; }
.motion .track-bar { display: block; }

/* Friends */
.friends { padding: 16vh 0; overflow: hidden; color: var(--paper); --run: 40vh;
  background: linear-gradient(160deg, #4B33C2 0%, #7B4BE8 45%, #C054C8 78%, #FF5FA2 100%); }
.friends-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 460px; margin: 28px 0 0; padding: 0; list-style: none; }
.seats li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: 10px;
  background: rgba(46, 46, 72, .92); font: var(--sticker); font-size: .95rem; letter-spacing: .03em; text-transform: uppercase; }
.seats svg { flex: none; width: 16px; height: 16px; fill: var(--c); }
.seats .s-1 { --c: var(--mint); }
.seats .s-2 { --c: var(--sun); }
.seats .s-3 { --c: #FFFFFF; background: var(--candy); }
.seats .s-4 { --c: var(--lime); }
.seats .s-5 { --c: var(--sky); }
.seats .s-6 { --c: #FF8AC0; }
.friends-shots { position: relative; }
.shot { margin: 0; overflow: hidden; border: 5px solid var(--ink); border-radius: 22px; background: var(--ink); box-shadow: 0 9px 0 var(--ink); }
.shot img { width: 100%; height: auto; }
.shot-back { width: 90%; rotate: -3deg; }
.shot-front { position: relative; width: 82%; margin: -16% 0 0 auto; rotate: 2.5deg; }

/* Locker */
.locker { padding: 16vh 0 14vh; overflow: hidden; background: linear-gradient(180deg, #FFF3CC 0%, var(--cream) 60%, #FFFFFF 100%); --run: 34vw; }
.locker-head { text-align: center; }
.locker-head .lead { margin-inline: auto; }
.racks { display: grid; gap: 26px; margin: 7vh 0 9vh; rotate: -5deg; }
.rack { display: flex; gap: 26px; width: max-content; margin-left: 50vw; translate: -50% 0; }
.rack img { flex: none; width: auto; height: clamp(130px, 14vw, 210px); filter: drop-shadow(0 7px 0 rgba(27, 27, 47, .16)); }
.rack img:nth-child(odd) { rotate: -4deg; }
.rack img:nth-child(3n) { rotate: 5deg; }
.motion .racks .rack { transform: translate3d(calc((var(--p) - .5) * var(--d, 0) * var(--run) * -1), 0, 0); }
.locker-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.shot-locker { rotate: -1.5deg; }
.stats { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.stats li { display: flex; align-items: baseline; gap: 12px; padding: 12px 20px; border: 3px solid var(--ink); border-radius: 18px;
  background: #FFFFFF; box-shadow: 0 5px 0 var(--ink); }
.stats b { font: var(--sticker); font-size: clamp(2rem, 4vw, 3rem); color: var(--candy); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; }
.stats span { font: var(--sticker); font-size: .95rem; letter-spacing: .03em; text-transform: uppercase; }

/* Finale: a sunset with its own layers, and a board that crosses it. */
.finale { padding: 22vh 0 26vh; overflow: hidden; text-align: center; color: var(--paper); --run: 50vh;
  background: linear-gradient(180deg, #23235E 0%, #5A34B4 30%, #C24FB0 56%, #FF6F86 74%, #FF9A3D 90%, #FFD93D 100%); }
.finale-sky { position: absolute; inset: 0; pointer-events: none; }
.sunset-sun { left: 0; right: 0; bottom: -18vmin; width: 70vmin; height: 70vmin; margin-inline: auto; border-radius: 50%;
  background: radial-gradient(circle, #FFF6C4 0 36%, rgba(255, 217, 61, .55) 48%, rgba(255, 217, 61, 0) 70%); }
.finale .cloud { opacity: .88; }
.f-a { top: 8%; left: -10vw; width: clamp(240px, 36vw, 620px); }
.f-b { top: 46%; right: -12vw; width: clamp(260px, 42vw, 700px); }
.f-c { bottom: -8%; left: 4vw; width: clamp(320px, 58vw, 980px); }
.finale-board { position: absolute; top: 14%; left: 0; height: clamp(170px, 30vmin, 320px); width: auto; rotate: 74deg;
  filter: drop-shadow(0 6px 0 rgba(27, 27, 47, .35)); }
.motion .finale-board { transform: translate3d(calc(-20vw + var(--p) * 120vw), calc(var(--p) * -14vh), 0); }
.finale-copy { position: relative; z-index: 2; max-width: 780px; padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 44px); border: 3px solid var(--ink);
  border-radius: 28px; background: rgba(27, 27, 47, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 0 var(--ink); }
.finale-copy .lead { margin-inline: auto; }
.promise { margin: 26px 0 0; font: var(--sticker); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); }

/* Footer */
.foot { padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--paper); }
.foot-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.foot .bar-logo { color: var(--paper); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { color: #C9CFE0; text-decoration: none; font-weight: 600; }
.foot nav a:hover { color: #FFFFFF; text-decoration: underline; }

/* Reveal: a few blocks rise in as they enter. */
.motion .reveal { opacity: 0; translate: 0 26px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.motion .reveal.in { opacity: 1; translate: 0 0; }

@keyframes spin { to { rotate: 360deg; } }
@keyframes drift { to { translate: 5vw 0; } }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -16px; } }
@keyframes flicker { from { opacity: .75; scale: .92; } to { opacity: 1; scale: 1.05; } }
@keyframes wobble { from { rotate: -9deg; } to { rotate: 9deg; } }
@keyframes twinkle { from { opacity: .35; scale: .7; } to { opacity: 1; scale: 1.1; } }
@keyframes nudge { 50% { translate: 0 5px; } }
@keyframes streak {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .9; }
  60% { opacity: .9; }
  100% { transform: translate3d(-150vw, 0, 0); opacity: 0; }
}

/* Phones and narrow windows */
@media (max-width: 900px) {
  .race-grid, .friends-grid, .locker-foot { grid-template-columns: minmax(0, 1fr); }
  .race-shot { margin-top: 24px; }
  .friends-shots { margin-top: 12px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats li { flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; text-align: center; }
  .stats span { font-size: .78rem; }
}
@media (max-width: 600px) {
  .hero-copy { top: max(72px, 10vh); }
  .board-fly { left: 50%; top: auto; bottom: 20vh; width: 46vw; margin-left: -23vw; }
  .sun { top: 4vh; right: -6vw; width: 54vmin; height: 54vmin; }
  .far { height: 34vh; }
  .fair { height: 36vh; }
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-card { width: 80vw; }
  .map-card:nth-child(even) { margin-top: 0; }
  .maps-ghost { font-size: 22vh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 404 */
.lost { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; text-align: center; }
.lost-cloud { position: absolute; bottom: -4vh; left: 50%; width: max(480px, 70vw); translate: -50% 0; }
.lost-copy { position: relative; padding: 24px 16px; }
.lost .title { color: var(--paper); -webkit-text-stroke: .14em var(--ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--ink); }
.lost .lead { margin-inline: auto; }
.lost .kicker { color: var(--deep); }