/* Home page only: scroll driven anatomical stage. */

#stage{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; --fx:33.5%}

/* Hero and scroll journey: the pre-rendered turntable frames are drawn on this canvas
   (assets/js/turntable.js). The canvas covers the viewport; the framing, not the element, moves. */
.body-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .9s var(--out)}
body.body3d-ready .body-canvas{opacity:1}
.turn-caption{position:absolute; left:var(--fx); bottom:2.2%; transform:translateX(-50%); white-space:nowrap; font-size:9px; letter-spacing:.14em; color:rgba(232,238,248,.46); font-style:normal; opacity:0}
.turn-caption span{color:rgba(143,186,255,.82); padding:0 7px}
.turn-caption b{font-weight:500; color:rgba(232,238,248,.86)}
.turn-caption i{font-style:normal; color:rgba(143,186,255,.74)}
.turn-caption em{font-style:normal}
body.turntable-views-only .turn-caption em{color:rgba(232,238,248,.30)}
body.hero-dragging{cursor:grabbing}
@media (hover:hover) and (pointer:fine){body.home:not(.hero-dragging){cursor:auto}}
.reveal-hint{position:absolute; left:var(--fx); bottom:2.2%; transform:translateX(-50%); white-space:nowrap; font-size:9px; letter-spacing:.14em; color:rgba(232,238,248,.46); opacity:0; transition:opacity .35s ease}
.reveal-hint.on{opacity:1}
@media(max-width:899px){ .turn-caption,.reveal-hint{bottom:1.2%} }

#scan{position:absolute; left:0; width:100%; top:8vh; height:16vh; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,transparent,rgba(143,186,255,.14) 45%,rgba(143,186,255,.28) 50%,rgba(143,186,255,.14) 55%,transparent)}
#scan.on{animation:sweep 1.5s var(--out)}
@keyframes sweep{0%{opacity:0; transform:translateY(-40%)} 18%{opacity:1} 100%{opacity:0; transform:translateY(140%)}}

.veil{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 62% 78% at var(--fx,34%) 50%, transparent 20%, rgba(3,6,14,.72) 78%),
             linear-gradient(90deg, rgba(3,6,14,.55) 0%, transparent 26%, transparent 46%, rgba(3,6,14,.92) 72%)}
@media(max-width:899px){
  .veil{background:radial-gradient(ellipse 92% 58% at 50% 40%, transparent 10%, rgba(3,6,14,.88) 70%)}
}

#hud{position:fixed; inset:0; z-index:2; pointer-events:none; display:none}
@media(min-width:1150px){ #hud{display:block} }
.callout{position:absolute; top:0; left:0; opacity:0; transition:opacity .5s var(--out); will-change:transform}
.callout.on{opacity:1}
.callout .dot{position:absolute; top:-4px; width:8px; height:8px; border-radius:99px; background:var(--blue-lit);
  box-shadow:0 0 12px rgba(143,186,255,.9); transition:background-color .5s var(--out)}
.callout .stem{position:absolute; top:0; height:1px; width:86px;
  background:linear-gradient(90deg,rgba(143,186,255,.75),rgba(143,186,255,.12)); transition:background .5s var(--out)}
.callout .txt{position:absolute; top:-22px; white-space:nowrap}
.callout b{display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--paper)}
.callout .state{display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-style:normal;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue-lit); margin-top:5px; transition:color .5s var(--out)}
.callout.r .dot{left:0} .callout.r .stem{left:12px} .callout.r .txt{left:104px}
.callout.l .dot{right:0} .callout.l .stem{right:12px} .callout.l .txt{right:104px; text-align:right}
.callout.l .stem{background:linear-gradient(270deg,rgba(143,186,255,.75),rgba(143,186,255,.12))}
.callout.warn .dot{background:var(--amber); box-shadow:0 0 12px rgba(255,176,32,.9)}
.callout.warn .state{color:var(--amber)}
.callout.warn.r .stem{background:linear-gradient(90deg,rgba(255,176,32,.75),rgba(255,176,32,.12))}
.callout.warn.l .stem{background:linear-gradient(270deg,rgba(255,176,32,.75),rgba(255,176,32,.12))}

#score{position:fixed; left:40px; bottom:40px; z-index:2; display:none; pointer-events:none}
@media(min-width:1150px){ #score{display:block} }
#score .ring{width:74px; height:74px; position:relative}
#score svg{transform:rotate(-90deg)}
#score .val{position:absolute; inset:0; display:grid; place-items:center;
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--paper)}

/* home sections sit above the stage */
.home main{position:relative; z-index:3}
.scene{min-height:100svh; display:flex; align-items:center; padding:120px 20px 96px}
@media(min-width:900px){ .scene{padding:120px 40px} }
.scene .hold{width:100%; max-width:var(--wrap); margin:0 auto}
@media(min-width:900px){
  .scene .hold{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
  .scene .hold > .col{grid-column:2}
}
.scene .panel{background:rgba(7,12,22,.66); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:20px; padding:26px}
@media(min-width:900px){ .scene .panel{background:transparent; backdrop-filter:none; border:0; padding:0} }
.home .sec, .home .marq, .home footer, .home .cta-band{position:relative; z-index:3}
.home .sec{background:linear-gradient(180deg,rgba(3,6,14,0) 0%,var(--ink) 9%,var(--ink) 91%,rgba(3,6,14,0) 100%)}
.home .sec.alt{background:var(--ink-2)}

@media (prefers-reduced-motion: reduce){
  #scan.on{animation:none}
}