/* Isometric figures on the website (built by scripts/figures/, kit styles in iso.css).
   The "Anatomy of a rocket" section: a pinned stage whose camera and parts follow the scroll,
   beside a panel of steps. Markup: scripts/figures/falcon9/build.mjs. Live: js/site/figures/falcon9.js. */

/* Kit dark theme retuned to the site palette */
.an-stage.iso[data-theme="dark"],.an-figure.iso[data-theme="dark"]{
  --anatomy-page:transparent;--anatomy-card:#070f16;--anatomy-text:var(--ink-2);--anatomy-strong:var(--ink);--anatomy-muted:var(--muted);
  --anatomy-paper:#070f16;--anatomy-face:#0f1c25;--anatomy-top:#132430;
  --anatomy-shade-0:#08121a;--anatomy-shade-1:#0b1720;--anatomy-shade-2:#0e1c26;--anatomy-shade-3:#12212c;
  --anatomy-lit-top:#1a2f38;--anatomy-lit-shade:#13262e;
  --anatomy-hi:#d9e6ea;--anatomy-mid:#6f838d;--anatomy-lo:#3a4c56;--anatomy-faint:#22343e;--anatomy-lit:#ffffff;
  --anatomy-halo:#010407;--anatomy-halo-opacity:.85;--anatomy-dot:#d9e6ea;
  --anatomy-mono:var(--f-mono);
  --an-lox:#9fd6ff;--an-rp1:#e0a85a;--an-hot:#f0d39b;
}
/* Falcon 9's body is white: lift its faces a step; the interstage is black carbon */
.an-svg .pc-s1 .iso-fill,.an-svg .pc-s2 .iso-fill,.an-svg .pc-fairing .iso-fill,.an-svg .pc-engines .iso-fill{fill:#14232d}
.an-svg .an-carbon{--anatomy-shade-0:#04080c;--anatomy-shade-1:#050a0f;--anatomy-shade-2:#060c12;--anatomy-shade-3:#081016;--anatomy-top:#09121a}
.an-svg .an-carbon .iso-fill{fill:#060b10}
/* Cutaways: the cavity, the propellant tint, voids inside nozzles */
.an-cavity{fill:#03080c}
.an-fluid{opacity:.22}
.an-lox,.an-lox2{fill:var(--an-lox);opacity:.3}
.an-rp1{fill:var(--an-rp1)}
.an-void{fill:#020507}
.an-cut{opacity:0;transition:none}
.an-inner{opacity:0}
.an-live-face{stroke:var(--anatomy-hi);stroke-width:.5;stroke-linejoin:round}
.an-live-line{stroke:var(--anatomy-lo);stroke-width:.4;fill:none}
.an-svg .pc{will-change:transform}

/* ---------- Section layout ---------- */
.anatomy{padding-bottom:0}
.an-head{margin-bottom:clamp(24px,4vw,48px)}
.an-track{position:relative;height:calc(var(--steps) * 85vh + 100vh)}
.an-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,600px) minmax(300px,440px);justify-content:center;gap:clamp(24px,5vw,80px);align-items:center;padding:110px clamp(16px,4vw,44px) 28px;max-width:1500px;margin:0 auto;box-sizing:border-box}
.an-stage{position:relative;width:100%;height:100%;min-height:0;border-radius:12px;background:radial-gradient(120% 90% at 40% 55%,#0b1822 0%,#060d13 60%,#04090d 100%);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.an-figure{position:absolute;inset:0}
.an-figure svg{width:100%;height:100%;display:block}
.an-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.an-readout{position:absolute;right:14px;bottom:12px;font-family:var(--f-mono);font-size:11px;color:var(--ink-2);letter-spacing:.04em;font-variant-numeric:tabular-nums;pointer-events:none}

.an-panel{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:0}
.an-bar{height:2px;background:var(--line);border-radius:2px;margin-bottom:22px;overflow:hidden}
.an-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transform-origin:left;transform:scaleX(0)}
.an-steps{list-style:none;margin:0;padding:0;display:grid}
.an-step{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease-out-expo),transform .6s var(--ease-out-expo);pointer-events:none}
.an-step[data-active]{opacity:1;transform:none;pointer-events:auto}
.an-k{font-family:var(--f-mark);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi)}
.an-step h3{margin:10px 0 10px;font-family:var(--f-display);font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.01em}
.an-step p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}
.an-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:18px 0 0}
.an-stats div{padding:9px 11px;border:1px solid var(--line);border-radius:4px;background:rgba(14,26,36,.45)}
.an-stats dt{font-family:var(--f-mark);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.an-stats dd{margin:4px 0 0;font-family:var(--f-mono);font-size:14px;color:var(--ink)}
.an-note{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}

/* Phones and narrow tablets: drawing on top, the step below */
@media (max-width:860px){
  .an-track{height:calc(var(--steps) * 95vh + 100vh)}
  .an-sticky{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:72px 12px 12px;gap:14px;align-items:start}
  .an-stage{height:50vh;height:50svh}
  .an-panel{justify-content:flex-start}
  .an-bar{margin-bottom:12px}
  .an-steps{min-height:0;overflow:hidden}
  .an-step h3{font-size:20px;margin:6px 0}
  .an-step p{font-size:13.5px;line-height:1.5}
  .an-stats{margin-top:10px;gap:5px}
  .an-stats div{padding:6px 8px}
  .an-stats dd{font-size:12.5px}
  .an-note{display:none}
  .an-readout{display:none}
}
@media (prefers-reduced-motion:reduce){.an-step{transition:none;transform:none}}
/* The helium bottles light up in the LOX-tank step (its text points at them) */
.an-svg .an-copv{transition:filter .4s}
.an-svg[data-scene="lox"] .an-copv{filter:drop-shadow(0 0 3px var(--an-hot)) drop-shadow(0 0 8px rgba(240,211,155,.5))}