/* ============================================================
   Hppn story engine styles — scrollytelling container story + hub
   Ported from the Capability Atlas visualiser (now retired).
   Requires assets/css/hppn.css for the base theme variables.
   ============================================================ */

:root{
  --hero-dot:   rgba(236,231,221,0.35);
  --web-line:   rgba(236,231,221,0.18);
  --fig-surface:    #141a20;
  --fig-surface-2:  #1b232b;
  --fig-stroke-soft:rgba(236,231,221,.25);
  --fig-line:       rgba(236,231,221,.5);
  --fig-line-faint: rgba(236,231,221,.2);
}
:root[data-theme="light"]{
  --hero-dot:   rgba(34,29,20,0.26);
  --web-line:   rgba(34,29,20,0.32);
  --fig-surface:    #ece1c9;
  --fig-surface-2:  #e2d6ba;
  --fig-stroke-soft:rgba(34,29,20,0.30);
  --fig-line:       rgba(34,29,20,0.42);
  --fig-line-faint: rgba(34,29,20,0.22);
}

/* ---------- scrollytelling shell ---------- */
.scrolly{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.scrolly .sticky{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center; justify-content:center; padding:0 var(--gut);
}
.scrolly .steps{ padding:14vh var(--gut) 14vh; }
.step{ min-height:78vh; display:flex; flex-direction:column; justify-content:center; max-width:30rem; }
.step .stepnum{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--paper-faint); margin-bottom:18px; }
.step h3{ font-family:var(--display); text-transform:uppercase; font-weight:600; font-size:clamp(26px,3vw,38px); letter-spacing:0; line-height:1.05; margin:0 0 14px; }
.step h3 em{ color:var(--signal-text); font-style:normal; }
.step p{ color:var(--paper-dim); font-size:18px; line-height:1.6; margin:0; }
.step p strong{ color:var(--paper); font-weight:600; }
.step.is-active h3{ color:var(--paper); }
.step-nav{ display:flex; gap:26px; margin-top:32px; opacity:0; transform:translateY(4px); transition:opacity .55s ease, transform .55s ease; pointer-events:none; }
.step.is-active .step-nav{ opacity:1; transform:none; pointer-events:auto; }
.step-link{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-faint); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:color .25s ease; }
.step-link:hover{ color:var(--signal-text); }
.step-link .ar{ font-size:13px; line-height:1; transition:transform .25s ease; }
.step-link.step-next:hover .ar{ transform:translateY(2px); }
.step-link.step-prev:hover .ar{ transform:translateY(-2px); }
.intro-cue{ margin-top:40px; }
.intro-next:hover .ar{ transform:translateY(2px); }
@media(max-width:860px){
  .scrolly{ grid-template-columns:1fr; }
  .scrolly .sticky{ height:62vh; top:0; order:-1; }
  .scrolly .steps{ padding:6vh var(--gut); }
  .step{ min-height:64vh; }
}

/* ---------- the container/capability figure ---------- */
.figure-stage{ width:100%; max-width:560px; aspect-ratio:1/1; position:relative; }
.figure-stage svg{ width:100%; height:100%; overflow:visible; }

.figure-stage [data-state] .fig-wheel,
.figure-stage [data-state] .fig-prop,
.figure-stage [data-state] .fig-sheen,
.figure-stage [data-state] .fig-stack{ transform-box:fill-box; }
.figure-stage [data-state] .fig-wheel,
.figure-stage [data-state] .fig-prop{ transform-origin:center; }
.figure-stage [data-state] .fig-stack{ transform-origin:center top; }

/* steel box: a slow light-sheen sweep */
.figure-stage [data-state] .fig-sheen{ opacity:0; }
.figure-stage [data-state].fig-on .fig-sheen{ animation:figSheen 6.5s ease-in-out infinite; }
@keyframes figSheen{ 0%{ transform:translateX(-12px); opacity:0; } 4%{ opacity:.85; } 16%{ transform:translateX(58px); opacity:0; } 100%{ transform:translateX(58px); opacity:0; } }

/* standard edge: a container swings in on crane cables, lands flat, cables drop away */
.figure-stage [data-state] .fig-stack{ opacity:0; }
.figure-stage [data-state].fig-on .fig-stack{ animation:figStack 4.8s ease-in-out infinite; }
@keyframes figStack{ 0%{ transform:translateY(-42px) rotate(6deg); opacity:0; } 10%{ opacity:1; } 35%{ transform:translateY(-19px) rotate(-4deg); } 55%{ transform:translateY(-7px) rotate(2.4deg); } 72%,86%{ transform:translateY(0) rotate(0deg); opacity:1; } 94%{ opacity:0; } 100%{ transform:translateY(-42px) rotate(6deg); opacity:0; } }
.figure-stage [data-state] .fig-cables{ transform-box:fill-box; }
.figure-stage [data-state].fig-on .fig-cables{ animation:figCables 4.8s ease-in-out infinite; }
@keyframes figCables{ 0%,70%{ opacity:1; transform:translateY(0); } 84%,100%{ opacity:0; transform:translateY(-14px); } }
.figure-stage [data-state] .fig-lock{ stroke-opacity:0; }
.figure-stage [data-state].fig-on .fig-lock{ animation:figLock 4.8s ease-in-out infinite; }
@keyframes figLock{ 0%,68%{ stroke-opacity:0; } 75%{ stroke-opacity:.9; } 88%,100%{ stroke-opacity:0; } }

