@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(../fonts/plexmono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(../fonts/plexmono-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-var.woff2) format("woff2"); }
:root { --bg:#a0a5b1; --fg:#ffffff; --ink:#1d2129; --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace; --sans:"Inter", "Helvetica Neue", Arial, sans-serif; --pad:clamp(18px,3.4vw,52px); }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--fg); font-family:var(--sans); -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
#gl { position:fixed; inset:0; width:100vw; height:100vh; display:block; touch-action:none; outline:none; }
a { color:inherit; text-decoration:none; }

/* tiny white HUD boxes with dark mono text (igloo-style labels) */
.box { display:inline-block; font:500 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; background:rgba(255,255,255,.94); color:var(--ink); padding:5px 7px 4px; white-space:nowrap; }
.box.dim { background:rgba(255,255,255,.72); }
.box.inv { background:transparent; color:#fff; outline:1px solid rgba(255,255,255,.85); outline-offset:-1px; }
.logo { display:block; width:clamp(118px,11vw,170px); height:auto; color:#fff; filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 0 1px rgba(255,255,255,.9)); }

/* top HUD */
.hud-top { position:fixed; z-index:6; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; padding:var(--pad); pointer-events:none; }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:auto; }
.brand .logo { margin-bottom:8px; }
.index { display:flex; flex-direction:column; align-items:flex-end; gap:6px; pointer-events:auto; }
.idx-row { display:flex; gap:6px; }
.index b { font-weight:500; }
.box.link { transition:background .3s, color .3s; } .box.link:hover { background:var(--ink); color:#fff; }

/* scene ticks */
.ticks { position:fixed; z-index:6; right:var(--pad); top:50%; transform:translateY(-50%); list-style:none; display:flex; flex-direction:column; gap:16px; }
.ticks li { display:flex; align-items:center; gap:10px; justify-content:flex-end; cursor:pointer; font:500 9px var(--mono); letter-spacing:.2em; color:rgba(255,255,255,.55); }
.ticks li i { width:14px; height:1px; background:currentColor; transition:width .5s cubic-bezier(.2,.8,.2,1); }
.ticks li.on { color:#fff; } .ticks li.on i { width:34px; }

/* caption */
.caption { position:fixed; z-index:6; left:var(--pad); bottom:calc(var(--pad) + 58px); max-width:min(440px, 80vw); pointer-events:none; transition:opacity .7s, transform .9s cubic-bezier(.2,.8,.2,1), filter .7s; }
.caption.hide { opacity:0; transform:translateY(18px); filter:blur(8px); }
.caption h1 { margin:14px 0 10px; font-weight:300; font-size:clamp(28px,3.6vw,54px); line-height:1.02; letter-spacing:-.02em; text-shadow:0 1px 30px rgba(60,66,80,.25); }
.caption p { font-size:13px; line-height:1.6; max-width:360px; color:rgba(255,255,255,.88); }
.kicker { font-size:9.5px; }

/* bottom HUD */
.hud-bottom { position:fixed; z-index:6; left:0; right:0; bottom:0; padding:var(--pad); pointer-events:none; }
.status { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.copy { font:400 9px var(--mono); letter-spacing:.18em; color:rgba(255,255,255,.7); margin-left:8px; }
.arrow { font-style:normal; display:inline-block; animation:bob 1.6s infinite; }
@keyframes bob { 50% { transform:translateY(2px); } }
.drag-hint { display:none; animation:breathe 2.4s infinite; }
body.can-drag .drag-hint { display:inline-block; }
@keyframes breathe { 50% { letter-spacing:.4em; } }
body.can-drag #gl { cursor:grab; } body.can-drag #gl:active { cursor:grabbing; }
body.hover-hit #gl { cursor:pointer; }

/* enter store */
.enter { position:fixed; z-index:7; right:var(--pad); bottom:var(--pad); display:flex; align-items:center; gap:12px; padding:13px 14px 12px 16px; background:rgba(255,255,255,.95); color:var(--ink);
  font:500 11px var(--mono); letter-spacing:.3em; transition:background .35s, color .35s, transform .5s cubic-bezier(.2,.8,.2,1), padding .4s, box-shadow .4s; box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 0 24px rgba(255,255,255,.25); }
.enter:hover { background:var(--ink); color:#fff; }
.enter .key { border:1px solid currentColor; padding:2px 5px 1px; letter-spacing:0; opacity:.7; }
.enter .pulse { width:7px; height:7px; background:currentColor; animation:ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(29,33,41,.5); } 100% { box-shadow:0 0 0 10px rgba(29,33,41,0); } }
.enter.hero { right:50%; bottom:calc(var(--pad) + 10px); transform:translateX(50%) scale(1.15); box-shadow:0 0 0 1px #fff, 0 0 60px rgba(255,255,255,.7); }

/* callouts */
.callouts, .leaders { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .6s; }
.callouts.on, .leaders.on { opacity:1; }
.leaders { width:100vw; height:100vh; }
.leaders polyline { fill:none; stroke:rgba(255,255,255,.85); stroke-width:1; }
.leaders circle { fill:#fff; }
.callout { position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:2px; will-change:transform; }
.callout b, .callout span { font:500 9.5px/1 var(--mono); letter-spacing:.14em; background:rgba(255,255,255,.95); color:var(--ink); padding:4px 6px 3px; white-space:nowrap; }
.callout span { background:rgba(255,255,255,.7); font-weight:400; }

/* ghost text drifting in the fog */
.ghost { position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; opacity:0; transition:opacity 1.2s; mix-blend-mode:screen; }
.ghost.on { opacity:1; }
.ghost div { position:absolute; font:400 clamp(30px,5vw,74px)/1 var(--mono); letter-spacing:.12em; color:rgba(255,255,255,.11); filter:blur(3.5px); white-space:nowrap; animation:drift 26s linear infinite alternate; }
.ghost div:nth-child(1) { left:-2vw; top:34vh; }
.ghost div:nth-child(2) { right:-4vw; top:22vh; filter:blur(4px); animation-duration:32s; }
.ghost div:nth-child(3) { left:4vw; bottom:12vh; filter:blur(5px); animation-duration:22s; }
.ghost div:nth-child(4) { right:6vw; bottom:4vh; filter:blur(2.5px); }
@keyframes drift { to { transform:translateX(6vw); } }

/* HUD reveal after intro */
.hud-top, .hud-bottom, .ticks, .enter { opacity:0; transition:opacity 1s .2s; }
body.hud .hud-top, body.hud .hud-bottom, body.hud .ticks, body.hud .enter { opacity:1; }
body.entering .hud-top, body.entering .hud-bottom, body.entering .ticks, body.entering .enter, body.entering .ghost { opacity:0 !important; transition:opacity .4s; }

/* loader */
#loader { position:fixed; inset:0; z-index:30; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transition:opacity 1.1s ease .1s, visibility 0s 1.3s; }
body.ready #loader { opacity:0; visibility:hidden; }
.ld-logo .logo { width:min(220px, 50vw); animation:flicker 2.4s infinite; }
@keyframes flicker { 0%,100% { opacity:1; } 47% { opacity:1; } 48% { opacity:.4; } 50% { opacity:1; } 72% { opacity:.75; } }
.ld-row { display:flex; gap:8px; align-items:center; }
.ld-pct { font:500 11px var(--mono); letter-spacing:.2em; }
.ld-bar { width:min(220px,50vw); height:1px; background:rgba(255,255,255,.3); }
.ld-bar i { display:block; height:100%; background:#fff; transform-origin:left; transform:scaleX(0); box-shadow:0 0 8px #fff; }
.ld-status { font:400 9px var(--mono); letter-spacing:.24em; color:rgba(255,255,255,.75); min-height:1em; }

@media (max-width:760px) {
  .index .link { display:none; }
  .ticks { display:none; }
  .caption { bottom:calc(var(--pad) + 104px); }
  .caption p { font-size:12px; }
  .copy { display:none; }
  .enter { left:var(--pad); right:var(--pad); justify-content:center; bottom:calc(var(--pad) + 30px); }
  .enter.hero { right:var(--pad); transform:none; bottom:calc(var(--pad) + 30px); }
  .box.dim { display:none; }
}

/* ── igloo-parity HUD overrides: no big headline; copy lives in a right-hand stack of white mono boxes ── */
.ticks { display:none; }
.caption { left:auto; right:var(--pad); bottom:auto; top:calc(var(--pad) + 62px); max-width:300px; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.caption.hide { transform:translateY(-8px); }
.caption h1, .caption p { margin:0; font:500 9.5px/1.95 var(--mono); letter-spacing:.14em; text-transform:uppercase; text-shadow:none; color:var(--ink); max-width:300px; }
.caption h1 span, .caption p span { background:rgba(255,255,255,.94); padding:3px 7px 2px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.caption p span { background:rgba(255,255,255,.78); font-weight:400; }
.copy { display:none; }
.status .box.scroll { padding-left:5px; }
.enter { font-size:10px; }
@media (max-width:760px) { .caption { top:auto; bottom:calc(var(--pad) + 84px); right:var(--pad); left:var(--pad); align-items:flex-start; text-align:left; } }

/* ── v5: skip link, hover tag, streaming, poster fallback ── */
.skip { position:fixed; z-index:31; left:50%; bottom:var(--pad); transform:translateX(-50%); font:500 10px var(--mono); letter-spacing:.2em; color:var(--ink); background:rgba(255,255,255,.92); padding:9px 12px 8px; text-decoration:none; transition:opacity .6s, background .3s, color .3s; }
.skip:hover, .skip:focus-visible { background:var(--ink); color:#fff; }
body.hud .skip { opacity:0; pointer-events:none; }
body.entering .skip { opacity:0; }
.hover-tag { position:fixed; left:0; top:0; z-index:9; pointer-events:none; font:500 10px var(--mono); letter-spacing:.18em; background:#fff; color:var(--ink); padding:7px 9px 6px; opacity:0; transition:opacity .25s; white-space:nowrap; will-change:transform; }
.hover-tag.on { opacity:1; }
.hover-tag .s { display:none; }
.hover-tag[data-mode="store"] .v { display:none; } .hover-tag[data-mode="store"] .s { display:inline; }
.stream { position:fixed; z-index:9; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .3s; pointer-events:none; }
body.streaming .stream { opacity:1; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.4; } }
.poster { display:none; position:fixed; inset:0; z-index:40; background:var(--bg); }
.poster img { width:100%; height:100%; object-fit:cover; display:block; }
.poster-ui { position:absolute; left:var(--pad); bottom:var(--pad); display:flex; gap:6px; flex-wrap:wrap; }
.poster-ui a { text-decoration:none; color:inherit; }
body.no-gl .poster { display:block; } body.no-gl #loader, body.no-gl #gl { display:none; }
@media (hover:none) { .hover-tag { display:none; } }
@media (prefers-reduced-motion: reduce) { .enter .pulse, .scroll .arrow { animation:none !important; } }