#flow{position:relative;height:240vh}
.scrolly-stage{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.4rem,4vh,2.6rem);text-align:center;
  padding:2rem clamp(1.2rem,4vw,2rem);
}
.scrolly-eyebrow{position:relative;z-index:2;font-family:var(--mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--coral)}

.scrolly-head{position:relative;z-index:2;display:grid;font-family:var(--display);font-weight:var(--w-display);font-size:var(--text-3xl);line-height:1.04;letter-spacing:-.02em;max-width:14ch}
.scrolly-head>span{grid-area:1/1;transition:opacity var(--duration-slow) var(--ease),transform var(--duration-slow) var(--ease)}
.flip-before{color:var(--muted);opacity:0;transform:translateY(-.35em)}
.flip-after{color:var(--ink);opacity:1;transform:none}
#flow[data-stage="0"] .flip-before,
#flow[data-stage="1"] .flip-before{opacity:1;transform:none}
#flow[data-stage="0"] .flip-after,
#flow[data-stage="1"] .flip-after{opacity:0;transform:translateY(.35em)}

.flow-viz{position:relative;z-index:1;width:min(820px,94vw);height:300px}
.frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.7rem;
  transition:opacity var(--duration-slow) var(--ease),transform var(--duration-slow) var(--ease)}

/* Chaos chips are positioned absolutely from the true center so each chip's
   scatter offset is exact regardless of how many chips exist — flex-wrap
   would compound each translate on top of an already-spread row position. */
.frame-chaos{opacity:0;display:block}
.frame-chaos .chip{
  position:absolute;left:50%;top:50%;white-space:nowrap;
  font-family:var(--mono);font-size:var(--text-sm);color:var(--ink);
  background:var(--surface);border:1px solid color-mix(in oklab,var(--amber) 35%,var(--line));
  border-radius:var(--r-sm);padding:.5rem .8rem;box-shadow:var(--elev-1);
  transition:transform var(--duration-slow) var(--ease),opacity var(--duration-slow) var(--ease);
  transform:translate(-50%,-50%);
}
#flow[data-stage="0"] .frame-chaos{opacity:1}
/* Full-viewport scatter: offsets in vw/vh fan the chips across the whole
   screen from the viz center. The heading sits above (z-index) and stays
   readable. Narrow chips take the far edges; wide chips stay mid-screen so
   nothing clips off the viewport. Scatter holds through stage 1 (chips fade
   out in place); below 960px this is overridden by a readable cluster. */