/* one box, every mode: spinning wheels + ship's propeller */
.figure-stage [data-state].fig-on .fig-wheel{ animation:figSpin 2.2s linear infinite; }
.figure-stage [data-state].fig-on .fig-prop{ animation:figSpin .55s linear infinite; }
@keyframes figSpin{ to{ transform:rotate(360deg); } }

/* capability container → manifest → interior: one persistent box, driven by .phase-* */
.figure-stage [data-state] .cap-door{ transform-box:fill-box; transform-origin:left center; transition:transform .85s cubic-bezier(.5,0,.25,1); }
.figure-stage [data-state] .cap-corr{ opacity:0; }
.figure-stage [data-state] .cap-label{ opacity:1; }
.figure-stage [data-state].phase-capsule .cap-corr{ animation:capMorphOut 1.2s ease both; }
@keyframes capMorphOut{ 0%,55%{ opacity:1; } 100%{ opacity:0; } }
.figure-stage [data-state].phase-capsule .cap-label{ animation:capMorphIn 1.2s ease both; }
@keyframes capMorphIn{ 0%,45%{ opacity:0; } 100%{ opacity:1; } }
.figure-stage [data-state].phase-inside .cap-door{ transform:scaleX(.045); }

/* manifest connectors grow from the box's edge */
.figure-stage [data-state] .cap-nod{ opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(0); transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.5,.5,1); transition-delay:var(--d,0s); }
.figure-stage [data-state] .cap-grow{ stroke-dasharray:46; stroke-dashoffset:46; transition:stroke-dashoffset .55s ease, opacity .4s ease; transition-delay:var(--d,0s); }
.figure-stage [data-state] .cap-lab{ opacity:0; transition:opacity .45s ease; transition-delay:var(--d,0s); }
.figure-stage [data-state].phase-manifest .cap-nod{ opacity:1; transform:scale(1); }
.figure-stage [data-state].phase-manifest .cap-grow{ stroke-dashoffset:0; }
.figure-stage [data-state].phase-manifest .cap-lab{ opacity:1; }

/* interior interface ticks + per-phase captions */
.figure-stage [data-state] .cap-iface,
.figure-stage [data-state] .cap-cap{ opacity:0; transition:opacity .5s ease; }
.figure-stage [data-state].phase-capsule  .cap-cap-capsule{ opacity:1; }
.figure-stage [data-state].phase-manifest .cap-cap-manifest{ opacity:1; }
.figure-stage [data-state].phase-inside   .cap-cap-inside{ opacity:1; }
.figure-stage [data-state].phase-inside   .cap-iface{ opacity:1; }

/* network: cycle lit configurations */
.figure-stage [data-state] .net-node{ opacity:.3; transition:opacity .8s ease; transform-box:fill-box; transform-origin:center; }
.figure-stage [data-state] .net-node rect{ fill:var(--fig-surface); }
.figure-stage [data-state] .net-node.net-on{ opacity:1; }
.figure-stage [data-state] .net-link{ stroke:var(--web-line); stroke-opacity:1; transition:stroke .7s ease, stroke-opacity .7s ease; }
.figure-stage [data-state] .net-link.net-on{ stroke:var(--signal); stroke-opacity:.75; }

/* network entrance: the box becomes one node, the rest seed from the centre and spread */
.figure-stage [data-state].net-intro .net-node{ animation:netSeed .7s cubic-bezier(.3,.7,.25,1) both; animation-delay:calc(var(--nd,0) * 1s); }
.figure-stage [data-state].net-intro.net-seed .net-node{ animation-delay:calc(.5s + var(--nd,0) * 1s); }
@keyframes netSeed{ from{ transform:translate(var(--ix,0),var(--iy,0)) scale(.16); opacity:0; } to{ transform:none; opacity:.3; } }
.figure-stage [data-state].net-intro .net-link{ animation:netLinkIn .6s ease both; animation-delay:.45s; }
.figure-stage [data-state].net-intro.net-seed .net-link{ animation-delay:1s; }
@keyframes netLinkIn{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- one-language hub ---------- */
.hub{ max-width:620px; margin:56px auto 0; }
.hub-svg{ width:100%; height:auto; overflow:visible; }
.hub-label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; fill:var(--paper-dim); }
.hub-core-label{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; fill:var(--signal-text); }
.hub-svg .spoke{ stroke:var(--web-line); stroke-dasharray:4 4; animation:flow 3s linear infinite; animation-delay:var(--d); }
@keyframes flow{ to{ stroke-dashoffset:-16; } }
@media(prefers-reduced-motion:reduce){ .hub-svg .spoke{ animation:none; } }