/* Trajectory: scroll-driven. Breaks out of the reading column for one wide moment. */

.trajectory {
    /* widen from the 42rem column to up to 68rem, full-bleed on small screens */
    margin-inline: calc((100% - min(68rem, 100vw)) / 2);
}

.trajectory-stage { padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 2.5rem); }

.trajectory-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    max-width: 62rem;
    margin: 0 auto;
}

/* ---------- Copy ---------- */
.trajectory-steps { list-style: none; display: grid; gap: 2.5rem; }

.step-index {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.step-index span { color: var(--faint); margin-right: 0.6rem; }

.trajectory-step h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 0.9rem; }
.trajectory-step p { color: var(--muted); }
.trajectory-step .step-source {
    margin-top: 1.25rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Figure ---------- */
.trajectory-figure svg { display: block; width: 100%; height: auto; overflow: visible; }

.tj-unit { fill: var(--ink); }
.tj-unit-accent { fill: var(--accent); }

.tj-axis, .tj-tick, .tj-line, .tj-trend, .tj-leader, .tj-crop, .tj-ring, .tj-join, .tj-echo, .tj-route { fill: none; stroke-linecap: square; }
.tj-axis, .tj-tick { stroke: var(--faint); stroke-width: 1; }
.tj-line { stroke: var(--faint); stroke-width: var(--tj-hair, 1); }
.tj-trend { stroke: var(--ink); stroke-width: 1.25; opacity: 0.55; }
.tj-ring, .tj-leader { stroke: var(--accent); stroke-width: 1; }
.tj-ring { stroke-width: var(--tj-hair, 1); }
.tj-crop { stroke: var(--ink); stroke-width: 1.25; }
.tj-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* operations: rings mark where workflows combine; the signal and echo run once per arrival */
.tj-join { stroke: var(--faint); stroke-width: var(--tj-hair, 1); }
.tj-echo { stroke: var(--accent); stroke-width: var(--tj-hair, 1); opacity: 0; }
.tj-route { stroke: none; }
.tj-signals circle { fill: var(--accent); opacity: 0; }

.tj-note {
    font-family: var(--sans);
    font-size: var(--tj-note, 10.5px);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--muted);
}
.tj-note-accent { fill: var(--accent); font-weight: 600; }

/* static (reduced motion): all four stages listed, the finished figure stays beside them */
.trajectory:not(.is-live) .trajectory-figure { position: sticky; top: 6rem; align-self: start; }

/* ---------- Progress rail ---------- */
.trajectory-rail { display: none; }

/* ---------- Live (JS, motion allowed): pin the stage and scrub through it ---------- */
.trajectory.is-live { height: 420svh; }

/* the pinned stage is capped in height and centered below the header, so tall screens
   don't open a large empty gap above and below the figure */
.is-live .trajectory-stage {
    --stage-h: min(calc(100svh - var(--header-h, 0px)), 50rem);
    position: sticky;
    top: calc(var(--header-h, 0px) + (100svh - var(--header-h, 0px) - var(--stage-h)) / 2);
    height: var(--stage-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.5rem, 4vh, 3rem);
    padding-block: clamp(1.5rem, 4vh, 3rem);
    overflow: hidden;
}

.is-live .trajectory-steps { gap: 0; }
.is-live .trajectory-step { grid-area: 1 / 1; will-change: opacity, transform; }
.is-live .trajectory-figure svg { max-height: calc(var(--stage-h) - 10rem); margin: 0 auto; }

.is-live .trajectory-rail {
    display: block;
    position: relative;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
}
.trajectory-rail ol {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
}
.trajectory-rail li {
    padding-top: 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    transition: color 0.4s ease;
}
.trajectory-rail li.is-active { color: var(--ink); }
.trajectory-rail-fill {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
}

/* ---------- Small screens: figure above copy, shorter scroll ---------- */
@media (max-width: 760px) {
    .trajectory-inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .trajectory-figure { order: -1; }
    .trajectory:not(.is-live) .trajectory-figure { position: static; }

    .trajectory.is-live { height: 360svh; }
    .is-live .trajectory-figure svg { max-height: 40svh; }
    .is-live .trajectory-step h3 { font-size: 1.45rem; margin-bottom: 0.5rem; }
    .is-live .trajectory-step p { font-size: 0.98rem; line-height: 1.6; }
    .is-live .trajectory-step .step-source { margin-top: 0.75rem; padding-top: 0.6rem; }
    .is-live .trajectory-rail { display: none; } /* the stage copy already names each step */
}