/* GhostShield AI Technologies — motion layer (v6).
   Purpose: explanation + preventing jarring change, on a marketing site.
   Properties: transform + opacity only. Curves/durations per the house table:
   strong ease-out for entrances, strong ease-in-out for on-screen movement. */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
html.gs-smooth{scroll-behavior:auto}

/* ---------- reveals, upgraded ---------- */
.reveal{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transform:translateY(26px) scale(.985)}
.reveal.in{transform:none}
/* stagger groups: the container stops fading itself; its children carry the motion */
.rows.reveal,.steps.reveal,.stack.reveal,.people.reveal{opacity:1;transform:none;transition:none}
.rows.reveal>*,.steps.reveal>*,.stack.reveal>*,.people.reveal>*{
  opacity:0;transform:translateY(20px) scale(.98);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.rows.reveal.in>*,.steps.reveal.in>*,.stack.reveal.in>*,.people.reveal.in>*{opacity:1;transform:none}
.rows.reveal.in>*:nth-child(2),.steps.reveal.in>*:nth-child(2),.stack.reveal.in>*:nth-child(2),.people.reveal.in>*:nth-child(2){transition-delay:.06s}
.rows.reveal.in>*:nth-child(3),.steps.reveal.in>*:nth-child(3),.stack.reveal.in>*:nth-child(3),.people.reveal.in>*:nth-child(3){transition-delay:.12s}
.rows.reveal.in>*:nth-child(4),.steps.reveal.in>*:nth-child(4),.stack.reveal.in>*:nth-child(4),.people.reveal.in>*:nth-child(4){transition-delay:.18s}
.rows.reveal.in>*:nth-child(5),.steps.reveal.in>*:nth-child(5),.stack.reveal.in>*:nth-child(5),.people.reveal.in>*:nth-child(5){transition-delay:.24s}
.rows.reveal.in>*:nth-child(6),.steps.reveal.in>*:nth-child(6),.stack.reveal.in>*:nth-child(6),.people.reveal.in>*:nth-child(6){transition-delay:.3s}
.rows.reveal.in>*:nth-child(n+7),.steps.reveal.in>*:nth-child(n+7),.stack.reveal.in>*:nth-child(n+7),.people.reveal.in>*:nth-child(n+7){transition-delay:.36s}

/* ---------- hero entrance (CSS animation: runs off the main thread) ---------- */
@keyframes heroIn{from{opacity:0;transform:translateY(24px) scale(.99)}to{opacity:1;transform:none}}
.hero-dark .hero-grid>div:first-child>*{animation:heroIn .9s var(--ease-out) both}
.hero-dark .hero-grid>div:first-child>*:nth-child(2){animation-delay:.08s}
.hero-dark .hero-grid>div:first-child>*:nth-child(3){animation-delay:.16s}
.hero-dark .hero-grid>div:first-child>*:nth-child(4){animation-delay:.24s}
.hero-dark .appwin{animation:heroIn 1s var(--ease-out) .18s both}

/* ---------- buttons: press feedback + magnetic glide ---------- */
.btn,.nav-cta{transition:transform .3s var(--ease-out),background-color .25s ease,color .25s ease,border-color .25s ease}
@media (hover:hover) and (pointer:fine){
  .btn:active,.nav-cta:active{transform:scale(.97)}
}

/* ---------- header: hide on scroll down, return on scroll up ---------- */
header.site{transition:transform .45s var(--ease-out)}
header.site.nav-hide{transform:translateY(-100%)}

/* ---------- ANATOMY: scroll-driven scenes (the centrepiece) ---------- */
.anatomy{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.anat-stage{position:relative;padding:84px 0 72px}
.anat-head{text-align:center;max-width:720px;margin:0 auto 8px;padding:0 24px;position:relative;z-index:3}
.anat-head h2{font-family:var(--serif);font-size:clamp(30px,4.4vw,46px);line-height:1.08;margin-top:14px}
.anat-visual{position:relative;max-width:880px;margin:0 auto;padding:0 24px}
.anat-glow{position:absolute;inset:6% 12%;background:var(--panel-2);border:1px solid var(--line);opacity:.55;pointer-events:none}
.scene{position:relative;padding:26px 0 0;text-align:center}
.scene-cap{max-width:600px;margin:20px auto 0;padding:0 12px}
.scene-cap .cap-no{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.scene-cap h3{font-family:var(--serif);font-size:clamp(24px,3.2vw,34px);margin:10px 0 8px}
.scene-cap p{color:var(--soft)}
.anat-svg{width:min(600px,86vw);height:auto;margin:0 auto;display:block}
.anat-svg .c{stroke:var(--cyan)}.anat-svg .g{stroke:var(--gold)}.anat-svg .m{stroke:var(--muted)}
.anat-svg .t{stroke:var(--txt)}.anat-svg .gr{stroke:var(--green)}.anat-svg .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anat-svg .fc{fill:var(--cyan)}.anat-svg .fg{fill:var(--gold)}.anat-svg .fm{fill:var(--muted)}.anat-svg .fgr{fill:var(--green)}
.anat-svg text{fill:var(--soft);font-family:var(--mono);font-size:13px;letter-spacing:.14em}
.anat-svg text.ctr{text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:6px;stroke-linejoin:round}
.anat-rail{display:none}

/* live mode: pinned stage, scenes crossfade on scroll progress (JS adds .anat-live) */
@media (min-width:901px){
  html.anat-live .anat-pin{height:430vh;position:relative}
  html.anat-live .anat-stage{position:absolute;top:0;left:0;right:0;height:100vh;height:100svh;padding:96px 0 40px;display:flex;flex-direction:column;will-change:transform}
  html.anat-live .anat-visual{flex:1;width:100%;display:flex;align-items:center;justify-content:center}
  html.anat-live .scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 70px;opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}
  html.anat-live .scene-cap{margin-top:26px}
  html.anat-live .anat-rail{display:flex;position:absolute;right:34px;top:50%;transform:translateY(-50%);flex-direction:column;align-items:center;gap:14px;z-index:4}
  .anat-rail .rail-line{position:relative;width:2px;height:150px;background:var(--line);overflow:hidden}
  .anat-rail .rail-fill{position:absolute;inset:0;background:var(--cyan);transform-origin:top;transform:scaleY(0)}
  .anat-rail .dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--muted);background:transparent;transition:background-color .3s ease,border-color .3s ease}
  .anat-rail .dot.on{background:var(--gold);border-color:var(--gold)}
  .anat-rail .rail-lab{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);writing-mode:vertical-rl}
}

/* ---------- gentler, not zero, for reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal,.rows.reveal>*,.steps.reveal>*,.stack.reveal>*,.people.reveal>*{transition:opacity .2s ease;transform:none}
  .hero-dark .hero-grid>div:first-child>*,.hero-dark .appwin{animation:none}
  header.site{transition:none}
  .btn,.nav-cta{transition:none}
}

/* Light theme: the scene line art was tuned for the dark stage. Deepen the
   cyan and lift the one deliberately-faded inner shield (opacity .45) so the
   drawings stay legible on the pale background. */
[data-theme="light"] .anat-svg .c{stroke:#0A6E8E}
[data-theme="light"] .anat-svg [opacity=".45"]{opacity:.9}
[data-theme="light"] .anat-svg .ln{stroke-width:2.3}