/* ===========================================================================
   Hero end-to-end workflow — sequential reveal (transition-based)
   Stage cards + connectors reveal one-by-one when .play is set on .flow.
   Revealed state is a real computed value, so it's always visible even if the
   animation engine can't tick; hidden state gated behind html[data-anim].
   =========================================================================== */
.flow{ display:flex; flex-direction:column; gap:38px; flex:1; justify-content:center; }

.flow-rail{ display:flex; align-items:stretch; gap:0; }

.stage{
  position:relative; flex:1 1 0; min-width:0;
  background:var(--bg-panel);
  border:1px solid var(--hair);
  border-top:3px solid var(--cat-line);
  border-radius:12px;
  padding:22px 20px 20px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 1px 0 rgba(31,30,29,.04);
}
.stage .st-num{
  font-family:"IBM Plex Mono", monospace; font-weight:600;
  font-size:34px; line-height:1; color:var(--cat-line); letter-spacing:-.02em;
}
.stage .st-label{ font-size:24px; font-weight:600; line-height:1.12; color:var(--ink); letter-spacing:-.01em; }
.stage .st-sub{ font-size:var(--type-small); font-weight:400; line-height:1.25; color:var(--ink-soft); margin-top:auto; }
.stage .st-dot{
  position:absolute; top:18px; right:18px; width:11px; height:11px; border-radius:50%;
  background:var(--cat-fill); border:2px solid var(--cat-line);
}

/* connector between stages */
.conn{
  flex:0 0 46px; align-self:center; position:relative; height:2px;
  display:flex; align-items:center;
}
.conn .line{ height:2px; background:var(--hair-strong); width:100%; transform-origin:left center; }
.conn::after{
  content:""; position:absolute; right:6px; top:50%;
  width:8px; height:8px; border-top:2px solid var(--ink-faint); border-right:2px solid var(--ink-faint);
  transform:translateY(-50%) rotate(45deg);
}

/* terminal node */
.terminal{
  flex:0 0 auto; align-self:stretch; display:flex; align-items:center; gap:16px;
  background:var(--terra-fill); border:1px solid var(--terra-line);
  border-radius:12px; padding:20px 26px; min-width:230px;
}
.terminal .tm-check{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  border:2px solid var(--terra-line); display:flex; align-items:center; justify-content:center; color:var(--terra-line);
}
.terminal .tm-label{ font-size:24px; font-weight:600; color:var(--terra-ink); line-height:1.12; }
.terminal .tm-sub{ font-size:var(--type-small); color:var(--terra-line); }

/* category color binding */
.stage.cat-blue{ --cat-fill:var(--blue-fill); --cat-line:var(--blue-line); }
.stage.cat-green{ --cat-fill:var(--green-fill); --cat-line:var(--green-line); }
.stage.cat-amber{ --cat-fill:var(--amber-fill); --cat-line:var(--amber-line); }
.stage.cat-violet{ --cat-fill:var(--violet-fill); --cat-line:var(--violet-line); }

/* ---- hidden (pre-reveal) state, only when animation is enabled ---- */
html[data-anim] .stage,
html[data-anim] .terminal{
  opacity:0; transform:translateY(26px) scale(.97);
  transition:opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
  transition-delay:calc(var(--n) * var(--reveal-step));
}
html[data-anim] .conn{
  opacity:0; transition:opacity 260ms ease; transition-delay:calc((var(--n) + .5) * var(--reveal-step));
}
html[data-anim] .conn .line{
  transform:scaleX(0); transition:transform 320ms var(--ease); transition-delay:calc((var(--n) + .5) * var(--reveal-step));
}

/* ---- revealed state ---- */
html[data-anim] .flow.play .stage,
html[data-anim] .flow.play .terminal{ opacity:1; transform:none; }
html[data-anim] .flow.play .conn{ opacity:1; }
html[data-anim] .flow.play .conn .line{ transform:scaleX(1); }

/* documents ribbon under the rail */
.docs-ribbon{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.docs-ribbon .dr-label{
  font-family:"IBM Plex Mono", monospace; font-size:var(--type-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); padding-right:6px;
}
.doc-chip{
  font-family:"IBM Plex Mono", monospace; font-size:var(--type-small);
  background:var(--neutral-fill); border:1px solid var(--hair-strong);
  color:var(--neutral-ink); border-radius:7px; padding:9px 15px; white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  html[data-anim] .stage, html[data-anim] .terminal, html[data-anim] .conn{ opacity:1!important; transform:none!important; transition:none!important; }
  html[data-anim] .conn .line{ transform:scaleX(1)!important; }
}