/* PANTHEON flagship v2 — the Framer-grade layer over styles.css.
   Palette/type/components are inherited from /styles.css; this file adds the cinematic shell + motion states.
   PROGRESSIVE ENHANCEMENT: from-states apply ONLY under html.js-motion; html.fx-safe force-reveals everything. */

/* ---------- reveal machinery (safe: nothing hidden without js-motion) ---------- */
html.js-motion [data-fx]{opacity:0;transform:translateY(26px)}
html.js-motion [data-fx="words"]{opacity:1;transform:none}      /* the block stays; its words animate */
html.js-motion [data-fx="words"] .w{opacity:0}
[data-fx].is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.fx-safe [data-fx],html.fx-safe [data-fx] .w{opacity:1!important;transform:none!important}
.v-h1 .w,h2 .w,.v-lead .w{display:inline-block;white-space:pre;will-change:transform,opacity}

/* ---------- cinematic texture ----------
   NB: mix-blend-mode on a fixed full-viewport layer re-composites the whole viewport EVERY scroll frame
   (measured: 41% janky frames vs 0% without it). Dropped the blend — a plain low-opacity grain scrolls free. */
.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- the checkpoint rail (born from the hero; here a static-safe version) ---------- */
.rail{position:fixed;left:0;top:0;height:100vh;width:40px;z-index:40;display:none;pointer-events:none}
.rail-line{position:absolute;left:19px;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line2) 12%,var(--line2) 88%,transparent)}
.rail-node{position:absolute;left:0;width:40px;display:flex;align-items:center;gap:8px;
  transform:translateY(-50%);transition:opacity .4s}
.rail-node i{width:9px;height:9px;margin-left:15px;border-radius:50%;background:var(--line2);
  box-shadow:0 0 0 0 var(--acc-wash);transition:background .4s,box-shadow .4s,transform .4s;flex:none}
.rail-node b{font:600 .62rem/1 var(--mono);letter-spacing:.06em;color:var(--faint);opacity:0;
  transform:translateX(-4px);transition:opacity .35s,transform .35s;text-transform:lowercase}
.rail-node.done i{background:var(--acc-dim)}
.rail-node.active i{background:var(--acc-soft);box-shadow:0 0 14px 2px rgba(124,92,255,.6);transform:scale(1.25)}
.rail-node.active b{opacity:1;transform:none;color:var(--mist)}
.rail-node.fired i{background:var(--red);box-shadow:0 0 16px 3px rgba(232,92,79,.7)}
.rail-node.fired b{opacity:1;color:var(--red)}
@media(min-width:1180px){html.js-motion .rail{display:block}}

/* ---------- topbar tweak ----------
   backdrop-filter:blur on a STICKY bar re-blurs the whole bar every scroll frame (measured: ~39pts of
   the scroll jank). Drop the blur; a near-solid bar reads the same and scrolls free. */
.v2bar{background:rgba(12,10,18,.92);backdrop-filter:none;-webkit-backdrop-filter:none}

/* ═══════════ 00 · HERO ═══════════ */
.v-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  border-top:none;padding:96px 0 60px}
.v-hero .hero-art{position:absolute;inset:0;z-index:0;opacity:.82}
.v-hero .hero-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.v-hero-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,9,18,.94) 0%,rgba(11,9,18,.7) 38%,rgba(11,9,18,.2) 66%,transparent 86%),
    linear-gradient(0deg,var(--bg) 2%,transparent 30%)}
.v-hero-in{position:relative;z-index:2;max-width:1080px}
.dateline{font:600 .74rem/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--mist);
  display:inline-flex;align-items:center;gap:9px;margin:0 0 22px}
.v-h1{font:600 clamp(2.6rem,8vw,5.4rem)/1.02 var(--serif);letter-spacing:-.03em;margin:0 0 .34em;
  font-variation-settings:'opsz' 144;text-wrap:balance;max-width:17ch}
