/* How it works: a light-trail route drawn on scroll, with a vehicle marker travelling it. */
.azb-route { position: relative; padding-block: var(--s-4); }
.azb-route__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.azb-route__base { fill: none; stroke: var(--azb-line); stroke-width: 2; }
.azb-route__glow { fill: none; stroke: var(--azb-accent); stroke-width: 12; opacity: 0.14; stroke-linecap: round; }
.azb-route__line { fill: none; stroke: var(--azb-accent); stroke-width: 2.5; stroke-linecap: round; }
.azb-route__car { opacity: 0; }
.azb-route.is-ready .azb-route__car { opacity: 1; }
.azb-route__car rect { fill: var(--azb-ink); }
.azb-route__car circle { fill: var(--azb-accent-hi); }

.azb-route__stops { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3.5rem, 9vw, 7.5rem); }
.azb-route__stop { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-5); align-items: start; max-width: 34rem; }
.azb-route__dot { width: 20px; height: 20px; margin: 6px auto 0; border-radius: var(--radius-pill); background: var(--azb-bg); border: 2px solid color-mix(in srgb, var(--azb-ink) 30%, transparent); transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
.azb-route__copy h3 { margin: 0 0 var(--s-2); font: 700 var(--fs-h3)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.azb-route__copy p { margin: 0; color: var(--azb-muted); max-width: 40ch; }
.azb-route.is-ready .azb-route__stop .azb-route__copy { opacity: 0.45; transition: opacity var(--dur-reveal) var(--ease-out); }
.azb-route .azb-route__stop.is-lit .azb-route__copy { opacity: 1; }
.azb-route__stop.is-lit .azb-route__dot { background: var(--azb-accent); border-color: var(--azb-accent); box-shadow: 0 0 0 7px var(--azb-accent-soft); }

@media (min-width: 1024px) {
	.azb-route__stop { width: 44%; }
	.azb-route__stop:nth-child(even) { margin-left: 56%; }
}
@media (prefers-reduced-motion: reduce) {
	.azb-route.is-ready .azb-route__stop .azb-route__copy { opacity: 1; }
}