/* =============================================================
   timeline.css — Horizontal (home) & vertical (process) flows
   ============================================================= */

/* Horizontal process preview */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-16);position:relative;margin-top:var(--space-48)}
.flow__line{position:absolute;top:22px;left:8%;right:8%;height:2px;background:var(--border-subtle);z-index:0}
.flow__line-fill{position:absolute;inset:0;width:0;background:var(--grad-steel);
  transition:width 1.2s var(--ease-out)}
.flow.is-visible .flow__line-fill{width:100%}
.flow__step{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:var(--space-12)}
.flow__node{width:46px;height:46px;border-radius:50%;background:var(--bg-page);
  border:2px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:var(--fw-semibold);color:var(--text-secondary);
  transition:border-color var(--dur-base),color var(--dur-base),background var(--dur-base)}
.flow.is-visible .flow__node{border-color:var(--accent);color:#fff;background:var(--grad-steel)}
.flow__label{font-weight:var(--fw-semibold);font-size:var(--fs-body-sm)}
.flow__desc{color:var(--text-secondary);font-size:var(--fs-body-sm)}

/* Vertical timeline */
.tl{position:relative;margin-top:var(--space-48);padding-left:var(--space-48)}
.tl__rail{position:absolute;left:22px;top:0;bottom:0;width:2px;background:var(--border-subtle)}
.tl__rail-fill{position:absolute;inset:0;height:0;background:var(--grad-steel);
  transition:height 1.4s var(--ease-out)}
.tl.is-visible .tl__rail-fill{height:100%}
.tl__step{position:relative;padding-bottom:var(--space-64)}
.tl__step:last-child{padding-bottom:0}
.tl__node{position:absolute;left:calc(-1 * var(--space-48) + 12px);top:0;width:22px;height:22px;
  border-radius:50%;background:var(--bg-page);border:2px solid var(--border-subtle);
  transition:border-color var(--dur-base),background var(--dur-base)}
.tl.is-visible .tl__node{border-color:var(--accent);background:var(--grad-steel)}
.tl__num{font-family:var(--font-mono);color:var(--text-brand);font-size:var(--fs-body-sm);letter-spacing:.08em}
.tl__title{font-size:var(--fs-h4);font-weight:var(--fw-semibold);margin-block:var(--space-8)}
.tl__text{color:var(--text-secondary);max-width:56ch}