#flow[data-stage="0"] .frame-chaos .c1,#flow[data-stage="1"] .frame-chaos .c1{transform:translate(-50%,-50%) rotate(-8deg) translate(-38vw,-40vh)}
#flow[data-stage="0"] .frame-chaos .c2,#flow[data-stage="1"] .frame-chaos .c2{transform:translate(-50%,-50%) rotate(6deg) translate(-14vw,-47vh)}
#flow[data-stage="0"] .frame-chaos .c3,#flow[data-stage="1"] .frame-chaos .c3{transform:translate(-50%,-50%) rotate(-5deg) translate(6vw,10vh)}
#flow[data-stage="0"] .frame-chaos .c4,#flow[data-stage="1"] .frame-chaos .c4{transform:translate(-50%,-50%) rotate(10deg) translate(38vw,-40vh)}
#flow[data-stage="0"] .frame-chaos .c5,#flow[data-stage="1"] .frame-chaos .c5{transform:translate(-50%,-50%) rotate(-12deg) translate(-26vw,-24vh)}
#flow[data-stage="0"] .frame-chaos .c6,#flow[data-stage="1"] .frame-chaos .c6{transform:translate(-50%,-50%) rotate(7deg) translate(40vw,-8vh)}
#flow[data-stage="0"] .frame-chaos .c7,#flow[data-stage="1"] .frame-chaos .c7{transform:translate(-50%,-50%) rotate(9deg) translate(24vw,-22vh)}
#flow[data-stage="0"] .frame-chaos .c8,#flow[data-stage="1"] .frame-chaos .c8{transform:translate(-50%,-50%) rotate(-7deg) translate(-34vw,18vh)}
#flow[data-stage="0"] .frame-chaos .c9,#flow[data-stage="1"] .frame-chaos .c9{transform:translate(-50%,-50%) rotate(11deg) translate(20vw,28vh)}
#flow[data-stage="0"] .frame-chaos .c10,#flow[data-stage="1"] .frame-chaos .c10{transform:translate(-50%,-50%) rotate(-10deg) translate(40vw,4vh)}
#flow[data-stage="0"] .frame-chaos .c11,#flow[data-stage="1"] .frame-chaos .c11{transform:translate(-50%,-50%) rotate(-6deg) translate(-20vw,6vh)}
#flow[data-stage="0"] .frame-chaos .c12,#flow[data-stage="1"] .frame-chaos .c12{transform:translate(-50%,-50%) rotate(8deg) translate(26vw,-40vh)}
#flow[data-stage="0"] .frame-chaos .c13,#flow[data-stage="1"] .frame-chaos .c13{transform:translate(-50%,-50%) rotate(5deg) translate(-40vw,4vh)}
#flow[data-stage="0"] .frame-chaos .c14,#flow[data-stage="1"] .frame-chaos .c14{transform:translate(-50%,-50%) rotate(-9deg) translate(38vw,22vh)}
#flow[data-stage="0"] .frame-chaos .c15,#flow[data-stage="1"] .frame-chaos .c15{transform:translate(-50%,-50%) rotate(4deg) translate(28vw,14vh)}
#flow[data-stage="1"] .frame-chaos{opacity:.13}

.frame-pipe{opacity:1;transform:none}
#flow[data-stage="0"] .frame-pipe{opacity:0;transform:scale(.94)}
#flow[data-stage="1"] .frame-pipe{opacity:.55;transform:scale(.98)}
.frame-pipe .pnode{font-family:var(--mono);font-size:var(--text-sm);color:var(--ink);background:var(--surface);border:1px solid var(--line-bright);border-radius:var(--r-pill);padding:.5rem .9rem;white-space:nowrap}
.frame-pipe .pnode:first-child{color:#fff;background:var(--coral-strong);border-color:var(--coral-strong)}
.frame-pipe .pnode.ok{color:var(--bg);background:var(--green);border-color:var(--green);font-weight:700}
.frame-pipe .pwire{width:clamp(16px,4vw,44px);height:2px;background:linear-gradient(90deg,var(--coral),var(--green));border-radius:2px}

.scrolly-cap{position:relative;z-index:2;font-family:var(--mono);font-size:var(--text-xs);color:var(--faint);display:flex;align-items:center;gap:.5rem;
  transition:opacity var(--duration-normal) var(--ease),visibility var(--duration-normal)}
.scrolly-cap .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 8px var(--coral)}
/* Once the pipeline is fully resolved (stage 2: Trigger→Validate→Process→Done), drop the "scroll" prompt. */
#flow[data-stage="2"] .scrolly-cap{opacity:0;visibility:hidden}

@media(prefers-reduced-motion:reduce){
  #flow{height:auto}
  .scrolly-stage{position:static;height:auto;min-height:56vh}
  .flow-viz{height:auto;min-height:120px}
  .frame-chaos{display:none}
  .frame-pipe{position:relative;opacity:1;transform:none}
  .scrolly-head>span{transition:none}
}
/* Below the scatter's minimum width, the wide-spread chips would clip off
   the viewport edges. Switch chaos to a readable wrapped cluster instead of
   shrinking the phrases into illegible specks. */
@media(max-width:960px){
  .flow-viz{width:94vw;height:340px}
  .frame-chaos{display:flex;flex-wrap:wrap;align-content:center;gap:.45rem .5rem;padding:0 .4rem}
  .frame-chaos .chip{position:static;transform:none !important;font-size:var(--text-xs)}
}
@media(max-width:560px){
  .flow-viz{height:360px}
  .frame-pipe{flex-direction:column}
  .frame-pipe .pwire{width:2px;height:14px}
}