.v-h1 .on{color:var(--acc-soft)}
.v-lede{font-size:clamp(1.05rem,2.2vw,1.28rem);color:#d8d1e6;max-width:52ch;margin:0 0 26px}
.v-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.v-artnote{font-size:.8rem;margin-top:16px;max-width:60ch}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  font:600 .66rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
  display:flex;flex-direction:column;align-items:center;gap:9px}
.scroll-cue span{width:1px;height:34px;background:linear-gradient(var(--acc-soft),transparent);animation:cueDrop 1.8s ease-in-out infinite}
@keyframes cueDrop{0%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.4}}
/* floating glass status card + mini spine */
.hero-status{position:absolute;top:104px;right:max(22px,calc(50vw - 540px));z-index:2;
  background:rgba(20,16,25,.86);border:1px solid var(--line2);
  border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--e2);max-width:230px}
.hs-top{font-size:.72rem;color:var(--mist);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.hs-spine{display:flex;flex-direction:column;gap:7px}
.hs-spine span{font:600 .66rem/1 var(--mono);color:var(--faint);display:flex;align-items:center;gap:8px;letter-spacing:.04em}
.hs-spine i{width:7px;height:7px;border-radius:50%;background:var(--acc-dim);box-shadow:0 0 8px rgba(124,92,255,.5);flex:none;
  animation:spinePulse 3s ease-in-out infinite}
.hs-spine span:nth-child(2) i{animation-delay:.4s}.hs-spine span:nth-child(3) i{animation-delay:.8s}
.hs-spine span:nth-child(4) i{animation-delay:1.2s}.hs-spine span:nth-child(5) i{animation-delay:1.6s}.hs-spine span:nth-child(6) i{animation-delay:2s}
@keyframes spinePulse{0%,100%{opacity:.5}50%{opacity:1}}
@media(max-width:900px){.hero-status{display:none}.scroll-cue{display:none}}

/* ═══════════ shared section rhythm ═══════════ */
.v-sec{position:relative;padding:clamp(80px,12vw,150px) 0;border-top:none}
.v-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1080px,92%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line2) 20%,rgba(124,92,255,.32) 50%,var(--line2) 80%,transparent)}
.v-hero+.v-sec::before,.v-made::before{display:none}
.eyebrow{font:600 .72rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--acc-soft);margin:0 0 18px}
.v-lead{font:600 clamp(1.5rem,3.4vw,2.4rem)/1.22 var(--serif);letter-spacing:-.02em;max-width:20ch;margin:0 0 12px;text-wrap:balance}
.v-lead .on{color:var(--acc-soft)}
.v-lead-sm{font:600 clamp(1.3rem,2.6vw,1.9rem)/1.3 var(--serif);letter-spacing:-.015em;color:var(--ink);margin-top:38px;max-width:22ch}
.v-lead-sm .on{color:var(--acc-soft)}

/* ═══ 01 gap ═══ */
.gap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:36px;max-width:820px}
@media(max-width:640px){.gap-grid{grid-template-columns:1fr}}
.gap-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--e1);
  transition:transform .25s,border-color .25s}
.gap-tile:hover{transform:translateY(-3px);border-color:var(--line2)}
.gap-tile b{display:block;font:600 1rem/1.3 var(--sans);color:var(--ink);margin-bottom:5px}
.gap-tile span{font-size:.92rem;color:#cdc4dd}

/* ═══ 02 stage — spotlight ═══ */
.v-stage{transition:none}
body.stage-live::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(125% 90% at 50% 46%,transparent 38%,rgba(6,4,10,.74));
  transition:opacity .8s ease;animation:vigIn .8s ease forwards}
@keyframes vigIn{to{opacity:1}}
.v-stage .assistant{position:relative;z-index:2}
.v-stage #govCanvas{height:190px}

