/* Flow: a hairline joins the three step markers (horizontal wide, vertical when the steps stack). Fully drawn by default, so no JS and reduced motion show the final state. */

/* Layout: markers sit under the numbers; a segment runs from each marker to the next. Segment and marker are pseudo-elements, so the markup is unchanged. */
#flow .steps { --gap: clamp(24px, 4vw, 48px); view-timeline: --flow block; }
#flow .steps li { padding-top: 52px; }
#flow .steps li::after { display: block; content: ""; position: absolute; top: 34px; left: 0; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--main); background: var(--main); }
#flow .steps li:not(:last-child) h3::before { content: ""; position: absolute; top: 38px; left: 4px; width: calc(100% + var(--gap)); height: 1px; background: var(--line); transform-origin: left center; }

/* Narrow: the steps stack, so markers move to the left edge and the segments run down. */
@media (max-width: 720px) {
  #flow .steps li { padding: 40px 0 0 32px; }
  #flow .steps li::before { left: 32px; }
  #flow .steps li::after { top: 10px; }
  #flow .steps li:not(:last-child) h3::before { top: 14px; left: 4px; width: 1px; height: calc(100% + 28px); transform-origin: center top; }
}

/* Draw-in. Scroll-driven where supported; otherwise flow-draw.js arms .flow-ready and adds .flow-in once. Transform and colour only. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes flow-x { from { transform: scaleX(0); } }
  @keyframes flow-y { from { transform: scaleY(0); } }
  @keyframes flow-dot { from { background: transparent; border-color: var(--plain-edge); } }

  @supports (animation-timeline: view()) {
    #flow .steps li::after, #flow .steps li h3::before { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --flow; }
    #flow .steps li h3::before { animation-name: flow-x; }
    #flow .steps li::after { animation-name: flow-dot; }
    #flow .steps li:nth-child(1)::after { animation-range: entry 20% entry 45%; }
    #flow .steps li:nth-child(1) h3::before { animation-range: entry 30% cover 30%; }
    #flow .steps li:nth-child(2)::after { animation-range: cover 26% cover 34%; }
    #flow .steps li:nth-child(2) h3::before { animation-range: cover 30% cover 50%; }
    #flow .steps li:nth-child(3)::after { animation-range: cover 46% cover 54%; }
    @media (max-width: 720px) { #flow .steps li h3::before { animation-name: flow-y; } }
  }

  @supports not (animation-timeline: view()) {
    #flow .steps li::after, #flow .steps li h3::before { transition: transform 350ms var(--ease-out), background-color 150ms ease-out, border-color 150ms ease-out; }
    #flow .steps.flow-ready:not(.flow-in) li::after { background: transparent; border-color: var(--plain-edge); }
    #flow .steps.flow-ready:not(.flow-in) li h3::before { transform: scaleX(0); }
    @media (max-width: 720px) { #flow .steps.flow-ready:not(.flow-in) li h3::before { transform: scaleY(0); } }
    #flow .steps li:nth-child(1)::after { transition-delay: 0ms; }
    #flow .steps li:nth-child(1) h3::before { transition-delay: 100ms; }
    #flow .steps li:nth-child(2)::after { transition-delay: 400ms; }
    #flow .steps li:nth-child(2) h3::before { transition-delay: 450ms; }
    #flow .steps li:nth-child(3)::after { transition-delay: 750ms; }
  }
}