/* ══════════════════════════════════════════════════
   ROAD CRUSH — promo site
   Palette + type live in :root. Swap those to reskin.
   ══════════════════════════════════════════════════ */

:root{
  --ink:#08060c;
  --ink-2:#0d0912;
  --paper:#f4eef7;
  --muted:#9a8ea6;

  --pink:#ff2f8e;
  --magenta:#c026d3;
  --orange:#ff7a1a;
  --amber:#ffcf3f;
  --violet:#6d28d9;
  --cyan:#22d3ee;

  --sunset:linear-gradient(180deg,#2a0a4a 0%,#7a1370 34%,#e0357a 62%,#ff7a1a 84%,#ffcf3f 100%);
  --hot:linear-gradient(90deg,var(--pink),var(--orange));

  --edge:rgba(255,255,255,.12);
  --wrap:1240px;
  --hdr-h:74px;

  --display:"Haettenschweiler","Arial Narrow Bold","Impact","Anton",
            "Franklin Gothic Bold","Oswald",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.6;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden}
body.no-scroll{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
::selection{background:var(--pink);color:#fff}

/* ── film grain (reused everywhere) ─────────────── */
.grain{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
}

/* ── curtain / intro ────────────────────────────── */
.curtain{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:grid;place-content:center;gap:26px;justify-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.curtain.is-done{opacity:0;visibility:hidden}
.curtain__mark{
  font-family:var(--display);font-size:clamp(64px,12vw,140px);line-height:1;
  letter-spacing:.02em;background:var(--hot);-webkit-background-clip:text;
  background-clip:text;color:transparent;
  animation:pulse 1.4s var(--ease) infinite alternate;
}
@keyframes pulse{from{opacity:.45}to{opacity:1}}
.curtain__bar{width:180px;height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.curtain__bar i{display:block;height:100%;width:0;background:var(--hot);animation:load 1.5s var(--ease) forwards}
@keyframes load{to{width:100%}}

/* ── header ─────────────────────────────────────── */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr-h);
  display:flex;align-items:center;gap:28px;
  padding-inline:clamp(18px,4vw,44px);
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(8,6,12,.82);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--edge);
}
.hdr__logo{font-family:var(--display);font-size:30px;letter-spacing:.04em;line-height:1;display:flex}
.hdr__logo-r{color:var(--pink)}
.hdr__logo-c{color:var(--paper)}
.hdr__nav{display:flex;gap:30px;margin-left:auto}
.hdr__nav a{
  font-size:12px;letter-spacing:.19em;text-transform:uppercase;font-weight:600;
  color:#cdc3d6;position:relative;padding-block:6px;transition:color .25s;
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--hot);transition:width .3s var(--ease);
}
.hdr__nav a:hover{color:#fff}
.hdr__nav a:hover::after{width:100%}
.hdr__cta{margin-left:4px}
.hdr__nav-play{display:none}

/* ── background music + level meter ─────────────── */
.aud{display:flex;align-items:center;gap:10px;margin-left:26px}
.aud__bars{display:flex;align-items:flex-end;gap:2px;height:22px}
.aud__bars i{
  width:3px;height:100%;transform-origin:50% 100%;transform:scaleY(.14);
  background:linear-gradient(180deg,var(--amber),var(--pink));
  /* no transition: the rAF loop writes a new value every frame, and easing
     between them would smear the meter a frame behind the music */
}
/* idle shimmer only while nothing is playing — the analyser takes over after */
.aud:not(.is-on) .aud__bars i{animation:audIdle 2.2s ease-in-out infinite;opacity:.5}
.aud:not(.is-on) .aud__bars i:nth-child(2){animation-delay:-.3s}
.aud:not(.is-on) .aud__bars i:nth-child(3){animation-delay:-.8s}
.aud:not(.is-on) .aud__bars i:nth-child(4){animation-delay:-1.3s}
.aud:not(.is-on) .aud__bars i:nth-child(5){animation-delay:-.6s}
.aud:not(.is-on) .aud__bars i:nth-child(6){animation-delay:-1.7s}
.aud:not(.is-on) .aud__bars i:nth-child(7){animation-delay:-1s}
@keyframes audIdle{0%,100%{transform:scaleY(.12)}50%{transform:scaleY(.3)}}

.aud__btn{
  display:grid;place-items:center;width:34px;height:34px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--edge);color:#cdc3d6;
  transition:color .25s,border-color .25s,background .25s;
}
.aud__btn:hover{color:#fff;border-color:var(--pink);background:rgba(255,47,142,.14)}
.aud__btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.aud__cone{fill:currentColor}
.aud__wave,.aud__slash{transition:opacity .2s}
/* muted (default): waves off, slash on */
.aud__wave{opacity:0}
.aud__slash{opacity:1}
.aud.is-on .aud__btn{color:var(--pink);border-color:rgba(255,47,142,.5)}
.aud.is-on .aud__wave{opacity:1}
.aud.is-on .aud__slash{opacity:0}
.hdr__burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.hdr__burger span{display:block;width:26px;height:2px;background:var(--paper);margin:5px 0;transition:.3s var(--ease)}
.hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── buttons ────────────────────────────────────── */
.btn{
  --pad:13px 26px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--pad);border:0;cursor:pointer;
  font-family:var(--body);font-size:12px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;
  color:#12060d;background:var(--hot);background-size:200% 100%;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:background-position .5s var(--ease),transform .2s var(--ease),box-shadow .3s;
}
.btn:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,47,142,.34)}
.btn--sm{--pad:10px 18px;font-size:11px}
.btn--lg{--pad:17px 34px;font-size:13px}
/* the clip-path slices the inset border at the two cut corners, so the outline
   alone can't carry the shape — a faint fill keeps the button readable where
   it sits over bright sky */