/* ═══ 03 anatomy ═══ */
.anatomy{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:40px}
@media(max-width:900px){.anatomy{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.anatomy{grid-template-columns:1fr}}
.an-node{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 14px 15px;box-shadow:var(--e1);position:relative}
.an-node b{display:block;font:600 .82rem/1 var(--mono);color:var(--acc-soft);letter-spacing:.04em;margin-bottom:8px}
.an-node.lit b{color:#fff}
.an-node.lit{border-color:var(--acc-dim);box-shadow:0 0 0 1px var(--acc-wash),var(--e1)}
.an-node.fired{border-color:var(--red);box-shadow:0 0 0 1px rgba(232,92,79,.4),var(--e1)}
.an-node.fired b{color:var(--red)}
.an-node span{display:block;font-size:.82rem;color:#cdc4dd;line-height:1.42}
.an-node i{display:block;font-size:.74rem;color:var(--faint);font-style:normal;margin-top:9px;border-top:1px dashed var(--line2);padding-top:8px}
.an-bead{position:absolute;top:-4px;left:0;width:11px;height:11px;border-radius:50%;background:#fff;
  box-shadow:0 0 14px 3px rgba(255,255,255,.7);opacity:0;z-index:3}
.anatomy-live-note{color:var(--acc-soft)}

/* ═══ 04 bento ═══ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
@media(max-width:820px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bento{grid-template-columns:1fr}}
.bento-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--e1);display:flex;flex-direction:column;gap:7px;text-decoration:none;color:var(--ink);
  transition:border-color .25s,box-shadow .25s;transform-style:preserve-3d}
a.bento-tile:hover{border-color:var(--acc-dim);box-shadow:0 0 0 1px var(--acc-wash),var(--e2)}
.b-wide{grid-column:span 2}
@media(max-width:520px){.b-wide{grid-column:span 1}}
.bt-k{font:600 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-soft)}
.bento-tile b{font:600 1.16rem/1.24 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.bt-p{font-size:.9rem;color:#cdc4dd;flex:1}
.bt-go{font-size:.85rem;color:var(--acc-soft);font-weight:600;margin-top:4px}
a.bento-tile:hover .bt-go{color:#fff}
.b-stat{align-items:flex-start;justify-content:center}
.b-stat b.odo{font:600 2.6rem/1 var(--serif);color:var(--acc-soft);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.b-stat span{font-size:.9rem;color:var(--ink);font-weight:600}
.b-stat i{font-size:.78rem;color:var(--faint);font-style:normal}

/* ═══ 05 marquee ═══ */
.v-made{padding-bottom:clamp(40px,7vw,80px)}
.marquee{margin-top:44px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-in{display:inline-flex;gap:22px;white-space:nowrap;will-change:transform}
.marquee-in span{font:600 1.4rem/1 var(--serif);color:var(--mist);letter-spacing:-.01em}
.marquee-in span:nth-child(even){color:var(--acc-dim)}

/* ═══ 06 closer ═══ */
.v-close{text-align:center}
.v-close .wrap>*{margin-left:auto;margin-right:auto}
.v-close-h{font:600 clamp(1.9rem,4.6vw,3rem)/1.1 var(--serif);letter-spacing:-.02em;max-width:20ch;
  font-variation-settings:'opsz' 144}
.v-close-h .on{color:var(--acc-soft)}

/* ---------- magnetic buttons keep a transform origin ---------- */
.mag{will-change:transform}

/* ---------- reduced-motion / no-motion parity ---------- */
@media (prefers-reduced-motion: reduce){
  .scroll-cue span,.hs-spine i{animation:none}
  [data-fx],[data-fx] .w{opacity:1!important;transform:none!important}
}

/* ── signature moments: FLIP dock · refusal stamp · verdict ripple ── */
.v-stage{position:relative}
.flip-flyer{position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px;border-radius:50%;
  background:var(--acc-soft);box-shadow:0 0 12px 2px rgba(124,92,255,.85);z-index:60;pointer-events:none}
.refuse-stamp{position:absolute;top:14%;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;
  font:600 clamp(2rem,6vw,3.4rem)/1 var(--serif);letter-spacing:-.02em;opacity:0;text-transform:uppercase;
  font-variation-settings:'opsz' 144;text-shadow:0 2px 34px rgba(0,0,0,.55)}
.verdict-ripple{position:fixed;width:440px;height:440px;margin:-220px;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle,rgba(var(--rc,124,92,255),.22),transparent 66%)}