/* ============================================================
   ROUTE LINE — the project's single motion primitive. Spec §2.

   Drawn from Haroon's logo: a solid line, a dashed segment, and a
   pin. One technique — animating stroke-dashoffset — reused
   everywhere it appears.

   The geometry carries the meaning on its own, so with motion
   disabled it is a static diagram that still communicates
   position. The animation only replays the drawing.
   ============================================================ */

.route-line {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

.route-line svg {
    display: block;
    overflow: visible;
}

/* Origin: open centre, so it reads as a starting point rather than
   another pin. */
.route-line-origin {
    fill: none;
    stroke: var(--accent);
}

/* Distance covered. */
.route-line-travelled {
    stroke: var(--accent);
}

/* Distance remaining. --ink-dim is 5.87:1 on the shell, so the dashed
   segment stays legible rather than becoming decorative texture. */
.route-line-remaining {
    stroke: var(--ink-dim);
}

/* Destination. */
.route-line-pin {
    fill: var(--accent);
}

/* ---- Drawing -----------------------------------------------
   The travelled path carries its own length in --route-len, set
   inline by the partial, so the offset animation needs no JS
   measurement of getTotalLength(). --t-slow, per §3's scale. */

.route-line--animate .route-line-travelled {
    stroke-dashoffset: var(--route-len, 0);
    animation: route-draw var(--t-slow) var(--ease) forwards;
}

@keyframes route-draw {
    to { stroke-dashoffset: 0; }
}

/* The remaining segment and the pin arrive after the line reaches
   them, not before. */
.route-line--animate .route-line-remaining,
.route-line--animate .route-line-pin {
    opacity: 0;
    animation: route-arrive var(--t-quick) var(--ease) forwards;
    animation-delay: var(--t-slow);
}

@keyframes route-arrive {
    to { opacity: 1; }
}

/* ---- Interaction -------------------------------------------
   §2: "Focus and hover: the dashed segment activates." The
   remaining segment brightens toward --ink, which is a change in
   value rather than hue, so it does not compete with the lime
   state signal. */

.route-line-host:hover .route-line-remaining,
.route-line-host:focus-visible .route-line-remaining,
a:hover .route-line-remaining,
a:focus-visible .route-line-remaining {
    stroke: var(--ink);
    transition: stroke var(--t-quick) var(--ease);
}

/* ---- Section transitions -----------------------------------
   A vertical route line between sections, per §2's "the line
   extends down the page as you scroll". Scroll-driven, and the
   only scroll-driven element on the site — text never moves. */

.route-divider {
    display: flex;
    justify-content: center;
    padding: var(--block-gap) 0;
}

/* ---- Reduced motion ----------------------------------------
   §6 honours prefers-reduced-motion for real: the line does not
   animate at all, it is simply already drawn. No slowed-down
   version, no partial animation. */

@media (prefers-reduced-motion: reduce) {
    .route-line--animate .route-line-travelled {
        stroke-dashoffset: 0;
        animation: none;
    }
    .route-line--animate .route-line-remaining,
    .route-line--animate .route-line-pin {
        opacity: 1;
        animation: none;
    }
}

/* In Lite the primitive renders as the static diagram, same rule. */
body.is-lite .route-line--animate .route-line-travelled {
    stroke-dashoffset: 0;
    animation: none;
}
body.is-lite .route-line--animate .route-line-remaining,
body.is-lite .route-line--animate .route-line-pin {
    opacity: 1;
    animation: none;
}