.btn--ghost{
  background:rgba(8,6,12,.34);backdrop-filter:blur(6px);color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}
.btn--ghost:hover{background:rgba(255,47,142,.2);box-shadow:inset 0 0 0 1px var(--pink);color:#fff}

/* ══ HERO ═══════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:grid;place-items:center;isolation:isolate;
  /* one clock for the whole sky. Every animation below is keyed to the same
     percentages of it, so changing this number retimes the entire cycle:
       0–14%  golden hour      14–26% sun sets, night falls
       26–44% clear moonlit    44–74% clouds roll in and it rains
       78–92% moon sets, sun comes back up */
  --cycle:48s;
}
/* Legibility scrim. On a wide, short screen the headline and buttons land on
   the brightest part of the sun instead of on the dark skyline, and white type
   over amber turns to mush. Sits above every art layer, below the content. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%,
    rgba(8,6,12,.5),rgba(8,6,12,.3) 55%,transparent 80%);
}
.hero__sky{position:absolute;inset:0;background:var(--sunset);z-index:-6}
.hero__sky::after{ /* scan-line venetians over the sun */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(8,6,12,.55) 0 3px,transparent 3px 9px);
  mask-image:linear-gradient(180deg,transparent 30%,#000 52%,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 52%,transparent 78%);
}
.hero__sun{
  position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:min(78vmin,720px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#fff6c9,#ffcf3f 34%,#ff7a1a 62%,#e0357a 100%);
  filter:blur(.5px);
}
.hero__glow{
  position:absolute;inset:0;
  background:radial-gradient(60% 44% at 50% 52%,rgba(255,122,26,.55),transparent 70%);
  mix-blend-mode:screen;
}
/* ── day/night/storm cycle ──────────────────────── */

/* the sun drops behind the skyline, which paints at -4, above it */
.hero__sun{animation:sunSet var(--cycle) ease-in-out infinite}
@keyframes sunSet{
  0%,14%{translate:-50% -50%}
  26%{translate:-50% 50%}
  32%,78%{translate:-50% 105%}
  90%{translate:-50% 35%}
  96%,100%{translate:-50% -50%}
}
.hero__glow{animation:glowFade var(--cycle) ease-in-out infinite}
@keyframes glowFade{0%,14%{opacity:1}30%,74%{opacity:.06}92%,100%{opacity:1}}

/* night wash. A second gradient layer whose opacity animates, rather than
   animating the sky's own gradient — interpolating between two gradients is
   far less reliable than interpolating one number. */
.hero__night{
  position:absolute;inset:0;z-index:-5;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#04030d 0%,#0a0722 40%,#150b31 66%,#25113f 86%,#3d1544 100%);
  animation:nightFall var(--cycle) ease-in-out infinite;
}
@keyframes nightFall{
  0%,12%{opacity:0}
  30%,74%{opacity:.95}
  90%,100%{opacity:0}
}

/* moon — after the wash in the DOM so the wash never tints it grey */
.hero__moon{
  /* deliberately NOT centred like the sun: dead centre puts it entirely
     behind the wordmark, where it may as well not exist */
  position:absolute;left:25%;top:27%;z-index:-5;pointer-events:none;
  width:min(26vmin,220px);aspect-ratio:1;border-radius:50%;
  translate:-50% 135%;opacity:0;
  background:radial-gradient(circle at 38% 34%,#fdfcff,#e2e6f6 44%,#aab3d6 76%,#828cb8);
  box-shadow:0 0 70px 22px rgba(178,198,255,.2);
  animation:moonRise var(--cycle) ease-in-out infinite;
}
.hero__moon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 63% 29%,rgba(116,126,164,.48) 0 8%,transparent 9%),
    radial-gradient(circle at 39% 61%,rgba(116,126,164,.4) 0 11%,transparent 12%),
    radial-gradient(circle at 69% 67%,rgba(116,126,164,.32) 0 6%,transparent 7%),
    radial-gradient(circle at 52% 20%,rgba(116,126,164,.26) 0 5%,transparent 6%);
}
@keyframes moonRise{
  0%,20%{translate:-50% 135%;opacity:0}
  36%,70%{translate:-50% -50%;opacity:1}
  84%,100%{translate:-50% 135%;opacity:0}
}

