/* ==========================================================================
   TIMELINE — numbered process timeline
   ==========================================================================
   A horizontal connector with numbered dots on it; each dot has a heading and
   a short line below. Under 700px it folds to a vertical spine on the left.
   (steps.css is the other process component: numbered tiles/rows.)

   Build: element_group `timeline` with N text children `timeline__step`:
       <span class="timeline__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.
   ========================================================================== */
.timeline {
    --timeline-gap: clamp(1.5rem, 3vw, 3rem);
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: var(--timeline-gap);
    margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.timeline__step {
    position: relative;
    /* 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(--timeline-gap));
        border-top: 1px solid var(--prime);
        pointer-events: none;
    }
    &:last-child::before { right: 0; }
}

.timeline__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: 500;
    font-size: 1.25rem; line-height: 1;
    position: relative; z-index: 1;    /* over the connector line */
}
.timeline__step {
    h3 {
        font-family: var(--type-display); font-weight: 700;
        font-size: clamp(1.35rem, 2vw, 1.6875rem);
        color: var(--text-strong); line-height: 1.15;
        margin: clamp(1.2rem, 2.2vw, 1.6rem) 0 0.35em;
    }
    p {
        margin: 0; color: var(--text-body);
        font-size: clamp(1.05rem, 1.25vw, 1.1875rem);
        line-height: 1.5; max-width: 34ch;
    }
}

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

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

/* ---- Scroll-in: the line draws, then the dot it reaches fades in -------
   Step 1's dot and copy fade in, ITS connector draws, and the moment the line
   reaches step 2's dot, step 2 fades in. One pass.

   The connector belongs to the step BEHIND it, so step N's line delay is its
   own fade delay plus the fade duration. `--timeline-pitch` is the beat from one
   dot to the next and must equal fade + line, or the arrival drifts.

   Driven by `is-in` from the j_reveal template and gated on `.js-reveal`, so
   with JS off or reduced motion every step renders complete and static. */
.js-reveal {
    .timeline {
        --timeline-fade: 0.4s;
        --timeline-line: 0.35s;
        --timeline-pitch: 0.75s;          /* = fade + line */
    }
    .timeline .timeline__dot, .timeline .timeline__step h3, .timeline .timeline__step p { opacity: 0; }
    .timeline .timeline__step::before {
        transform: scaleX(0);
        transform-origin: left center;
    }
    .timeline.is-in .timeline__dot, .timeline.is-in .timeline__step h3, .timeline.is-in .timeline__step p {
        animation: timelineFadeIn var(--timeline-fade) ease both;
        animation-delay: var(--step-in);
    }
    .timeline.is-in .timeline__step::before {
        animation: timelineLineDraw var(--timeline-line) linear both;
        animation-delay: var(--step-draw);
    }

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

@keyframes timelineFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes timelineLineDraw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
/* Mobile draws downward: a second keyframe name rather than redefining the
   first inside the query, so the switch cannot be misread. */
@keyframes timelineLineDrawY {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
@media only screen and (max-width: 700px) {
    .js-reveal .timeline .timeline__step::before {
        transform: scaleY(0);
        transform-origin: top center;
    }
    .js-reveal .timeline.is-in .timeline__step::before { animation-name: timelineLineDrawY; }
}