/* Scroll-journey deck base styles. Brand lives in the :root tokens; swap them per deck (and add @font-face for the brand fonts in index.html).
   Mobile rule: no will-change and no translate3d anywhere on stations, layers or the hero (iPhone tabs crash). */
:root {
  --night:#0D0B12; --panel:#16131D; --panel-2:#1E1A27; --line:#2B2636; --ink:#F5F3F8; --mist:#A49FB0;
  --accent:#8B5CF6; --accent-hi:#A78BFA; --accent-soft:#C4B5FD; --accent-rgb:139,92,246;
  --disp:"Archivo Black", "Arial Black", sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace; --ui:"Montserrat", system-ui, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { background:var(--night); }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
body { font-family:var(--ui); color:var(--ink); background:var(--night); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
#track { width:1px; }
#viewport { position:fixed; inset:0; overflow:hidden; background:radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--night) 82%, var(--accent) 18%) 0%, var(--night) 65%); }
#stage { position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform-origin:0 0; }
#starfield { position:absolute; inset:-200px; background-image:radial-gradient(rgba(var(--accent-rgb),.55) 1px, transparent 1.4px), radial-gradient(rgba(164,159,176,.35) 1px, transparent 1.3px); background-size:140px 140px, 90px 90px; background-position:0 0, 45px 60px; opacity:.35; }
.station { position:absolute; inset:0; display:none; transform-origin:50% 50%; }
.layer { position:absolute; inset:-40px; }
.grid-dots { position:absolute; inset:0; background-image:radial-gradient(rgba(164,159,176,.16) 1px, transparent 1.2px); background-size:48px 48px; mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%); -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%); }
.glow { position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb),.34) 0%, rgba(var(--accent-rgb),.10) 40%, transparent 70%); }
.ghost { position:absolute; font-family:var(--disp); color:var(--ink); opacity:.045; font-size:360px; letter-spacing:-.04em; white-space:nowrap; line-height:.9; }
/* type */
.kicker { font-family:var(--mono); font-weight:700; font-size:22px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-soft); }
.h { font-family:var(--disp); letter-spacing:-.035em; line-height:.98; color:var(--ink); }
.h .v { color:var(--accent); } .h .m { color:var(--mist); }
.h2 { font-size:96px; } .h3 { font-size:72px; } .h4 { font-size:52px; }
.lead { font-family:var(--ui); font-size:34px; line-height:1.35; color:var(--mist); max-width:880px; }
.mono { font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; }
/* components: buttons are pills, icon buttons circles (house rule) */
.pill { display:inline-flex; align-items:center; gap:12px; border-radius:999px; padding:12px 24px; background:var(--panel-2); border:1px solid var(--line); font-family:var(--mono); font-size:19px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.pill.v { background:rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),.55); color:var(--accent-soft); }
.pill .dot { width:9px; height:9px; border-radius:50%; background:var(--accent-hi); box-shadow:0 0 12px var(--accent); }
.btn { display:inline-flex; align-items:center; gap:18px; border-radius:999px; padding:28px 34px 28px 60px; background:var(--accent); color:var(--ink); font-family:var(--disp); font-size:44px; letter-spacing:-.01em; box-shadow:0 0 60px rgba(var(--accent-rgb),.45), inset 0 1px 0 rgba(255,255,255,.25); text-decoration:none; cursor:pointer; transition:transform .25s ease, box-shadow .25s ease; }
.btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 0 90px rgba(var(--accent-rgb),.65); }
.btn i { width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; }
.btn i svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2.4; }
.card { position:absolute; background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:0 40px 80px rgba(0,0,0,.5); }
.col-label { font-family:var(--mono); font-size:16px; letter-spacing:.16em; color:var(--mist); text-transform:uppercase; margin-bottom:14px; }
.win { position:absolute; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 40px 80px rgba(0,0,0,.55); overflow:hidden; }
.win .bar { height:42px; display:flex; align-items:center; gap:8px; padding:0 16px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:15px; letter-spacing:.14em; color:var(--mist); text-transform:uppercase; }
.win .bar i { width:10px; height:10px; border-radius:50%; background:var(--line); display:inline-block; }
.win .body { padding:18px; font-size:19px; color:var(--mist); }
.tile { position:absolute; width:340px; height:340px; border-radius:36px; background:var(--panel); border:1px solid var(--line); box-shadow:0 40px 80px rgba(0,0,0,.55); padding:38px; display:flex; flex-direction:column; justify-content:space-between; }
.tile svg { width:74px; height:74px; stroke:var(--accent-hi); fill:none; stroke-width:1.6; }
.tile .h { font-size:40px; }
.asset { position:absolute; border-radius:18px; border:1px solid rgba(255,255,255,.08); box-shadow:0 36px 70px rgba(0,0,0,.6); overflow:hidden; background:#111; }
.asset img { display:block; width:100%; height:100%; object-fit:cover; }
.phone { position:absolute; border-radius:54px; background:#050407; padding:12px; box-shadow:0 50px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07); }
.phone .scr { position:relative; width:100%; height:100%; border-radius:44px; overflow:hidden; background:#000; }
.phone video { width:100%; height:100%; object-fit:cover; display:block; }
.snd { position:absolute; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(13,11,18,.7); display:grid; place-items:center; cursor:pointer; }
.snd svg, #soundBtn svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2; }
.snd .off, #soundBtn .off { display:none; } .snd.muted .on, #soundBtn.muted .on { display:none; } .snd.muted .off, #soundBtn.muted .off { display:block; }
.bar-track { height:8px; border-radius:99px; background:var(--panel-2); overflow:hidden; flex:1; }
.bar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent), var(--accent-hi)); transform-origin:0 50%; }
.check { display:flex; gap:22px; align-items:flex-start; font-size:32px; line-height:1.3; color:var(--ink); font-family:var(--ui); font-weight:600; }
.check i { flex:none; width:44px; height:44px; border-radius:50%; background:rgba(var(--accent-rgb),.18); border:1.5px solid var(--accent); display:grid; place-items:center; margin-top:2px; }
.check i::after { content:""; width:14px; height:8px; border-left:3px solid var(--accent-soft); border-bottom:3px solid var(--accent-soft); transform:rotate(-45deg) translate(1px,-2px); }
.check small { display:block; font-weight:400; font-size:24px; color:var(--mist); margin-top:6px; }
.lockup { display:flex; align-items:center; gap:22px; text-decoration:none; }
.lockup img { width:64px; height:64px; border-radius:50%; }
.lockup span { font-family:var(--mono); font-weight:700; font-size:38px; letter-spacing:.32em; color:var(--ink); }
/* hero object: 600x600 box positioned by the engine */
#hero { position:absolute; left:0; top:0; width:600px; height:600px; z-index:6; transform-origin:50% 50%; }
#hero canvas { width:100%; height:100%; display:block; cursor:grab; }
#hero .halo { position:absolute; inset:-18%; border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb),.32) 0%, rgba(var(--accent-rgb),.08) 45%, transparent 68%); pointer-events:none; }
#hero .fallback-media { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none; }
#hero.fallback .fallback-media { display:block; } #hero.fallback canvas { display:none; }
/* gate */
#gate { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:rgba(13,11,18,.72); backdrop-filter:blur(10px); transition:opacity .6s ease, visibility .6s; }
#gate.gone { opacity:0; visibility:hidden; }
#gate .inner { text-align:center; padding:24px; }
#gate .lockup { justify-content:center; } #gate .lockup img { width:52px; height:52px; } #gate .lockup span { font-size:30px; }
#gate p { color:var(--mist); font-size:18px; margin:22px auto 30px; max-width:420px; line-height:1.5; }
#gate .rotate { display:none; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-soft); margin:-14px 0 22px; }
@media (orientation: portrait) and (max-width: 760px) { #gate .rotate { display:block; } }
#gate .row2 { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
#gate button { border-radius:999px; padding:16px 30px; font-family:var(--mono); font-size:15px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink); }
#gate button.primary { background:var(--accent); border-color:var(--accent); box-shadow:0 0 40px rgba(var(--accent-rgb),.45); }
/* chrome */
#chrome { position:fixed; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; padding:18px 26px calc(18px + env(safe-area-inset-bottom)); pointer-events:none; z-index:10; }
#chrome > * { pointer-events:auto; }
#counter { font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--mist); min-width:80px; }
#hint { font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--mist); opacity:.75; display:flex; align-items:center; gap:10px; transition:opacity .4s; }
#hint .mouse { width:18px; height:28px; border:1.5px solid var(--mist); border-radius:10px; position:relative; }
#hint .mouse::after { content:""; position:absolute; left:50%; top:5px; width:3px; height:6px; margin-left:-1.5px; border-radius:2px; background:var(--accent-soft); animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { transform:translateY(0); opacity:1; } 70% { transform:translateY(8px); opacity:0; } 100% { opacity:0; } }
.nav { display:flex; gap:10px; }
.nav button { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:rgba(22,19,29,.85); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.nav button:hover { border-color:var(--accent); }
.nav button:focus-visible, #gate button:focus-visible, .btn:focus-visible { outline:2px solid var(--accent-hi); outline-offset:3px; }
.nav svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
#progress { position:fixed; left:0; top:0; height:3px; background:var(--accent); box-shadow:0 0 12px var(--accent); width:0; z-index:10; }
#notes { position:fixed; right:20px; bottom:84px; width:min(520px, calc(100vw - 40px)); max-height:40vh; overflow:auto; background:rgba(22,19,29,.96); border:1px solid var(--line); border-radius:22px; padding:22px 24px; font-size:16px; line-height:1.5; color:var(--ink); display:none; z-index:11; }
#notes.open { display:block; }
#notes h4 { font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--accent-soft); margin-bottom:10px; }
@media (max-width: 760px) { #hint span:last-child { display:none; } }
@media (prefers-reduced-motion: reduce) { #hint .mouse::after { animation:none; } }
/* print mode (?print=1): stations stacked as pages in their final state. Lead-facing PDFs are NOT made from this: use scripts/deck_pdf.mjs (screenshots). */
body.print #viewport { position:static; background:none; overflow:visible; }
body.print #stage { position:relative; left:0; top:0; transform:none !important; height:auto; }
body.print .station { position:relative; width:1920px; height:1080px; display:block !important; opacity:1 !important; transform:none !important; overflow:hidden; break-after:page; background:var(--night); }
body.print #chrome, body.print #progress, body.print #notes, body.print #gate, body.print #hero, body.print #starfield, body.print .no-print { display:none !important; }
body.print .print-hero { position:absolute; z-index:6; }
@page { size:1920px 1080px; margin:0; }