/* storm clouds — same layer as the moon, later in the DOM, so they drift
   across it and dim it as they pass */
.hero__clouds{position:absolute;inset:0 0 auto;height:66%;z-index:-5;overflow:hidden;pointer-events:none}
.cloud{
  position:absolute;left:0;opacity:0;filter:blur(11px);
  /* lighter than the night sky, with a pink underside — a storm cloud over a
     neon city is lit from below, and a cloud darker than the sky behind it
     simply disappears */
  background:
    radial-gradient(closest-side at 26% 58%,#4c3a74,transparent),
    radial-gradient(closest-side at 53% 36%,#5b4788,transparent),
    radial-gradient(closest-side at 79% 57%,#42315f,transparent),
    radial-gradient(120% 60% at 50% 100%,rgba(255,47,142,.28),transparent 70%);
  animation:cloudPass var(--cycle) linear infinite;
}
.cloud--a{top:14%;width:56%;height:27%}
.cloud--b{top:30%;width:70%;height:32%;filter:blur(15px);animation-delay:calc(var(--cycle) * -0.025)}
.cloud--c{top:3%;width:44%;height:20%;animation-delay:calc(var(--cycle) * 0.03)}
@keyframes cloudPass{
  0%,36%{transform:translateX(-75vw);opacity:0}
  44%{opacity:.94}
  70%{opacity:.9}
  80%,100%{transform:translateX(130vw);opacity:0}
}

/* Rain. Individual drops, built by js — a tiled gradient gives perfectly even
   spacing that reads as hatching, not weather. Each drop randomises its own
   position, length, speed, thickness and opacity; only the wind direction is
   shared, because real rain has one. */
.hero__rain{
  position:absolute;inset:0;z-index:-2;opacity:0;pointer-events:none;
  /* one shared wind: 14° lean, and the fall path is the matching diagonal
     (tan 14° × 126vh ≈ 31.4vh) so drops travel along their own streak
     instead of sliding sideways through it */
  --tilt:14deg;
  --dx:-31.4vh;
  animation:rainWindow var(--cycle) ease-in-out infinite;
}
.hero__rain i{
  position:absolute;top:0;left:0;
  width:var(--w);height:var(--len);border-radius:2px;
  background:linear-gradient(180deg,
    rgba(203,231,255,0),rgba(214,238,255,.95) 55%,rgba(203,231,255,0));
  opacity:var(--op);
  transform:translate3d(0,-14vh,0) rotate(var(--tilt));
  animation:fall var(--dur) linear var(--delay) infinite;
}
@keyframes fall{
  from{transform:translate3d(var(--x),-14vh,0) rotate(var(--tilt))}
  to{transform:translate3d(calc(var(--x) + var(--dx)),112vh,0) rotate(var(--tilt))}
}
/* visibility is stepped, not interpolated, so it needs its own hairline
   keyframes: flipping it mid-fade would pop the whole storm in at half
   opacity. Placed where opacity is already 0, it lets the compositor skip
   150 drops entirely for the ~70% of the cycle that stays dry. */
@keyframes rainWindow{
  0%{opacity:0;visibility:hidden}
  43.9%{opacity:0;visibility:hidden}
  44%{opacity:0;visibility:visible}
  52%,68%{opacity:.9;visibility:visible}
  76%{opacity:0;visibility:visible}
  76.1%{opacity:0;visibility:hidden}
  100%{opacity:0;visibility:hidden}
}

/* the city wakes up after dark */
.hero__windows{opacity:.45;animation:winNight var(--cycle) ease-in-out infinite}
@keyframes winNight{
  0%,14%{opacity:.4}
  32%,72%{opacity:1}
  90%,100%{opacity:.4}
}

/* a real photo defines its own time of day — don't paint a second one over it */
.hero:has(.hero__photo.has-img) .hero__night,
.hero:has(.hero__photo.has-img) .hero__moon,
.hero:has(.hero__photo.has-img) .hero__clouds{display:none}

.hero__city{position:absolute;left:0;right:0;bottom:0;height:46vh;min-height:280px;z-index:-4}
.hero__windows rect{opacity:.5;animation:blink 4s steps(2) infinite}
@keyframes blink{0%,88%{opacity:.7}90%,100%{opacity:.15}}
.hero__palms{position:absolute;inset:auto 0 0;height:64vh;z-index:-3;pointer-events:none}
/* height-driven as well as width-driven: on a short wide screen a 340px palm
   floats in the middle of the frame with nothing under it */
.palm{
  position:absolute;bottom:-4%;width:min(30vw,62vh,400px);height:auto;
  /* rotate, not transform: the left palm is mirrored via transform and the
     two would overwrite each other. Individual transform properties apply
     outside it, so both palms lean the same way in page space. */
  transform-origin:50% 100%;
  animation:sway 7.5s ease-in-out infinite;
}
.palm--l{left:-3%;transform:scaleX(-1)}
.palm--r{right:-2%;animation-duration:9.2s;animation-delay:-2.6s}
@keyframes sway{
  0%,100%{rotate:-1.3deg}
  40%{rotate:1.9deg}
  70%{rotate:.4deg}
}
.hero__road{
  position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:-2;
  width:120vw;height:30vh;display:flex;justify-content:center;
  /* fixed cap left the lanes bunched in the middle third of an ultrawide frame */
  gap:clamp(48px,9vw,290px);
  perspective:300px;opacity:.5;
}
.hero__road i{
  width:10px;height:100%;background:linear-gradient(180deg,transparent,var(--amber));
  transform:rotateX(72deg);transform-origin:bottom;filter:blur(1px);
}
/* real photography, when assets/hero.jpg exists (js sets --img + .has-img) */
.hero__photo{
  position:absolute;inset:0;z-index:-7;opacity:0;
  background:var(--img) center/cover no-repeat;
  transition:opacity 1.1s var(--ease);
}
.hero__photo.has-img{opacity:1}
/* photo present → the drawn sunset becomes a colour wash over it, not the subject */
.hero:has(.hero__photo.has-img) .hero__sky{opacity:.55;mix-blend-mode:soft-light}
.hero:has(.hero__photo.has-img) .hero__city,
.hero:has(.hero__photo.has-img) .hero__palms,
.hero:has(.hero__photo.has-img) .hero__road{opacity:.35}
.hero:has(.hero__photo.has-img)::after{
  content:"";position:absolute;inset:0;z-index:-5;
  background:linear-gradient(180deg,rgba(8,6,12,.55),rgba(8,6,12,.15) 45%,rgba(8,6,12,.9));
}

/* ── foreground chase ───────────────────────────── */
.chase{
  position:absolute;left:0;right:0;bottom:0;z-index:-2;
  /* bounded on BOTH axes: height alone makes them fill half a phone screen,
     width alone shrinks them to nothing on a short wide one */
  height:clamp(36px,min(14vh,10vw),128px);overflow:hidden;pointer-events:none;
}
.chase__actor{
  position:absolute;bottom:0;height:100%;
  /* absolutely positioned + width:auto shrink-wraps to whichever child is
     showing, so the drawn SVG and a dropped-in PNG each set their own width
     from their own aspect ratio — no hardcoded ratio to keep in sync */
  width:auto;
  /* one pass takes 62% of the cycle; the rest is an empty street before the
     next one comes through */
  animation:drive 15s linear infinite;
  /* backwards, not the default none: the car and bike start on a positive
     delay, and without a fill mode they render their UN-animated style until
     that delay elapses — transform:none, i.e. parked at x=0 on the left of
     the screen for the first few seconds after every load */
  animation-fill-mode:backwards;
}
.chase__actor > svg,
.chase__actor > img{display:block;height:100%;width:auto}
/* real artwork wins over the drawn silhouette the moment it loads */
.chase__actor.has-pic > svg{display:none}
/* Spacing is purely these delays: all three travel at the same speed, so a
   delay of D seconds puts an actor D × 155px/s further back.
   No per-actor height any more — every asset now ships on the same 500x235
   canvas with the artwork bottom-anchored inside it, so relative scale and
   the shared ground line come from the art itself rather than from CSS
   guessing a percentage per vehicle. */
.chase__car{animation-delay:1.85s}
.chase__copbike{animation-delay:3.85s}
@keyframes drive{
  0%{transform:translateX(106vw)}
  62%,100%{transform:translateX(-30vw)}
}

/* muzzle flashes — two shots, then a long reload */
.flash{opacity:0}
.chase__runner .flash{animation:pew 2.6s linear infinite}
.chase__copbike .flash{animation:pew 2.9s linear .8s infinite}
@keyframes pew{
  0%,3%{opacity:1} 3.5%,17%{opacity:0}
  18%,21%{opacity:1} 21.5%,100%{opacity:0}
}

/* the only thing marking these two as police */
.beacon-r{fill:#ff2f4d;animation:beaconA .52s steps(1) infinite}
.beacon-b{fill:#22d3ee;animation:beaconB .52s steps(1) infinite}
.livery{fill:rgba(255,255,255,.22)}
@keyframes beaconA{0%,49%{opacity:1}50%,100%{opacity:.1}}
@keyframes beaconB{0%,49%{opacity:.1}50%,100%{opacity:1}}

.hero__inner{position:relative;z-index:2;text-align:center;padding:calc(var(--hdr-h) + 20px) 20px 60px}
.hero__eyebrow{
  margin:0 0 18px;font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:#ffe7c2;text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero__eyebrow span{
  display:inline-block;padding:7px 16px;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);background:rgba(8,6,12,.24);
}
.hero__title{margin:0;line-height:.84;font-family:var(--display);letter-spacing:.01em}
.hero__word{
  display:block;font-size:clamp(64px,min(17vw,22svh),250px);
  color:#fff;text-shadow:0 6px 0 rgba(109,40,217,.55),0 22px 70px rgba(0,0,0,.55);
}
.hero__word--alt{
  background:linear-gradient(180deg,#fff 18%,var(--amber) 55%,var(--pink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  /* second shadow is the readable one — the amber-to-pink half of the wordmark
     sits directly on the sun, which is the same colour it is */
  filter:drop-shadow(0 12px 44px rgba(255,47,142,.5)) drop-shadow(0 3px 10px rgba(8,6,12,.75));
}
.hero__date{
  margin:22px 0 34px;font-size:13px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.65);
}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* desktop download pill under the hero CTAs */
.dl{
  display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:11px 20px;
  border:1px solid rgba(255,255,255,.3);background:rgba(8,6,12,.34);backdrop-filter:blur(6px);
  transition:background .3s,border-color .3s,transform .2s var(--ease);
}
.dl[hidden]{display:none}
.dl:hover{background:rgba(255,47,142,.18);border-color:var(--pink);transform:translateY(-2px)}
.dl__icon{font-size:19px;line-height:1}
.dl__txt{display:flex;flex-direction:column;gap:2px;text-align:left}
.dl__txt b{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.dl__txt small{font-size:10px;letter-spacing:.1em;color:#e2c9d8}

.hero__scroll{position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:3;width:26px;height:44px;border:1px solid rgba(255,255,255,.45);border-radius:14px}
.hero__scroll span{position:absolute;left:50%;top:9px;translate:-50% 0;width:3px;height:8px;border-radius:2px;background:#fff;animation:wheel 1.7s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-4px)}35%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* ── ticker ─────────────────────────────────────── */
.ticker{
  overflow:hidden;background:var(--hot);color:#12060d;
  padding:11px 0;border-block:1px solid rgba(0,0,0,.35);
}
.ticker__track{display:flex;width:max-content;animation:slide 26s linear infinite}
.ticker__track span{font-family:var(--display);font-size:22px;letter-spacing:.08em;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── generic sections ───────────────────────────── */
.sec{position:relative;padding:clamp(78px,11vw,150px) 0}
.kicker{
  margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.36em;
  text-transform:uppercase;color:var(--pink);
}
.h1,.h2{font-family:var(--display);line-height:.9;margin:0 0 26px;letter-spacing:.01em}
.h1{font-size:clamp(56px,11vw,168px)}
.h2{font-size:clamp(38px,6.4vw,92px)}
.lede{max-width:62ch;color:#c8bdd2;font-size:clamp(16px,1.35vw,19px)}
.lede--wide{max-width:70ch}
.fine{font-size:13px;color:var(--muted);margin-top:18px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ── trailer ────────────────────────────────────── */
.sec--trailer{background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.player{
  display:block;width:100%;position:relative;margin:10px 0 34px;padding:0;
  border:1px solid var(--edge);background:#000;cursor:pointer;overflow:hidden;
  aspect-ratio:16/7;text-align:left;
  transition:border-color .35s,box-shadow .45s var(--ease),transform .45s var(--ease);
}
.player:hover{border-color:var(--pink);box-shadow:0 26px 80px rgba(255,47,142,.24);transform:translateY(-4px)}
.player__art{position:absolute;inset:0;background:linear-gradient(180deg,#170a2c,#3d0f45 45%,#7d1a4e 75%,#c2461f 100%);overflow:hidden}
.player__sun{
  position:absolute;left:50%;bottom:-18%;translate:-50% 0;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#ffe08a,#ff7a1a 55%,#e0357a 100%);opacity:.9;
}
.player__strip{
  position:absolute;inset:auto 0 0;height:44%;
  background:
    repeating-linear-gradient(90deg,transparent 0 6%,rgba(34,211,238,.22) 6% 6.4%,transparent 6.4% 12%),
    linear-gradient(180deg,rgba(8,6,12,.2),#08060c 82%);
}
.player__bike{
  position:absolute;left:50%;bottom:14%;translate:-50% 0;
  width:min(30%,240px);aspect-ratio:2.4;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,207,63,.85),transparent 62%);
  filter:blur(2px);
}
.player__play{
  position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;z-index:6;
  background:rgba(8,6,12,.42);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 0 0 rgba(255,47,142,.5);
  transition:box-shadow .4s,background .3s,scale .3s var(--ease);
}
.player:hover .player__play{background:var(--pink);scale:1.08;box-shadow:0 0 0 1px transparent,0 0 0 18px rgba(255,47,142,0)}
.player__play i{
  width:0;height:0;margin-left:6px;
  border-left:22px solid #fff;border-block:13px solid transparent;
}
.player__meta{
  position:absolute;left:0;bottom:0;z-index:6;padding:14px 20px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#e9dff0;
  background:linear-gradient(0deg,rgba(8,6,12,.85),transparent);width:100%;
}
.player__meta b{color:#fff}

/* ── world ──────────────────────────────────────── */
.sec--world{overflow:hidden;text-align:center}
.world__bg{
  position:absolute;inset:-20% 0;z-index:-1;
  background:
    radial-gradient(50% 40% at 20% 30%,rgba(192,38,211,.28),transparent 70%),
    radial-gradient(46% 38% at 82% 62%,rgba(255,122,26,.24),transparent 70%),
    radial-gradient(60% 50% at 50% 50%,rgba(109,40,217,.2),transparent 72%);
  filter:blur(20px);
}
.world__inner .lede{margin-inline:auto}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  margin-top:64px;border-top:1px solid var(--edge);padding-top:44px;
}
.stat b{
  display:block;font-family:var(--display);font-size:clamp(42px,5.6vw,80px);line-height:1;
  background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{display:block;margin-top:10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ── features ───────────────────────────────────── */
.feat{
  width:min(100% - 44px,var(--wrap));margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(28px,5vw,72px);
  padding-block:clamp(40px,6vw,80px);
}
.feat--flip .feat__art{order:2}
.feat__art{
  position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--edge);
  transition:transform .6s var(--ease),border-color .4s;
}
.feat:hover .feat__art{transform:scale(1.015);border-color:rgba(255,47,142,.5)}
.feat__art::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.08))}
.feat__art--police{
  background:
    radial-gradient(40% 60% at 22% 40%,rgba(34,211,238,.55),transparent 66%),
    radial-gradient(40% 60% at 74% 56%,rgba(255,47,142,.6),transparent 66%),
    linear-gradient(200deg,#120a22,#2a0d33 60%,#07050b);
}
.feat__art--gold{
  background:
    radial-gradient(48% 52% at 50% 62%,rgba(255,207,63,.7),transparent 68%),
    linear-gradient(170deg,#1a1006,#3a1a08 55%,#08060c);
}
.feat__art--voice{
  background:
    repeating-linear-gradient(90deg,transparent 0 12px,rgba(34,211,238,.18) 12px 14px),
    radial-gradient(50% 50% at 50% 50%,rgba(109,40,217,.6),transparent 70%),
    linear-gradient(160deg,#0d0a1e,#08060c);
}
.feat__art--race{
  background:
    repeating-linear-gradient(72deg,rgba(255,255,255,.1) 0 6px,transparent 6px 34px),
    radial-gradient(60% 50% at 30% 70%,rgba(255,122,26,.55),transparent 70%),
    linear-gradient(200deg,#1d0722,#08060c);
}
.feat__copy h3{font-family:var(--display);font-size:clamp(30px,3.6vw,52px);line-height:.98;margin:0 0 16px}
.feat__copy p{color:#c1b6cc;margin:0;max-width:46ch}

/* ── gallery ────────────────────────────────────── */
.grid{
  width:min(100% - 44px,var(--wrap));margin:44px auto 0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
}
.shot{margin:0;position:relative;overflow:hidden;cursor:zoom-in;border:1px solid var(--edge)}
.shot--a{grid-column:span 4;aspect-ratio:16/9}
.shot--b{grid-column:span 2;aspect-ratio:4/5}
.shot--c{grid-column:span 2;aspect-ratio:4/5}
.shot--d{grid-column:span 4;aspect-ratio:16/9}
.shot--e{grid-column:span 3;aspect-ratio:16/10}
.shot--f{grid-column:span 3;aspect-ratio:16/10}
.shot__img{position:absolute;inset:0;transition:transform .8s var(--ease),filter .5s}
.shot--a .shot__img{background:linear-gradient(180deg,#3b0f52,#c2306f 55%,#ff9b2f)}
.shot--b .shot__img{background:linear-gradient(200deg,#06121c,#0b3446 50%,#22d3ee)}
.shot--c .shot__img{background:linear-gradient(160deg,#1d0630,#7a1370 60%,#ff2f8e)}
.shot--d .shot__img{background:linear-gradient(190deg,#08060c,#2a0d33 55%,#ff7a1a)}
.shot--e .shot__img{background:linear-gradient(210deg,#0b0a1f,#3b1d7a 60%,#22d3ee)}
.shot--f .shot__img{background:linear-gradient(170deg,#1a1006,#8a5a10 55%,#ffcf3f)}
.shot::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(8,6,12,.8),transparent 55%);
  opacity:.85;transition:opacity .4s;
}
.shot:hover .shot__img,.shot:focus-visible .shot__img{transform:scale(1.07)}
.shot:hover::after{opacity:1}
.shot figcaption{
  position:absolute;left:0;bottom:0;z-index:2;padding:16px 18px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  transform:translateY(6px);opacity:0;transition:.45s var(--ease);
}
.shot:hover figcaption,.shot:focus-visible figcaption{transform:none;opacity:1}

/* ── real screenshots replace the drawn art in place ─
   js sets --img and .has-img only after the file actually loads, so a
   missing asset silently leaves the CSS artwork underneath. ───────── */
.feat__art.has-img,
.shot__img.has-img,
.player__art.has-img{background:var(--img) center/cover no-repeat}
.player__art.has-img > *{display:none}
.player__art.has-img{position:absolute;inset:0}
.player__art.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,12,.75),transparent 60%)}

/* ── leaderboard ────────────────────────────────── */
.sec--board[hidden]{display:none}
.board{list-style:none;counter-reset:rank;margin:38px 0 0;padding:0;max-width:760px}
.board li{
  counter-increment:rank;display:flex;align-items:center;gap:18px;
  padding:15px 4px;border-bottom:1px solid var(--edge);
  opacity:0;transform:translateY(16px);animation:rowIn .6s var(--ease) forwards;
}
@keyframes rowIn{to{opacity:1;transform:none}}
.board li::before{
  content:counter(rank);font-family:var(--display);font-size:26px;min-width:44px;
  color:#4a4054;
}
.board li:nth-child(1)::before{background:var(--hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.board__name{flex:1;font-weight:600;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board__score{font-family:var(--display);font-size:24px;color:var(--amber);letter-spacing:.03em}
/* server answered with an empty board — no rank number, no score column */
.board__empty{counter-increment:none;color:var(--muted);font-size:15px}
.board__empty::before{content:"";min-width:0}

/* ── signup ─────────────────────────────────────── */
.sec--signup{background:linear-gradient(180deg,var(--ink-2),#140a1d)}
.signup{text-align:center}
.signup .lede{margin-inline:auto}
.form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px;position:relative}
.form input{
  width:min(100%,380px);padding:15px 18px;font:inherit;font-size:15px;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid var(--edge);outline:0;
  transition:border-color .3s,background .3s;
}
.form input::placeholder{color:#7d7188}
.form input:focus{border-color:var(--pink);background:rgba(255,255,255,.08)}
.form input.is-bad{border-color:#ff4d4d}
.form__msg{flex-basis:100%;margin:6px 0 0;font-size:13px;min-height:20px;color:var(--amber)}
.form__msg.is-ok{color:#4ade80}

/* ── platforms ──────────────────────────────────── */
.sec--plat{text-align:center;padding-block:clamp(50px,7vw,90px)}
.plat{list-style:none;display:flex;gap:clamp(20px,5vw,64px);justify-content:center;flex-wrap:wrap;margin:8px 0 0;padding:0}
.plat li a{
  font-family:var(--display);font-size:clamp(22px,3vw,40px);color:#3c3346;
  transition:color .35s var(--ease);
}
.plat li a:hover{color:var(--paper)}

/* ── footer ─────────────────────────────────────── */
.ftr{border-top:1px solid var(--edge);background:#050409;padding:64px 0 28px}
.ftr__inner{display:grid;grid-template-columns:1.1fr 2fr .9fr;gap:44px;align-items:start}
.ftr__brand{font-family:var(--display);font-size:34px;line-height:1}
.ftr__brand p{font-family:var(--body);font-size:13px;line-height:1.7;color:var(--muted);margin:14px 0 0}
.ftr__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ftr__cols h4{margin:0 0 14px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.ftr__cols a{display:block;font-size:14px;color:var(--muted);padding:5px 0;transition:color .25s}
.ftr__cols a:hover{color:var(--pink)}
.rating{display:flex;gap:14px;align-items:center;border:1px solid var(--edge);padding:14px;justify-self:end}
.rating b{font-family:var(--display);font-size:38px;line-height:1}
.rating span{font-size:10px;letter-spacing:.14em;line-height:1.7;color:var(--muted)}
.rating i{font-style:normal;opacity:.7}
.ftr__legal{
  width:min(100% - 44px,var(--wrap));margin:52px auto 0;padding-top:22px;
  border-top:1px solid var(--edge);font-size:12px;color:#6a5f74;text-align:center;
}

/* ── modal ──────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:24px;
  background:rgba(4,3,7,.9);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s var(--ease);
}
.modal.is-open{opacity:1}
.modal[hidden]{display:none}
/* the third term keeps a 16:9 box inside short viewports (docked side panes,
   laptop browsers with devtools open) instead of overflowing past the close
   button — width leads, height follows from aspect-ratio */
.modal__box{
  width:min(100%,1080px,calc((100svh - 120px) * 16 / 9));
  aspect-ratio:16/9;border:1px solid var(--edge);position:relative;
}
.modal__frame{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#170a2c,#3d0f45 45%,#7d1a4e 75%,#c2461f 100%);display:grid;place-items:center}
.modal__box video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}
.modal__note{
  position:relative;z-index:6;text-align:center;font-size:14px;color:#efe4f5;
  background:rgba(8,6,12,.55);padding:18px 24px;border:1px solid var(--edge);
}
.modal__note code{font-size:12px;color:var(--amber)}
.modal__close{
  position:absolute;top:22px;right:26px;z-index:10;width:44px;height:44px;
  background:none;border:1px solid var(--edge);color:#fff;font-size:16px;cursor:pointer;
  transition:background .25s,border-color .25s;
}
.modal__close:hover{background:var(--pink);border-color:var(--pink)}

/* ── focus ──────────────────────────────────────── */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ══ responsive ═════════════════════════════════ */
/* Big side screens and ultrawides: the wordmark is capped by viewport HEIGHT,
   so on a wide-but-short screen it ends up small in a very large frame. */
@media (min-width:1200px) and (min-height:660px){
  .hero__word{font-size:min(17vw,25svh,250px)}
}

@media (max-width:960px){
  .hdr__cta{display:none}
  .hdr__burger{display:block}
  /* keep the control, drop the meter — the burger needs the room */
  .aud{margin-left:auto;margin-right:6px}
  .aud__bars{display:none}
  .hdr__nav{
    position:fixed;inset:var(--hdr-h) 0 auto;flex-direction:column;gap:0;margin:0;
    background:rgba(8,6,12,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--edge);
    transform:translateY(-120%);transition:transform .45s var(--ease);
  }
  .hdr__nav.is-open{transform:none}
  .hdr__nav a{padding:18px 26px;font-size:14px;border-bottom:1px solid rgba(255,255,255,.07)}
  .hdr__nav-play{display:block;color:var(--pink) !important;font-weight:800}
  .feat{grid-template-columns:1fr}
  .feat--flip .feat__art{order:0}
  .stats{grid-template-columns:repeat(2,1fr);gap:34px}
  .ftr__inner{grid-template-columns:1fr;gap:34px}
  .rating{justify-self:start}
  .grid{grid-template-columns:repeat(2,1fr)}
  .shot{grid-column:span 1 !important;aspect-ratio:4/3 !important}
}
@media (max-width:600px){
  body{font-size:16px}
  .hero__word{font-size:min(23vw,18svh)}
  .hero__date{margin:18px 0 26px;font-size:11px;letter-spacing:.22em}
  .hero__actions{flex-direction:column;align-items:stretch}
  .grid{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr 1fr}
  .player__play{width:62px;height:62px}
  .player__play i{border-left-width:16px;border-block-width:10px}
}

/* Short viewports — a docked side pane, a half-height window, a phone in
   landscape. The hero is the only section that assumes a full screen, so it
   compresses rather than pushing its own buttons below the fold. */
@media (max-height:640px){
  .hero__word{font-size:min(17vw,20svh)}
  .hero__inner{padding-top:calc(var(--hdr-h) + 6px);padding-bottom:24px}
  .hero__eyebrow{margin-bottom:10px}
  .hero__eyebrow span{padding:5px 12px}
  .hero__date{margin:12px 0 18px}
  .hero__actions{gap:10px}
  .btn--lg{--pad:12px 24px}
  .dl{margin-top:14px;padding:8px 16px}
  .hero__scroll{display:none}
  .hero__city{height:38vh;min-height:170px}
  .hero__palms{height:52vh}
  .sec{padding-block:clamp(48px,8vw,90px)}
}
@media (max-height:480px){
  .hero__eyebrow{display:none}
  .hero__word{font-size:min(15vw,22svh)}
  .hero__date{margin:10px 0 14px;font-size:11px}
  .hdr{--hdr-h:60px}
}
/* Landscape phones: same as above, but the palms and skyline eat the middle
   of the frame at that height, so they step further back. */
@media (max-height:520px) and (orientation:landscape){
  .hero__palms{opacity:.5}
  .hero__road{height:22vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  /* without its animation the chase would just sit parked mid-frame */
  .chase{display:none}
  /* every cycle layer defaults to its golden-hour state, so freezing the
     animations leaves a clean sunset rather than a half-drawn storm */
  .hero__night,.hero__moon,.hero__clouds,.hero__rain{display:none}
}