/* =============================================================
   BRAND TYPE — self-hosted, so there is no third-party request on
   the critical path and no FOUT from a CDN. font-display:swap keeps
   text visible while the .otf loads on a 4G connection.

   Basis Grotesque  — XPENG's brand face: body, UI, section titles
   Futura BT Heavy Italic — the headline treatment from the key art
   ============================================================= */
@font-face{
  font-family:'Basis Grotesque';
  src:url('font/BasisGrotesque-Regular.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Basis Grotesque';
  src:url('font/BasisGrotesque-Bold.otf') format('opentype');
  font-weight:700;font-style:normal;font-display:swap;
}
/* Synthesised 500/600 map to bold — the family ships only 400/700. */
@font-face{
  font-family:'Basis Grotesque';
  src:url('font/BasisGrotesque-Bold.otf') format('opentype');
  font-weight:500 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Futura Display';
  src:url('font/FuturaBT-HeavyItalic.otf') format('opentype');
  font-weight:700;font-style:italic;font-display:swap;
}

/* =============================================================
   XPENG FUTURE NIGHT — landing page styles
   Mobile-first: base rules are the phone layout (85%+ of traffic),
   desktop is layered on at 1020px.
   ============================================================= */
:root{
  /* Ember: the sunset bleeding up through the page. This was one of
     five selectable palettes; it is now the only one, folded into the
     base rather than left as an override. */
  --ink:#140A05;
  --coal:#1F0E06;
  --orange:#F47920;
  --amber:#FF9A3D;
  --ember:#C24E00;
  --paper:#FFFFFF;
  --mist:rgba(255,255,255,.62);
  --line:rgba(255,196,150,.16);
  --card-line:#E8E3DC;
  --field:#F7F4F0;
  --nav-h:58px;

  /* ---- one gutter system for the whole page ----
     Every top-level band (nav, hero, sections, closer, footer)
     uses --pad, so their content edges line up exactly at any
     width. --pad is the larger of the screen-edge gutter and the
     centring inset, which caps content at --maxw on wide screens
     without max-width + margin:auto making bands disagree. */
  /* type stacks — swap here, not in 40 rules */
  --font-body:'Basis Grotesque','Inter',system-ui,sans-serif;
  --font-display:'Futura Display','Basis Grotesque',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* The hero ground. A variable so each palette can restyle the page
     behind the key art without touching any rule. */
  --sky:
     radial-gradient(1100px 620px at 50% 104%, rgba(255,122,26,.42), transparent 66%),
     radial-gradient(800px 420px at 20% 88%, rgba(196,54,0,.30), transparent 62%),
     linear-gradient(#0B0503 0%, #1A0A04 46%, #2E1006 78%, #431705 100%);

  --gutter:18px;
  --maxw:1320px;
  --pad:max(var(--gutter), calc((100% - var(--maxw)) / 2));
}
*{margin:0;padding:0;box-sizing:border-box}
/* The browser's own [hidden]{display:none} is an author-vs-UA
   cascade loser against any class that sets display (e.g.
   .counter{display:flex}), so hidden elements would still render.
   Restate it here, in the author sheet, where it wins. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--ink);color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
::selection{background:var(--orange);color:#0B0907}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.skip{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;color:#0B0907;padding:10px 14px;border-radius:8px}
a.skip:focus{left:8px}

/* ---------- NAV ---------- */
nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
    height:var(--nav-h);padding:0 var(--pad);background:rgba(11,9,7,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* The supplied PNG is the whole lockup (mark + wordmark), so the nav
   no longer sets type for it. Sized by height; width follows the
   823x116 aspect ratio. */
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:17px;width:auto;display:block}
.foot-logo{height:20px;width:auto;margin-bottom:12px;opacity:.85}
.nav-links{display:none}
.nav-cta{display:none}
.burger{width:42px;height:38px;display:grid;place-items:center;background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.burger span{display:block;width:17px;height:1.6px;background:#fff;border-radius:2px;position:relative}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:#fff;border-radius:2px;transition:transform .2s,top .2s}
.burger span:before{top:-5.5px}
.burger span:after{top:5.5px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span:before{top:0;transform:rotate(45deg)}
body.menu-open .burger span:after{top:0;transform:rotate(-45deg)}
/* The drawer stays in the layout and animates, rather than being
   display:none — you cannot transition display, which is why it used
   to snap. visibility is delayed on close so the panel is still
   painted while it slides away, then removed from the tab order. */
.drawer{position:fixed;top:var(--nav-h);left:0;right:0;z-index:49;background:rgba(11,9,7,.97);
        backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
        padding:8px var(--pad) 20px;display:flex;flex-direction:column;
        opacity:0;visibility:hidden;transform:translateY(-12px);
        transition:opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s .3s}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none;
        transition:opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s}

/* Items follow the panel in, one after another — it reads as the menu
   unfolding instead of a block appearing. */
.drawer a{padding:15px 2px;color:var(--mist);text-decoration:none;font-size:13px;letter-spacing:.18em;font-weight:600;
  border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease, color .2s}
body.menu-open .drawer a{opacity:1;transform:none}
body.menu-open .drawer a:nth-child(1){transition-delay:.06s}
body.menu-open .drawer a:nth-child(2){transition-delay:.10s}
body.menu-open .drawer a:nth-child(3){transition-delay:.14s}
body.menu-open .drawer a:nth-child(4){transition-delay:.18s}
body.menu-open .drawer a:nth-child(5){transition-delay:.22s}
.drawer a:active{color:#fff}
.drawer .btn{margin-top:16px;text-align:center}

/* Dim the page behind an open menu, so the drawer reads as a layer. */
body.menu-open:after{content:"";position:fixed;inset:var(--nav-h) 0 0;z-index:47;
  background:rgba(11,9,7,.6);animation:scrim .26s ease forwards}
@keyframes scrim{from{opacity:0}to{opacity:1}}

/* The burger's bars already rotate into an X; give them the same
   curve as the panel so the two movements feel like one gesture. */
.burger span,.burger span:before,.burger span:after{
  transition:transform .3s cubic-bezier(.22,.61,.36,1), top .3s cubic-bezier(.22,.61,.36,1), background .2s}

.btn{font-weight:700;font-size:13px;letter-spacing:.06em;color:#180B00;background:linear-gradient(135deg,var(--amber),var(--orange));
     border:none;border-radius:9px;padding:13px 20px;cursor:pointer;transition:transform .15s,box-shadow .2s;text-decoration:none;display:inline-block}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(244,121,32,.35)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}

/* ---------- HERO ---------- */
header{position:relative;overflow:hidden;
  min-height:100vh;min-height:100dvh;
  padding:calc(var(--nav-h) + 26px) var(--pad) 32px;
  display:flex;flex-direction:column;justify-content:flex-start}
.sky,.beams,.floor,.keyart{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Sunset gradient sampled from the key art, so the photo edge blends
   into the page instead of ending on a hard line. */
.sky{background:var(--sky)}

/* ---- KEY ART ----
   Sits at the bottom of the hero on mobile, and behind the copy on
   desktop. The :after overlay is what keeps text legible over the
   bright sunset — never rely on the photo being dark.

   Clean key art — no baked-in typography, so nothing competes with
   the hero copy. Subjects (X9, IRON, L03) sit in the centre band and
   the flanks are empty sunset, which is what makes it safe to crop
   hard on a phone: anchor centre-bottom and the cars stay in frame. */
.keyart{top:auto;height:46vh;max-height:360px;
  background-image:image-set(
    url('image/hero/bg-1000.webp') type('image/webp'),
    url('image/hero/bg-1000.jpg')  type('image/jpeg'));
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
  /* Dissolve the top edge into the page instead of ending on a line.
     Masking the image means there is no seam to colour-match: the
     photo literally fades to nothing. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%);
          mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%)}
.keyart:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(20,10,5,.5) 0%, rgba(20,10,5,.08) 32%,
                  rgba(20,10,5,.42) 74%, rgba(20,10,5,.86) 100%)}

.beams{opacity:.7;mix-blend-mode:screen;background:
  conic-gradient(from 178deg at 46% 100%,
    transparent 0deg, rgba(255,154,61,.16) 3deg, transparent 7deg,
    transparent 12deg, rgba(244,121,32,.22) 15deg, transparent 19deg,
    transparent 26deg, rgba(255,154,61,.14) 29deg, transparent 33deg,
    transparent 340deg, rgba(244,121,32,.2) 344deg, transparent 349deg,
    transparent 352deg, rgba(255,154,61,.15) 356deg, transparent 360deg)}
.floor{top:auto;height:30vh;opacity:.4;
  background:linear-gradient(transparent, rgba(244,121,32,.08)),
  repeating-linear-gradient(90deg, rgba(255,154,61,.14) 0 1px, transparent 1px 92px),
  repeating-linear-gradient(0deg, rgba(255,154,61,.11) 0 1px, transparent 1px 46px);
  transform:perspective(560px) rotateX(58deg);transform-origin:bottom}
.hero-copy{position:relative;z-index:2}
.eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;color:var(--amber);margin-bottom:16px}
/* Matches "DRIVING INTO A NEW DAY" in the key art. */
/* ---- HEADLINE ----
   Two voices: XPENG set in the Futura lockup face, and the campaign
   line as supplied artwork (see .h1-art). The script face is not
   licensed for web use, so it ships as a transparent PNG rather than
   a substitute typeface that would only look approximately right. */
h1{font-family:var(--font-display);font-weight:700;font-style:italic;
   font-size:clamp(34px,10vw,72px);line-height:.98;letter-spacing:-.005em}
.h1-brand{display:block}
/* The supplied lettering. Sized by width so its own proportions are
   never distorted; width/height attributes keep the box reserved so
   the hero does not shift as it decodes. */
.h1-art{display:block;width:min(92%,620px);height:auto;margin-top:.04em}

.sub{font-family:var(--font-body);font-weight:500;font-size:clamp(19px,5.4vw,32px);color:var(--orange);margin-top:8px}
.meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:20px;font-size:13.5px;color:var(--mist);letter-spacing:.03em}
.meta b{color:#fff;font-weight:600}
.meta .dot{width:4px;height:4px;border-radius:50%;background:var(--orange)}
.hero-line{width:52px;height:3px;background:var(--orange);margin:24px 0 18px}
.lede{font-size:15px;line-height:1.65;color:var(--mist);max-width:44ch}
/* Forum line + follow icons share one row, so the icons read as
   part of the same "watch us here" statement rather than a
   second, competing element. They wrap under it on a phone. */
.hero-tags{position:relative;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* The spacing rides on the icons, not the wrapper: with the row hidden
   (no social URLs yet) the wrapper is empty, and a margin there would
   leave a gap under the countdown with nothing in it. */
.hero-follow{display:flex;align-items:center;gap:6px;margin-top:22px}
/* Solid orange at rest, not on hover: these sit on busy key art,
   and an outline-only icon disappeared into the car behind it. */
.hero-follow a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  color:#180B00;border:1px solid var(--orange);background:var(--orange);
  transition:background .18s,border-color .18s}
.hero-follow a:hover{background:var(--amber);border-color:var(--amber)}
.hero-follow a:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.hero-follow svg{display:block;width:15px;height:15px}

/* hero artist strip (swaps at reveal) */
.hero-artist{position:relative;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.ha-lab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:var(--mist)}
.ha-sil{display:inline-flex;gap:4px;align-items:flex-end}
.ha-sil i{display:block;width:9px;height:13px;border-radius:3px 3px 0 0;background:linear-gradient(rgba(255,154,61,.85),rgba(244,121,32,.2))}
.ha-sil i:last-child{height:17px}
/* White, matching the XPENG wordmark, not the amber accent. */
.ha-txt{font-family:var(--font-body);font-weight:500;font-size:13.5px;letter-spacing:.04em;color:var(--paper)}

/* countdown */
.countdown{position:relative;z-index:2;display:flex;gap:8px;margin-top:26px}
.cd{flex:1;max-width:82px;border:1px solid var(--line);border-radius:12px;padding:11px 4px;text-align:center;
    background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.cd b{display:block;font-family:var(--font-body);font-weight:700;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.cd span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;color:var(--mist)}

/* ---------- WAITLIST CARD ---------- */
/* Frosted glass: a 14% white fill over a blur, so the panel lifts off
   the key art without hiding it. The blur matters — at 14% alone the
   sunset shows straight through and small type sits on moving colour. */
.card{position:relative;z-index:2;
      background:rgba(255,236,220,.11);
      backdrop-filter:blur(16px) saturate(1.1);
      -webkit-backdrop-filter:blur(16px) saturate(1.1);
      color:#ffffff;border-radius:18px;
      padding:24px 20px 22px;margin-top:34px;
      box-shadow:-12px 20px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14)}
.status{display:flex;align-items:center;justify-content:center;gap:10px;background:#F2EEE8;border:1px solid var(--card-line);
        border-radius:9px;padding:10px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;font-weight:500;text-align:center}
.status em{font-style:normal;color:var(--ember);font-weight:600}
.card h2{font-family:var(--font-body);font-size:23px;letter-spacing:-.01em;margin:16px 0 4px;color:#fff}
.card .hint{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:16px}
.counter{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.7);margin:-8px 0 16px}
.counter b{color:#fff;font-family:var(--font-body);font-size:15px}
.steps{display:flex;gap:6px;margin-bottom:16px}
.steps span{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.22)}
.steps span.on{background:var(--orange)}
.field{margin-bottom:10px}
.field input,.field select{width:100%;font-family:inherit;font-size:15px;color:#191510;background:var(--field);border:1px solid var(--card-line);
      border-radius:9px;padding:14px;outline:none;transition:border .15s,box-shadow .15s;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E6559' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.field input:focus,.field select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(244,121,32,.15)}
.field input::placeholder{color:#9A9084}
.field.bad input,.field.bad select{border-color:#D9541F;background:#FDF3EE}
.field .msg{font-size:11px;color:#FFB79B;margin:5px 2px 0;display:none}
.field.bad .msg{display:block}
.row2{display:grid;grid-template-columns:1fr;gap:0}
.q{margin-bottom:14px}
.q label{display:block;font-size:12.5px;font-weight:600;color:#fff;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:12.5px;font-weight:500;color:#4B4338;background:var(--field);border:1px solid var(--card-line);border-radius:999px;
      padding:9px 14px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.chip:hover{border-color:#C9C0B4}
/* Selected = brand orange with near-black type. The old near-black
   pill read as disabled next to the light unselected ones. Solid
   orange, not the CTA's gradient, so the button below still wins the
   hierarchy. */
.chip.sel{background:var(--orange);color:#180B00;border-color:var(--orange);font-weight:600;
  box-shadow:0 4px 14px rgba(244,121,32,.35)}
.chip.sel:hover{background:var(--amber);border-color:var(--amber)}
.q.bad label{color:#FFB79B}
/* "Please specify" box under an Other answer. */
.other-field{margin-top:8px;margin-bottom:0}
.other-field input{font-size:14px}
.consents{margin:16px 0 6px;display:flex;flex-direction:column;gap:10px}
.consents label{display:flex;gap:10px;font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.78);cursor:pointer}
.consents input{accent-color:var(--orange);margin-top:2px;flex:none;width:16px;height:16px}
.consents a{color:var(--amber)}
.cta{width:100%;margin-top:12px;padding:16px;font-size:14px;letter-spacing:.12em;border-radius:10px}
.fine{margin-top:12px;text-align:center;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:rgba(255,255,255,.82);line-height:1.6}
.back{background:none;border:none;font-size:12.5px;color:rgba(255,255,255,.68);cursor:pointer;margin-bottom:10px;font-family:inherit;padding:4px 0}
.back:hover{color:#fff}
.err{font-size:11.5px;color:#FFB79B;margin-top:10px;display:none}
.err.on{display:block}

/* ---- CONFIRMATION STATE ----
   Nothing left to fill in, so the paper card dissolves: transparent
   panel, white type, sitting straight on the hero art. */
.card.is-done{background:rgba(255,236,220,.09);color:#ffffff}
.card.is-done .status{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff;margin:0}
.card.is-done .status em{color:var(--amber)}
.card.is-done .done .num{color:var(--amber)}
.card.is-done .done .lab{color:rgba(255,255,255,.55)}
.card.is-done .done p{color:rgba(255,255,255,.74)}
.card.is-done .done p b{color:#fff}
.card.is-done .share{border-top-color:rgba(255,255,255,.14);padding-bottom:22px}
.card.is-done .share p{color:rgba(255,255,255,.5)}
.card.is-done .share-row a,
.card.is-done .share-row button{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.card.is-done .share-row a:hover,
.card.is-done .share-row button:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}

/* success */
.done{text-align:center;padding:22px 2px 10px}
.done .num{font-family:var(--font-body);font-weight:700;font-size:40px;color:var(--ember);font-variant-numeric:tabular-nums}
.done .lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:#8A8177;margin:4px 0 16px}
.done p{font-size:13.5px;line-height:1.65;color:#4B4338;max-width:36ch;margin:0 auto}
/* The rule sat edge to edge while its buttons were inside the card
   padding, so the two never lined up. Same inset for both now. */
.share{margin-top:22px;padding-top:18px;border-top:1px solid var(--card-line)}
.card.is-done .share{border-top-color:rgba(255,255,255,.14)}
.share p{font-size:11.5px;letter-spacing:.12em;font-family:var(--font-mono);color:#8A8177;margin-bottom:12px;text-align:center}
/* Centred, matching the sequence number and confirmation copy above
   it — the whole card reads on one axis. */
.share-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.share-row a,.share-row button{font-family:inherit;font-size:12px;font-weight:600;color:#3A342C;background:var(--field);
  border:1px solid var(--card-line);border-radius:8px;padding:10px 14px;text-decoration:none;cursor:pointer}
.share-row a:hover,.share-row button:hover{border-color:#C9C0B4}
/* Icon rows: square 44px targets (thumb-sized), glyph inherits colour. */
.share-row.icons a,.share-row.icons button{display:grid;place-items:center;
  width:44px;height:44px;padding:0;color:#3A342C}
.share-row.icons svg{display:block}
.share-row.icons a:hover,.share-row.icons button:hover{color:#191510;background:#EFEAE3}


.banner:before{top:0;background:linear-gradient(var(--ink),transparent)}
.banner:after{bottom:0;background:linear-gradient(transparent,var(--ink))}

/* ---------- SECTIONS ---------- */
section{padding:70px var(--pad)}
.sec-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;color:var(--orange);margin-bottom:14px}
.sec-title{font-family:var(--font-body);font-weight:700;font-size:clamp(27px,7vw,44px);line-height:1.1;letter-spacing:-.01em;max-width:18ch}
.sec-sub{margin-top:14px;font-size:15px;line-height:1.7;color:var(--mist);max-width:56ch}
.blocks{display:grid;grid-template-columns:1fr;gap:14px;margin-top:34px}
.block{border:1px solid var(--line);border-radius:16px;padding:24px;background:linear-gradient(160deg,rgba(255,178,120,.09),rgba(255,178,120,.02));display:flex;flex-direction:column}
.block .tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:var(--amber);margin-bottom:12px}
.block h3{font-family:var(--font-body);font-size:19px;margin-bottom:9px}
.block p{font-size:13.5px;line-height:1.65;color:var(--mist)}
.block.mystery{background:linear-gradient(160deg,rgba(244,121,32,.14),rgba(244,121,32,.03));border-color:rgba(244,121,32,.4)}
.block.wide{gap:20px;align-items:flex-start}
.block.wide .btn{flex:none;white-space:nowrap}
.sil{margin-top:auto;padding-top:18px;display:flex;gap:10px;align-items:flex-end;height:74px}
.sil i{display:block;width:32px;border-radius:8px 8px 0 0;background:linear-gradient(rgba(255,154,61,.7),rgba(244,121,32,.15))}
.sil i:nth-child(1){height:50px}
.sil i:nth-child(2){height:62px}
.sil span{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--amber);margin-left:6px;padding-bottom:6px}

.schedule-section{padding-top:0;padding-bottom:0}
.schedule-card{display:grid;gap:24px;padding:26px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.schedule-intro h2{font-size:28px;line-height:1.15;letter-spacing:-.025em}
.schedule-intro p{margin-top:10px;font-size:12px;color:var(--mist)}
.schedule-attire{margin-top:24px;border-left:2px solid var(--orange);padding-left:14px;display:flex;flex-direction:column;gap:5px}
.schedule-attire > span{font:10px var(--font-mono);letter-spacing:.15em;color:var(--amber)}
.schedule-attire strong{font-size:17px}
.schedule-attire small{font-size:12px;color:var(--mist)}
.schedule-list{list-style:none;margin:0;padding:0;min-width:0}
.schedule-list li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:18px;align-items:start}
.schedule-list time{padding-top:15px;font:12px/1.6 var(--font-mono);color:var(--amber);white-space:nowrap}
.schedule-list li > span{position:relative;padding:14px 0 14px 20px;border-left:1px solid var(--line);font-size:14px;line-height:1.6}
.schedule-list li > span:before{content:'';position:absolute;left:-3px;top:23px;width:5px;height:5px;border-radius:50%;background:var(--amber)}
.schedule-list small{display:block;font-size:12px;color:var(--mist)}
@media (min-width:1020px){
  .schedule-card{grid-template-columns:1fr 1.4fr;gap:48px;padding:30px 34px}
  .schedule-list li{grid-template-columns:90px minmax(0,1fr)}
}

.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:34px}
.pill{text-align:center;border:1px solid var(--line);border-radius:14px;padding:22px 12px;transition:border-color .2s,transform .2s}
.pill:hover{border-color:rgba(244,121,32,.5);transform:translateY(-3px)}
.pill .ic{width:42px;height:42px;margin:0 auto 12px;border:1.5px solid var(--orange);border-radius:12px;display:grid;place-items:center;
  color:var(--amber);font-family:var(--font-body);font-weight:700;font-size:14px}
.pill h4{font-size:11.5px;letter-spacing:.12em;margin-bottom:6px}
.pill p{font-size:11.5px;color:var(--mist)}

/* venue.
   The shots carry this section, so they get the width and the copy
   stays out of the way. aspect-ratio + width/height on the img means
   the box is reserved before decode — no reflow on a slow phone. */
.venue-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:34px}
.venue-shot{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--coal)}
.venue-shot picture{display:block}
.venue-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.venue-shot figcaption{padding:11px 14px 13px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;color:var(--mist);text-transform:uppercase}
.venue-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:14px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.venue-facts > div{background:var(--ink);padding:16px 16px 17px}
.venue-facts dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:var(--mist);
  text-transform:uppercase;margin-bottom:7px}
.venue-facts dd{font-family:var(--font-body);font-weight:600;font-size:14.5px;color:var(--paper)}
.venue-note{margin-top:14px;font-size:12px;line-height:1.6;color:var(--mist)}

/* Compact vehicle showcase and reservation details. */
.model-tabs{display:flex;gap:10px;margin-top:24px}
.model-tabs button{display:flex;flex-direction:column;gap:5px;align-items:flex-start;flex:1;max-width:230px;padding:13px 18px;min-height:64px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);color:var(--paper);font:700 14px var(--font-body);cursor:pointer}
.model-tabs button span{font-size:11px;font-weight:400;color:var(--mist)}
.model-tabs button[aria-selected="true"]{border-color:var(--orange);background:rgba(244,121,32,.13)}
.model-tabs button:hover{border-color:var(--amber)}
.model-tabs button:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.model-tabs:not([hidden]) + .x9-compact{margin-top:16px}
.model-tabs:not([hidden]) ~ #l03{margin-top:16px}
.x9-compact{display:grid;grid-template-columns:minmax(0,1fr);margin-top:28px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.025)}
.x9-shot{display:flex;flex-direction:column;justify-content:center;min-width:0;margin:0;background:radial-gradient(ellipse at 50% 30%,#786b5d 0%,#3a3530 55%,#211b17 100%)}
.x9-viewer{padding:24px 12px 18px;background:radial-gradient(ellipse at 50% 30%,#786b5d 0%,#3a3530 55%,#211b17 100%)}
/* The smaller source (X9) is 750 × 350. Keep the stage below that size
   instead of enlarging the vehicle to fill a wide desktop card. */
.x9-viewer canvas,.x9-viewer img{display:block;width:100%;max-width:640px;margin-inline:auto;height:auto}
.x9-viewer canvas{touch-action:pan-y;cursor:grab;outline-offset:-4px}
.x9-viewer canvas:active{cursor:grabbing}
.x9-viewer p{margin:8px auto 0;max-width:48ch;text-align:center;font-size:11px;line-height:1.6;color:rgba(255,255,255,.75)}
.x9-view-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 22px;background:#19110c;border-top:1px solid var(--line)}
.x9-view-controls button{min-height:44px;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:10px 15px;background:transparent;color:var(--paper);font:700 11px var(--font-body);letter-spacing:.06em;cursor:pointer}
.x9-view-controls button:hover{border-color:var(--amber);color:var(--amber)}
.x9-view-controls button:disabled{opacity:.65;cursor:wait}
.x9-view-controls button:focus-visible,.x9-viewer canvas:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.x9-view-controls > span{font-size:11px;color:var(--mist)}
.x9-rotate-buttons{display:flex;gap:8px;margin-left:auto}
.x9-rotate-buttons button{min-width:44px;font-size:18px}

.x9-compact .x9-viewer{background:none}
.x9-detail{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:26px 22px;border-top:1px solid var(--line)}
.x9-detail .tag{font-family:var(--font-mono);font-size:9.5px;line-height:1.6;letter-spacing:.16em;color:var(--mist)}
.x9-detail h3{font-size:22px;line-height:1.2}
.x9-description{font-size:13.5px;line-height:1.65;color:var(--mist);max-width:48ch}
.x9-price span{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:var(--mist)}
.x9-price b{display:block;font-weight:700;font-size:30px;color:var(--paper);margin:6px 0 4px}
.x9-price i{font-style:normal;font-size:12px;color:var(--mist)}
.x9-detail .btn{font-size:12px;padding:13px 20px;max-width:100%}
.x9-note{font-size:11.5px;line-height:1.6;color:var(--mist);max-width:46ch}
@media (min-width:1020px){
  .x9-compact{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .x9-detail{padding:30px 32px;border-top:0;border-left:1px solid var(--line)}
}

.partner-section{padding-top:0;padding-bottom:0}
.partner-banner{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(110deg,rgba(244,121,32,.09),rgba(255,255,255,.02))}
.partner-visual{position:relative;min-width:0;height:144px;overflow:hidden;background:var(--coal)}
.partner-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:42% 52%}
.partner-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(24,11,5,.8),rgba(125,65,24,.12) 65%);pointer-events:none}
.partner-image-label{position:absolute;bottom:16px;left:20px;right:16px;z-index:1;font-family:var(--font-mono);font-size:8px;line-height:1.6;letter-spacing:.15em;color:var(--paper)}
.partner-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;min-width:0;padding:24px 22px}
.partner-copy{min-width:0}
.partner-copy .sec-eyebrow{font-size:9px;margin-bottom:10px}
.partner-copy h2{font-size:24px;line-height:1.2;letter-spacing:-.025em;margin-bottom:10px}
.partner-copy p{max-width:65ch;font-size:13.5px;line-height:1.65;color:var(--mist)}
.partner-link{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;max-width:100%;padding:13px 18px;border:1px solid var(--orange);border-radius:7px;color:var(--paper);font-size:11px;font-weight:700;letter-spacing:.06em;text-decoration:none}
.partner-link:hover{background:rgba(244,121,32,.12);border-color:var(--amber)}
.partner-link:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.partner-link > span[aria-hidden]{font-size:19px;line-height:1}
@media (min-width:1020px){
  .partner-banner{grid-template-columns:minmax(0,3fr) minmax(0,7fr)}
  .partner-visual{height:auto;min-height:220px}
  .partner-content{flex-direction:row;align-items:center;gap:28px;padding:28px 32px}
  .partner-link{flex-shrink:0}
}

.lineup{margin-top:14px;display:grid;grid-template-columns:1fr;gap:22px;align-items:center;
  border:1px solid rgba(244,121,32,.45);border-radius:16px;padding:24px 20px;
  background:linear-gradient(120deg,rgba(244,121,32,.16),rgba(244,121,32,.03) 60%)}
.lineup .tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:var(--amber);margin-bottom:11px}
.lineup h3{font-family:var(--font-body);font-size:20px;margin-bottom:10px;line-height:1.2}
.lineup p{font-size:13.5px;line-height:1.65;color:var(--mist);max-width:52ch}
.lineup-sil{display:flex;gap:12px;align-items:flex-end}
.lineup-sil i{display:block;width:40px;border-radius:10px 10px 0 0;background:linear-gradient(rgba(255,154,61,.75),rgba(244,121,32,.12))}
.lineup-sil span{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--amber);margin-left:6px;padding-bottom:6px}
.acts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.act{border:1px solid rgba(255,154,61,.35);border-radius:12px;padding:14px;background:rgba(0,0,0,.2)}
.act b{display:block;font-family:var(--font-body);font-size:15px;margin-bottom:4px}
.act span{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--amber)}

/* how it works */
.flow{counter-reset:s;display:grid;grid-template-columns:1fr;margin-top:34px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.flow li{list-style:none;padding:20px 20px 20px 62px;position:relative;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)}
.flow li:last-child{border-bottom:none}
.flow li:before{counter-increment:s;content:counter(s);position:absolute;left:20px;top:20px;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;color:#180B00;background:linear-gradient(135deg,var(--amber),var(--orange))}
.flow b{display:block;font-family:var(--font-body);font-size:15.5px;margin-bottom:5px}
/* Step 1 is clickable: the whole card jumps to the form. */
.flow-cta{display:block;text-decoration:none;color:inherit;transition:color .2s}
.flow-cta:hover b{color:var(--amber)}
.flow li:has(.flow-cta){cursor:pointer;transition:background .2s}
.flow li:has(.flow-cta):hover{background:rgba(244,121,32,.07)}
.flow p{font-size:13px;line-height:1.6;color:var(--mist)}

.faq{margin-top:32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;cursor:pointer;list-style:none;display:block;
  padding:19px 40px 19px 2px;font-family:var(--font-body);font-size:15.5px;line-height:1.35;
  transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber)}
/* the +/– is two bars: the vertical one rotates away on open, so
   the marker tweens instead of swapping a character */
.faq summary:before,.faq summary:after{content:"";position:absolute;right:6px;top:50%;
  width:13px;height:1.8px;background:var(--orange);border-radius:2px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s}
.faq summary:before{transform:translateY(-50%)}
.faq summary:after{transform:translateY(-50%) rotate(90deg)}
.faq details[open] summary:after{transform:translateY(-50%) rotate(0deg)}
.faq details[open] summary{color:var(--amber)}
/* overflow hidden so the height animation clips cleanly */
.faq .a{overflow:hidden;padding:0 2px 20px;font-size:13.5px;line-height:1.7;color:var(--mist);max-width:70ch}
.faq .a a{color:var(--amber)}


/* The closer is the arena. The photo is the band's background, with a
   scrim over it heavy enough that the type keeps its contrast on the
   bright parts of the shot — the facade screen and the light trails. */
.closer{position:relative;text-align:center;padding:56px var(--pad) 60px;border-top:1px solid var(--line);isolation:isolate}
.closer-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;z-index:-2}
.closer:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,5,3,.94),rgba(20,10,5,.72) 42%,rgba(11,5,3,.95)),
             radial-gradient(120% 90% at 50% 50%,transparent 20%,rgba(11,5,3,.55) 100%)}
.closer-in{position:relative;z-index:1}
.closer-tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;color:var(--amber);margin-bottom:16px}
.closer h3{font-family:var(--font-display);font-style:italic;font-size:clamp(26px,7vw,44px);line-height:1.12;max-width:22ch;
  margin:0 auto 14px;text-shadow:0 2px 26px rgba(0,0,0,.6)}
.closer p{font-size:14px;color:rgba(255,255,255,.78);max-width:44ch;margin:0 auto 26px;line-height:1.65}
/* Venue, date and doors: the practical detail people look for last. */
.closer-meta{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.closer-meta i{width:3px;height:3px;border-radius:50%;background:var(--orange);flex:none}

footer{border-top:1px solid var(--line);padding:30px var(--pad) 34px;display:grid;gap:18px}
footer .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--mist);line-height:1.9}
footer .r{display:flex;gap:18px;flex-wrap:wrap;font-size:12px}
footer a{color:var(--mist);text-decoration:none}
footer a:hover{color:#fff}

/* sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,9,7,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(120%);transition:transform .25s}
.sticky-cta.on{transform:none}
.sticky-cta .btn{width:100%;text-align:center;padding:15px}

/* =============================================================
   SCROLL MOTION
   Everything here is scoped to html.motion, which app.js adds
   only when the visitor has not asked to reduce motion. Without
   that class the page renders fully visible and static — no
   chance of content stranded at opacity:0.
   ============================================================= */
html.motion [data-reveal]{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
html.motion [data-reveal="left"]{transform:translate3d(-22px,0,0)}
html.motion [data-reveal="scale"]{transform:scale(.965)}
html.motion [data-reveal].in{opacity:1;transform:none}
html.motion [data-reveal].in{will-change:auto}

/* hero copy enters on load, no observer needed */
html.motion .hero-copy > *{opacity:0;transform:translate3d(0,16px,0);animation:rise .8s cubic-bezier(.22,.61,.36,1) forwards}
html.motion .hero-copy > *:nth-child(1){animation-delay:.05s}
html.motion .hero-copy > *:nth-child(2){animation-delay:.14s}
html.motion .hero-copy > *:nth-child(3){animation-delay:.22s}
html.motion .hero-copy > *:nth-child(4){animation-delay:.30s}
html.motion .hero-copy > *:nth-child(5){animation-delay:.36s}
html.motion .hero-copy > *:nth-child(6){animation-delay:.42s}
html.motion .hero-copy > *:nth-child(7){animation-delay:.48s}
html.motion .hero-copy > *:nth-child(8){animation-delay:.54s}
html.motion .hero-copy > *:nth-child(9){animation-delay:.60s}
html.motion .card{opacity:0;animation:rise .9s cubic-bezier(.22,.61,.36,1) .3s forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* nav condenses once you leave the hero */
nav{transition:height .25s,background .25s}
body.scrolled nav{background:rgba(11,9,7,.95);box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media (min-width:1020px){body.scrolled nav{height:56px}}

/* parallax layers — translated by rAF, never on layout properties */
html.motion .beams,html.motion .floor{will-change:transform}

/* the orange rule under a section title draws itself in */
html.motion .sec-title{position:relative}
html.motion [data-reveal].in .cd b{animation:none}

/* countdown digits tick with a hairline pulse */
.cd b.flip{animation:flip .45s ease}
@keyframes flip{0%{transform:translateY(-4px);opacity:.35}100%{transform:none;opacity:1}}

/* chips and pills get a springier press on touch */
.chip:active{transform:scale(.96)}
.pill{will-change:transform}

/* ---------- DESKTOP ---------- */
@media (min-width:1020px){
  :root{--nav-h:66px}
  :root{--gutter:64px}
  .logo img{height:20px}
  .burger,.drawer{display:none!important}
  .nav-links{display:flex;gap:34px;font-size:12.5px;letter-spacing:.16em;font-weight:600}
  .nav-links a{color:var(--mist);text-decoration:none;transition:color .2s}
  .nav-links a:hover,.nav-links a:focus-visible{color:#fff}
  .nav-cta{display:inline-block}
  /* The hero is exactly one screen. It used to be 100vh PLUS a
     62vh padding-bottom for the art band, which pushed the artwork
     below the fold — you had to scroll to see the cars. Now the art
     band lives inside the viewport and the copy overlaps it, which
     is what the scrim gradients are for.
     dvh so mobile browser chrome doesn't cause a jump. */
  header{display:grid;grid-template-columns:minmax(0,1.12fr) 452px;gap:56px;align-items:center;
         min-height:100vh;min-height:100dvh;
         padding:calc(var(--nav-h) + 44px) var(--pad) 44px}
  .floor{height:34vh;opacity:.28}
  /* Full-bleed along the bottom of the hero, inside the viewport. */
  .keyart{height:56vh;max-height:none;
    background-image:image-set(
      url('image/hero/bg-2400.webp') type('image/webp'),
      url('image/hero/bg-2400.jpg')  type('image/jpeg'));
    background-position:center bottom;background-size:cover}
  .keyart:after{background:
    linear-gradient(to top, rgba(11,9,7,.35) 0%, rgba(11,9,7,0) 45%, rgba(11,9,7,.35) 88%, rgba(11,9,7,.6) 100%),
    /* darken behind the copy column only, so the cars stay clean */
    linear-gradient(to right, rgba(11,9,7,.72) 0%, rgba(11,9,7,.35) 38%, rgba(11,9,7,0) 62%)}
  /* A longer dissolve on desktop — there is more band to fade. */
  .keyart{-webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 26%, #000 62%);
                  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 26%, #000 62%)}
  .card{margin-top:0;padding:28px 28px 24px}
  .cd{max-width:none}
  .cd b{font-size:27px}
  .row2{grid-template-columns:1fr 1fr;gap:10px}
  section{padding:104px var(--pad)}
  .blocks{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
  .block{min-height:230px;padding:28px}
  .block.wide{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:40px}
  .block.wide p{max-width:74ch}
  .pillars{grid-template-columns:repeat(5,1fr);gap:14px;margin-top:50px}
  /* Lead shot roughly two-thirds, the aerial beside it. */
  .venue-grid{grid-template-columns:1.75fr 1fr;gap:18px;margin-top:50px}
  .venue-shot.lead img{aspect-ratio:1734/907}
  .venue-shot:not(.lead) img{height:100%;aspect-ratio:auto;min-height:320px}
  .venue-shot:not(.lead){display:flex;flex-direction:column}
  .venue-shot:not(.lead) picture{flex:1;display:flex}
  .venue-facts{grid-template-columns:repeat(4,1fr);margin-top:18px}
  .lineup{grid-template-columns:1fr auto;gap:32px;padding:32px 36px;margin-top:20px}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow li{border-right:1px solid var(--line)}
  .flow li:nth-child(2n){border-right:none}
  .closer{padding:78px var(--pad) 82px}
  .faq{margin-top:48px}
  .faq summary{font-size:16.5px;padding:22px 4px}
  footer{padding:36px var(--pad);grid-template-columns:1fr auto;align-items:center}
  .sticky-cta{display:none}
}
/* Wide or high-density displays: the 2400 file starts to soften, so
   step up to the full-width export. */
@media (min-width:1800px), (min-resolution:1.5dppx) and (min-width:1020px){
  .keyart{background-image:image-set(
    url('image/hero/bg-3840.webp') type('image/webp'),
    url('image/hero/bg-3840.jpg')  type('image/jpeg'))}
}


/* =============================================================
   AMBIENT BACKGROUND
   Large sections were flat expanses of one colour, worst on the
   light palettes. Three very soft colour fields drift behind the
   whole page, with a grain overlay so wide gradients do not band on
   cheap panels.

   Fixed, not per-section: one composited layer for the page instead
   of a decoration inside every band. It never repaints on scroll and
   costs nothing on mobile.
   ============================================================= */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient .blob{position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.55;will-change:transform}
.b1{width:60vw;height:60vw;max-width:820px;max-height:820px;top:-14vh;left:-10vw;
  background:var(--blob-1);animation:drift1 42s ease-in-out infinite alternate}
.b2{width:52vw;height:52vw;max-width:700px;max-height:700px;top:38vh;right:-14vw;
  background:var(--blob-2);animation:drift2 55s ease-in-out infinite alternate}
.b3{width:46vw;height:46vw;max-width:620px;max-height:620px;bottom:-12vh;left:26vw;
  background:var(--blob-3);animation:drift3 48s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-11vw,-9vh,0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(7vw,-6vh,0) scale(.92)}}

/* Grain. An SVG turbulence tile, inline so it costs no request, at a
   low enough opacity to read as paper rather than noise. */
.grain{position:absolute;inset:0;opacity:.16;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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:140px 140px}

/* Content sits above the ambient layer.
   Only the bands that are statically positioned are listed: nav, the
   drawer and the sticky CTA are already fixed with their own z-index,
   and naming them here overrode position:fixed — which dropped the nav
   into the flow and let the invisible drawer occupy 275px above the
   hero. */
header,section,.closer,footer{position:relative;z-index:1}

/* ---- colour fields ---- */
:root{
  --blob-1:radial-gradient(circle, rgba(255,122,26,.34), transparent 70%);
  --blob-2:radial-gradient(circle, rgba(196,54,0,.30), transparent 70%);
  --blob-3:radial-gradient(circle, rgba(255,180,90,.22), transparent 70%);
}

/* Drifting colour is exactly what motion sensitivity dislikes: the
   fields stay, they simply stop moving. */

/* =============================================================
   SECTION GEOMETRY
   The drifting fields give the page atmosphere; these give it
   structure — a big quiet disc behind a section, an outlined ring,
   a field of dots, a rule. Anchored to sections rather than fixed,
   so they travel with the content they belong to.

   All of it is ::before / ::after — no markup, nothing to keep in
   sync, and z-index:-1 keeps them inside each section's own
   stacking context, behind its content but above the page.
   ============================================================= */
:root{
  --deco-fill:rgba(255,138,50,.10);
  --deco-line:rgba(255,255,255,.14);
  --deco-dot:rgba(255,180,90,.36);
}

/* Clip sideways only. The discs that bleed off the left and right
   edges must not create horizontal page scroll, but the ones set to
   bleed DOWN (see #experience:after) were being sliced flat at the
   section seam. overflow-x:clip is the one value that allows
   overflow-y:visible alongside it — hidden would force both axes.
   The plain hidden above it is the fallback for anything that
   doesn't know clip; there, the disc simply stays cropped. */
section,.closer{overflow:hidden}
@supports (overflow:clip){
  section,.closer{overflow-x:clip;overflow-y:visible}
}

/* A large disc behind THE EVENT, bleeding off the right edge — the
   shape the reference leans on. */
#event:before{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-14vw;top:6%;width:min(58vw,680px);aspect-ratio:1;border-radius:50%;
  background:var(--deco-fill)}

/* An outlined ring against HOW IT WORKS, plus a short rule that
   echoes the hero's underline. */
#how:before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-70px;top:18%;width:190px;height:190px;border-radius:50%;
  border:1.5px solid var(--deco-line)}
#how:after{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:8%;bottom:14%;width:120px;height:1px;background:var(--deco-line)}

/* A dot field under THE EXPERIENCE — one gradient, not 40 elements. */
#experience:before{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:4%;top:10%;width:180px;height:130px;opacity:.85;
  background-image:radial-gradient(var(--deco-dot) 1.6px, transparent 1.7px);
  background-size:22px 22px}
#experience:after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-90px;bottom:-60px;width:min(40vw,420px);aspect-ratio:1;border-radius:50%;
  background:var(--deco-fill)}

/* FAQ keeps a single ring, low and left, so the column of questions
   still reads as the only thing on that screen. */
#faq:before{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-60px;bottom:12%;width:150px;height:150px;border-radius:50%;
  border:1.5px solid var(--deco-line)}

/* No disc on the closer any more: it now carries the arena photo, and
   a glow blob over a photograph reads as a smudge, not decoration. */

/* Phones: keep one disc per screen at most. Several shapes on a 390px
   viewport stop being decoration and start being clutter. */
@media (max-width:700px){
  #how:before,#how:after,#faq:before,#experience:before{display:none}
  #event:before{right:-30vw;width:70vw}
  #experience:after{left:-30vw;width:70vw}
}

@media (prefers-reduced-motion:reduce){
  .ambient .blob{animation:none}
}
/* Phones: fewer, cheaper fields — a 90px blur over most of the screen
   is the most expensive thing on the page. */
@media (max-width:700px){
  .ambient .blob{filter:blur(60px);opacity:.42;animation:none;will-change:auto}
  .b3{display:none}
  .grain{opacity:.12}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}