/* Dominia — the hero: a claim on Brigade Road, told in three beats on one pinned stage.

   The map is a scroll-scrubbed recording of a Mapbox GL scene (tools/shot/record-hero.mjs), not a
   live map: no third-party script ships on this page. Everything that moves by itself (your dot,
   the other runners, the tag, the claim card, the board) is live HTML projected onto the video
   from each frame's saved camera by js/hero-video.js.

   STORED MAPBOX RENDERS. The dusk pair in assets/video/hero-mapbox/ ships with the site, a decision
   taken on 2026-09-24 while Mapbox's answer on storing its imagery is pending (HERO-ROADMAP.md item
   0). If they refuse, delete those files: js/hero-video.js falls back to the headline and CTA.

   Every rule is scoped under .hv and every id carries an hv- prefix, so nothing here reaches the
   rest of the page and nothing on it reaches in. Ported from assets/art/hero-3d-video-lab.html. */

.hv{background:#0E1014;color:#F2EEE6;font-family:'Instrument Sans',sans-serif;
  /* Under the nav, as the old hero was: .nav is sticky, so it keeps its 53px in flow and the stage
     would otherwise start below it and run 53px off the bottom of the screen. */
  --nav-h:53px;margin-top:calc(-1 * var(--nav-h))}
/* The readout and the card sit below the bar instead of under it. */
.hv #hv-ist{color:#8B8F98}
.hv{position:relative;height:1200vh}
.hv-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.hv #hv-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:#8B8F98;pointer-events:none}
.hv #hv-cue i{width:1px;height:26px;background:linear-gradient(#8B8F98,transparent)}
@media (prefers-reduced-motion:reduce){
.hv #hv-cue i,.hv .me i{animation:none}
}
.hv .m{font-family:'Geist Mono',monospace;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.hv .pn{position:absolute;background:rgba(20,23,29,.42);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);border:1px solid rgba(242,238,230,.09);border-radius:6px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.hv .pn{background:rgba(14,16,20,.9)}
}
.hv .row{display:flex;justify-content:space-between;font-size:11px;color:#8B8F98;line-height:1.6}
.hv .row b{font-family:'Geist Mono',monospace;font-weight:400;color:#F2EEE6}
.hv .wk{font-size:11px;line-height:1.3;margin:0 0 6px}
.hv .wk i{display:block;height:2px;background:#252932;margin-top:3px}
.hv .wk i u{display:block;height:2px}
.hv #hv-lb{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hv .pd{position:absolute;width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(14,16,20,.35)}
.hv .me{position:absolute;width:0;height:0}
.hv .me b{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#D64525;border:2px solid #fff;box-sizing:border-box;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.hv .me i{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;background:rgba(214,69,37,.22);border:1px solid rgba(214,69,37,.5);animation:hv-pu 2s ease-out infinite}
.hv .me s{position:absolute;left:-20px;top:-34px;width:40px;height:34px;background:linear-gradient(to top,rgba(214,69,37,.55),rgba(214,69,37,0));clip-path:polygon(50% 100%,0 0,100% 0);transform-origin:50% 100%}
@keyframes hv-pu{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.3);opacity:0}}
.hv .lm{position:absolute;transform:translate(-50%,-50%);font-size:11px;color:rgba(242,238,230,.72);text-shadow:0 0 3px #0E1014,0 0 6px #0E1014;white-space:nowrap}
.hv .tst{position:absolute;font-size:11px;white-space:nowrap;padding:3px 7px;background:rgba(14,16,20,.9);border-left:2px solid;transform:translate(-50%,-150%);transition:opacity .6s}
.hv #hv-dim{position:absolute;inset:0;pointer-events:none;background:#0E1014;opacity:.5;z-index:1}
.hv #hv-open{position:absolute;left:50%;top:50%;width:min(900px,calc(100% - 32px));text-align:center;z-index:3;transform:translate(-50%,-50%);transform-origin:50% 50%;will-change:transform,opacity}
.hv #hv-open h1{margin:0 0 22px;font-size:clamp(44px,6.6vw,104px);line-height:.98;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
.hv #hv-open p{margin:0 auto 28px;max-width:540px;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:#E8E3D8}
/* The primary action, per Brand Guidelines v3: Claim 600 with Bone Geist Mono uppercase (4.82:1,
   where the old dark-on-Claim was the weaker pairing), square, with the G3 halo. Both hero buttons
   are the same action and only one is on screen at a time. */
.hv .cta{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;background:#C3310D;color:#F2EEE6;font-family:'Geist Mono',monospace;font-weight:500;font-size:14px;letter-spacing:.16em;text-transform:uppercase;border-radius:0;text-decoration:none;box-shadow:0 0 22px rgba(255,90,54,.45)}
.hv #hv-open .cta{min-height:56px;padding:0 32px;font-size:15px}
.hv #hv-hero{position:absolute;left:4.68vw;bottom:11vh;width:360px;z-index:3;opacity:0}
.hv #hv-hero .hl{margin:0 0 10px;font-size:40px;line-height:1.02;font-weight:500;letter-spacing:-.02em}
.hv #hv-hero .ds{margin:0 0 16px;font-size:14px;line-height:1.5;color:#8B8F98}
.hv #hv-close{margin:0;font-size:24px;line-height:1.1;font-weight:500;letter-spacing:-.01em;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s ease,opacity .6s ease,margin .6s ease}
.hv #hv-close i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#D64525;margin-right:10px;vertical-align:middle;box-shadow:0 0 0 4px rgba(214,69,37,.2)}
.hv #hv-hero.end #hv-close{max-height:60px;opacity:1;margin:0 0 14px}
.hv #hv-hero.end .ds{color:#E8E3D8}
@media (max-width:759px){
.hv #hv-open h1{font-size:44px}
.hv #hv-open .cta{min-height:52px;padding:0 24px;font-size:14px}
.hv #hv-hero{left:16px;right:16px;width:auto;bottom:5vh}
.hv #hv-hero .hl{font-size:30px}
}
/* No "Walking now" panel and no team-balance strip, at any width. Both are leftovers from an
   earlier hero — live lists of who is walking where with a capture log (#hv-det), and a Park
   Runners / Iron Striders tally (#hv-bal) — and say nothing the claim does not. On a phone the
   panel also sat on top of the headline and the lede once the claim played. Hidden rather than
   deleted: js/hero-video.js writes their lists, counts and bar widths every frame and expects the
   elements to be there. */
.hv #hv-det,.hv #hv-bal{display:none}
/* The glow once. js/hero-video.js adds .glow when the claim has landed and the rule has come up
   above the button — and nothing ever defined it, so the moment never played (the same silent
   failure as hero-blink in css/motion.css). One pulse of the G3 halo out and back, then rest. */
@keyframes cta-glow{0%{box-shadow:0 0 22px rgba(255,90,54,.45)}35%{box-shadow:0 0 44px 6px rgba(255,90,54,.8)}100%{box-shadow:0 0 22px rgba(255,90,54,.45)}}
.hv #hv-hero .cta.glow{animation:cta-glow 1.4s cubic-bezier(.2,0,0,1) 1}
@media (prefers-reduced-motion:reduce){
.hv #hv-hero .cta.glow{animation:none}
.hv #hv-close{transition:none}
}
.hv #hv-card{position:absolute;top:calc(var(--nav-h) + 20px);right:18px;width:400px;padding:22px 22px 18px;box-sizing:border-box;opacity:0;transform:translateY(10px) scale(.97);transform-origin:20% 100%;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:2}
.hv #hv-card.on{opacity:1;transform:none}
.hv #hv-card .st{display:flex;align-items:center;gap:7px;color:#8B8F98}
.hv #hv-card h3{margin:14px 0 4px;font-family:'Archivo',sans-serif;font-size:32px;font-weight:900;letter-spacing:-.01em;line-height:1;text-transform:uppercase}
.hv #hv-card .sub{font-size:13px;color:#8B8F98}
.hv #hv-card .tk{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:16px 0 14px}
.hv #hv-card .tk span{display:flex;align-items:center;gap:7px;font-size:13px;padding:8px 10px;border-radius:4px;background:rgba(242,238,230,.05);border:1px solid rgba(242,238,230,.07)}
.hv #hv-card .tk span.win{background:rgba(63,143,78,.18);border-color:rgba(95,191,112,.35)}
.hv #hv-card .tk i{display:inline-block;width:8px;height:8px;flex:none}
.hv #hv-card .tile{padding:12px 12px 11px;border-radius:4px;background:rgba(242,238,230,.05);border:1px solid rgba(242,238,230,.07)}
.hv #hv-card .big{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hv #hv-card .big .tile:first-child{background:rgba(214,69,37,.16);border-color:rgba(255,106,69,.35)}
.hv #hv-card .l{margin-bottom:6px;color:#8B8F98}
.hv #hv-card .n{font-family:'Geist Mono',monospace;font-size:32px;line-height:1;font-variant-numeric:tabular-nums;color:#F2EEE6}
.hv #hv-card .big .tile:first-child .n{text-shadow:0 0 12px rgba(242,238,230,.5)}
.hv #hv-card .n small{font-size:13px;color:#8B8F98;margin-left:4px}
.hv #hv-card .sm{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.hv #hv-card .sm .n{font-size:19px}
.hv #hv-card .al{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:#E8E3D8}
.hv #hv-card .al b{font-weight:500;color:#F2EEE6}
.hv #hv-card .al .bar{flex:1;display:flex;height:4px;border-radius:2px;overflow:hidden;background:rgba(242,238,230,.08)}
.hv #hv-card .ft{margin-top:12px;color:#8B8F98}
@media (max-width:759px){
.hv #hv-card{left:16px;right:16px;width:auto;top:calc(var(--nav-h) + 8px);padding:14px}
.hv #hv-card .sm,.hv #hv-card .al,.hv #hv-card .tk{display:none}
.hv #hv-card h3{font-size:24px;margin-top:8px}
.hv #hv-card .n{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
.hv #hv-card{transition:none}
}
/* The odometer reel. Not scoped to .hv: the founders dossier's waitlist count rolls on the same
   device (js/motion.js), so the page has one way of showing a number arriving. */
.odo{display:inline-flex;vertical-align:baseline}
.odo .rl{display:inline-flex}
.odo .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.odo .dg{display:inline-block;height:1em;line-height:1em;overflow:hidden;vertical-align:top}
.odo .reel{display:flex;flex-direction:column;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.odo .reel span,.odo .ch{display:block;height:1em;line-height:1em}
.odo .ch{display:inline-block}
.hv #hv-card>*{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.hv #hv-card.on>*{opacity:1;transform:none}
.hv #hv-card.on>:nth-child(2){transition-delay:.06s}
.hv #hv-card.on>:nth-child(3){transition-delay:.12s}
.hv #hv-card.on>:nth-child(4){transition-delay:.18s}
.hv #hv-card.on>:nth-child(5){transition-delay:.24s}
.hv #hv-card.on>:nth-child(6){transition-delay:.3s}
.hv #hv-card.on>:nth-child(7){transition-delay:.36s}
.hv #hv-card.on>:nth-child(8){transition-delay:.42s}
.hv #hv-card .al .bar u{transition:width .8s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
.odo .reel,.hv #hv-card>*{transition:none!important}
}