/* Workflow page — V3.0 design (Figma 18:415).
   The five steps are a pinned section; everything else scrolls normally. */

/* ------------------------------------------------------------------- Hero */

.wf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

/* ------------------------------------------------------------------ Intro */

/* No bottom padding: the pinned section below centres its first step inside a
   full viewport, so it already opens with a screenful of space. --space-8 on top
   of that read as a hole between the two. */
.wf-intro { padding-block-end: 0; }

.wf-intro-p {
  margin-block-start: var(--space-4);
  max-inline-size: 78ch;
  color: rgb(5 50 37 / 0.78);
}

/* --------------------------------------------------------- Pinned steps ---
   Height drives how long the pin lasts. The sticky child is one viewport tall,
   so the pin holds for (height - 100svh). Scrubbing runs between the five steps,
   which is FOUR transitions — hence 4, not 5. --wf-advance is the scroll it
   takes to get from one step to the next, and is the only knob for pacing. */

.wf-steps {
  --wf-advance: 90svh;
  position: relative;
  block-size: calc(100svh + 4 * var(--wf-advance));
  background: var(--bg);
}

.wf-pin {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.wf-grid {
  inline-size: 100%;
  display: grid;
  min-block-size: 0;
}

/* Every row shares one grid cell, so the outgoing and incoming steps occupy
   exactly the same space and nothing reflows as the step changes. */
.wf-row {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  align-items: center;
  gap: var(--space-6);
  min-block-size: 0;
}

/* ---- The copy ----
   Everything below is SCRUBBED: --p is this row's presence (0..1), written by
   workflow.js on every scroll frame, and CSS derives the rest with calc(). No
   transitions — a transition would run on its own clock and fight the scroll,
   which is exactly what made the steps look like they snapped. */
.wf-copy {
  opacity: var(--p, 0);
  transform: translateY(calc((1 - var(--p, 0)) * 2.5rem));
  pointer-events: none;
}

.wf-row.is-active .wf-copy { pointer-events: auto; }

.wf-num {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--green-600);
}

.wf-title {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.wf-desc {
  margin: var(--space-3) 0 0;
  max-inline-size: 56ch;
  color: rgb(5 50 37 / 0.78);
}

/* ---- The sketch ---- */

.wf-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 0;
  color: var(--green-700);
}

.wf-art svg {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 58svh;
  display: block;
}

/* Each path owns a slice of the row's progress: --start is where it begins and
   --n is the number of paths, so (p - start) * n is that path's own 0..1. The
   strokes therefore lay down one after another as you scroll — a hand redrawing
   the sketch — and retract in reverse when you scroll back up.
   --len is the path's measured length, so dashoffset = len means undrawn. */
.wf-art path {
  stroke-dasharray: var(--len, 0px);
  stroke-dashoffset: calc(
    var(--len, 0px) * (1 - clamp(0, (var(--p, 0) - var(--start, 0)) * var(--n, 1), 1))
  );
}

/* Before JS has measured anything, show the first step drawn rather than an
   empty frame — this is also the no-JS state. */
.wf-steps:not(.is-ready) .wf-art path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.wf-steps:not(.is-ready) .wf-row:not(.is-active) { opacity: 0; }

.wf-steps:not(.is-ready) .wf-row.is-active .wf-copy {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------- Responsive --- */

@media (max-width: 48rem) {
  /* The pin stays on a phone, but the row becomes one column: copy on top,
     sketch centred beneath it. Both still hold still while the step advances. */
  .wf-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-5);
    align-content: center;
    text-align: center;
  }

  /* The pinned area is a full 100svh with its content centred, and stacked the
     row is tall enough to fill it, so the step number sat right under the fixed
     nav. Clear the header before centring what is left. */
  .wf-pin {
    padding-block-start: calc(var(--space-7) + 1.5rem);
    align-items: start;
  }

  .wf-desc { margin-inline: auto; }
  .wf-art { align-items: start; }
  .wf-art svg { max-block-size: 32svh; margin-inline: auto; }

  .wf-hero-actions .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
}

/* --------------------------------------------------------------- Motion --- */

@media (prefers-reduced-motion: reduce) {
  /* No pin and no drawing: the five rows simply stack and every sketch is drawn.
     The section height has to collapse too, or the page keeps five screens of
     empty scroll where the pin used to be. */
  .wf-steps { block-size: auto; }
  .wf-pin { position: static; block-size: auto; }

  .wf-grid { display: block; padding-block: var(--space-7); }

  .wf-row {
    grid-area: auto;
    margin-block-end: var(--space-7);
  }

  .wf-copy {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .wf-art path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .wf-steps:not(.is-ready) .wf-row:not(.is-active) { opacity: 1; }
}