/* How we work: Audit → Rebuild → Train, told as three diagrams that play as you scroll.
   Desktop: sticky stage, scroll-scrubbed. Phones: each card plays once when it comes into view. */
.how{padding:clamp(56px,8vw,110px) 0 clamp(56px,8vw,96px)}
.story{position:relative}
.story__stage{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:grid;gap:28px}
.story__head{display:grid;gap:14px;max-width:560px}
.story__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative}
.story__bar{height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.story__bar i{display:block;height:100%;background:var(--dot);transform-origin:0 50%;transform:scaleX(0)}

.phase{display:grid;align-content:start;gap:10px;padding:16px 18px 20px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .4s,opacity .4s,transform .5s var(--ease-out)}
.phase.is-active{box-shadow:inset 0 0 0 1.5px rgb(50 130 255/.55),0 24px 50px -30px rgb(20 69 143/.45)}
.phase p{margin:0;color:var(--ink-2);font-size:.95rem;max-width:34ch}
.phase .chip{justify-self:start;margin-top:4px}
.phase__n{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.phase__viz{border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);padding:10px;
  background-image:radial-gradient(rgb(11 12 14/.07) 1px,transparent 1px);background-size:16px 16px}
.phase__viz svg{width:100%;height:auto;display:block;overflow:visible}
.phase svg text{font:500 10.5px var(--sans);fill:var(--ink);text-anchor:middle}

/* shared pieces */
.phase .tool rect,.phase .fmt rect,.phase .ai rect,.phase .gate rect{fill:var(--surface);stroke:#c9cdd3}
.phase .wire path{fill:none;stroke:var(--dot);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease-in-out)}

/* 01 audit */
.phase .tangle path{fill:none;stroke:#d9a44a;stroke-width:1.2;stroke-dasharray:4 4;opacity:.75;transition:opacity .6s}
.phase .scan{fill:var(--dot);filter:drop-shadow(0 0 6px rgb(50 130 255/.9));opacity:0;transform:translateY(0);transition:transform 1.4s var(--ease-in-out),opacity .3s}
.phase .flag{opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease-out) var(--d),transform .4s var(--ease-out) var(--d)}
.phase .flag rect{fill:#fff4e5;stroke:#e8b866}
.phase .flag circle{fill:#d97a2b}
.phase .flag text{font-size:9.5px;fill:#7a4a12}
.phase .report{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.phase .report rect{fill:var(--surface);stroke:var(--dot);stroke-width:1.2}
.phase .report .b{font-weight:600}
.phase .report .s{font:500 8.5px var(--mono);fill:var(--ink-2)}
.phase[data-s="1"] .scan,.phase[data-s="2"] .scan{opacity:1;transform:translateY(198px)}
.phase[data-s="2"] .flag,.phase[data-s="3"] .flag{opacity:1;transform:none}
.phase[data-s="3"] .report{opacity:1;transform:none}
.phase[data-s="3"] .tangle path{opacity:.35}

/* 02 rebuild */
.phase .hub rect{fill:var(--ink);stroke:none} .phase .hub text{fill:#fff}
.phase .gate circle{fill:none;stroke:var(--ink);stroke-width:1.3}
.phase .live rect{fill:var(--dot-soft);stroke:rgb(50 130 255/.6)} .phase .live text{fill:var(--navy)}
.phase .hub,.phase .ai,.phase .gate,.phase .live{opacity:.25;transition:opacity .5s}
.phase .pulses circle{fill:var(--dot);opacity:0;transition:opacity .4s}
.phase[data-s="1"] .wire path:nth-child(-n+5),.phase[data-s="2"] .wire path,.phase[data-s="3"] .wire path{stroke-dashoffset:0}
.phase[data-s="1"] .hub,.phase[data-s="2"] .hub,.phase[data-s="3"] .hub{opacity:1}
.phase[data-s="2"] .ai,.phase[data-s="2"] .gate,.phase[data-s="3"] .ai,.phase[data-s="3"] .gate,.phase[data-s="3"] .live{opacity:1}
.phase[data-s="3"] .pulses circle{opacity:1}

/* 03 train */
.phase .team circle{fill:var(--bg);stroke:#c9cdd3;transition:fill .4s var(--d),stroke .4s var(--d)}
.phase .badge rect{fill:var(--ink)} .phase .badge circle{fill:var(--dot)} .phase .badge text{fill:#fff;font-weight:600}
.phase .badge{opacity:0;transform:translateY(8px) scale(.96);transform-box:fill-box;transform-origin:center;transition:opacity .5s var(--ease-out),transform .5s var(--spring)}
.phase[data-s="2"] .team circle,.phase[data-s="3"] .team circle{fill:var(--dot-soft);stroke:var(--dot)}
.phase[data-s="3"] .badge{opacity:1;transform:none}

/* desktop: sticky + scroll-scrubbed */
@media (min-width:900px) and (min-height:640px){
  .story{height:300vh}
  .story__stage{position:sticky;top:84px;min-height:calc(100svh - 100px);align-content:center}
}
@media (max-width:899px){
  .story__cards{grid-template-columns:1fr;max-width:520px}
  .story__bar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .story{height:auto}.story__stage{position:static}
}