/* ==========================================================================
   STEPS — numbered process timeline   (visual only)
   ==========================================================================
   A horizontal connector line with numbered dots sitting on it; each dot has a
   heading + short body below. Cornerstone "How a referral works" (For CPAs) and
   the switching flow. Reads left-to-right on desktop; on narrow screens it
   folds to a vertical spine down the left with the dots on it.

   Build: element_group `steps` with N children `text.step`, each:
       <span class="step__dot">1</span><h3>Introduce us.</h3><p>A two-line email is plenty.</p>

   The connector is drawn per-step (each dot draws a segment to the next), so it
   aligns whether or not the container carries the page gutter.
   ========================================================================== */
.steps {
    --steps-gap: clamp(1.5rem, 3vw, 3rem);
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: var(--steps-gap);
    margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.step {
    position: relative;
    container-type: inline-size;       /* the heading sizes to its column */
    /* connector: from this dot's centre (21px = half of the 43px dot) across the
       gap to the next dot. The last step draws a short tail to the band edge. */
    &::before {
        content: "";
        position: absolute; z-index: 0;
        top: 21px; left: 21px;
        right: calc(-1 * var(--steps-gap));
        border-top: 1px solid var(--prime);
        pointer-events: none;
    }
    &:last-child::before { right: 0; }
}

.step__dot {
    display: flex; align-items: center; justify-content: center;
    width: 43px; height: 43px; border-radius: 50%;
    background: var(--prime); color: var(--white);
    font-family: var(--type-body); font-weight: 600;   /* every board: 20px / 600 */
    font-size: 1.25rem; line-height: 1;
    position: relative; z-index: 1;    /* over the connector line */
}
.step {
    h3 {
        font-family: var(--type-display);
        /* 27px / 500, smaller as the columns narrow, so a two-word heading
           doesn't break a word per line (Switching's five steps, Bob 13 Oct) */
        font-size: clamp(1.05rem, 10cqi, 1.6875rem);
        color: #11161B; line-height: 1.15;
        margin: clamp(1.2rem, 2.2vw, 1.6rem) 0 0.35em;
    }
    p {
        margin: 0; color: var(--body);
        font-size: clamp(0.875rem, 8.5cqi, 1.1875rem);    /* 19px, less in a narrow column */
        line-height: 1.5;
    }
}

/* On a dark band the heading + line flip to on-dark. */
.bg-ink .step::before, .bg-dark .step::before, .bg-prime .step::before { border-top-color: var(--hairline-on-dark); }
.bg-ink .step h3, .bg-dark .step h3, .bg-prime .step h3 { color: var(--white); }
.bg-ink .step p,  .bg-dark .step p,  .bg-prime .step p { color: rgba(255, 255, 255, 0.8); }

/* ---- Mobile: vertical spine on the left ------------------------------- */
@media only screen and (max-width: 700px) {
    .steps { grid-auto-flow: row; grid-auto-columns: auto; row-gap: var(--steps-gap); }
    .step { padding-left: 68px; min-height: 43px; }
    .step__dot { position: absolute; left: 0; top: 0; }
    .step::before {                 /* vertical connector down to the next dot */
        top: 21px; left: 21px; right: auto;
        bottom: calc(-1 * var(--steps-gap));
        width: 0; border-top: 0;
        border-left: 1px solid var(--prime);
    }
    .step:last-child::before { display: none; }
    .step h3 { margin-top: 0.15rem; font-size: 1.35rem; }
    .step p { font-size: 1.05rem; }
}

/* ---- Scroll-in: number, then text, then the line on to the next number ---
   The design reads the timeline left to right. Each step: its NUMBER fades in,
   then its heading and copy, then ITS connector draws rightward, and the
   moment that line arrives at the next dot, the next number fades in (John,
   8 Oct: "fade the number in first, then the text, then continue the line").
   One pass; no replay or reverse on scroll-up.

   The connector belongs to the step BEHIND it — `.step::before` runs from this
   dot's centre across the gap to the next dot — so step N's line starts after
   its number AND its text have faded in: `--step-in + 2 × fade`.

   Timing is three variables. `--step-pitch` is the beat from one number to
   the next and must equal 2 × fade + line, or the arrival drifts out of sync.

   Driven by `is-in` from fe_page.html.twig's observer and gated on
   `.js-reveal`, so with JS off or reduced motion every step renders complete
   and static. */
.js-reveal {
    .steps {
        --step-fade: 0.4s;
        --step-line: 0.35s;
        --step-pitch: 1.15s;          /* = number + text + line (John, 8 Oct) */
    }
    .steps .step__dot, .steps .step h3, .steps .step p { opacity: 0; }
    .steps .step::before {
        transform: scaleX(0);
        transform-origin: left center;
    }
    /* each step: the number fades in, then its text, then its line runs on to
       the next number (John, 8 Oct) */
    .steps.is-in .step__dot {
        animation: stepFadeIn var(--step-fade) ease both;
        animation-delay: var(--step-in);
    }
    .steps.is-in .step h3, .steps.is-in .step p {
        animation: stepFadeIn var(--step-fade) ease both;
        animation-delay: calc(var(--step-in) + var(--step-fade));
    }
    .steps.is-in .step::before {
        animation: stepLineDraw var(--step-line) linear both;
        animation-delay: var(--step-draw);
    }

    /* One beat per step. `--step-in` is when this dot appears; `--step-draw` is
       when its outgoing line starts, which is the instant the dot has landed. */
    .steps.is-in .step:nth-child(1) { --step-in: calc(0 * var(--step-pitch)); }
    .steps.is-in .step:nth-child(2) { --step-in: calc(1 * var(--step-pitch)); }
    .steps.is-in .step:nth-child(3) { --step-in: calc(2 * var(--step-pitch)); }
    .steps.is-in .step:nth-child(4) { --step-in: calc(3 * var(--step-pitch)); }
    .steps.is-in .step:nth-child(5) { --step-in: calc(4 * var(--step-pitch)); }
    .steps.is-in .step:nth-child(6) { --step-in: calc(5 * var(--step-pitch)); }
    .steps.is-in .step { --step-draw: calc(var(--step-in) + 2 * var(--step-fade)); }
}

@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes stepLineDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes stepLineDrawY {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
/* Mobile folds the connector to a vertical spine, so it draws downward. A
   SECOND keyframe name rather than redefining `stepLineDraw` inside the query:
   a media-scoped `@keyframes` override is legal but relies on the engine
   scoping it correctly, and switching animation-name cannot be misread. */
@media only screen and (max-width: 700px) {
    .js-reveal .steps .step::before {
        transform: scaleY(0);
        transform-origin: top center;
    }
    .js-reveal .steps.is-in .step::before { animation-name: stepLineDrawY; }
}