/* ========================================
   STEADFAST RACING - CIRCUIT BACKGROUND

   An abstract circuit map sits behind each section with a lime dot
   running laps around it. The dot is a single round line-cap on a
   near-zero dash, moved by animating stroke-dashoffset; every path
   carries pathLength="100" so the dash maths is identical whatever
   the circuit's real length.

   The trail sits directly behind the dot: dasharray 5/95 offset by
   4.99 puts its leading edge exactly on the dot, so the two stay
   locked as long as both animate through the same 100-unit delta.
======================================== */

.sr-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Short sections whose content panel spans the full container would hide the
   circuit's left and right ends, parking the dot out of sight for a third of
   every lap. Bleeding the circuit past the container puts those ends back in
   the margins. */
.sr-track--wide {
    inset: -10% -18%;
    width: auto;
    height: auto;
}

@media (max-width: 700px) {
    .sr-track--wide { inset: -6% -10%; }
}

.sr-track path {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.sr-track__line {
    stroke: rgba(255,255,255,.075);
    stroke-width: 1;
}

/* Faint kerb echo just inside the racing line. */
.sr-track__kerb {
    stroke: rgba(169,193,199,.05);
    stroke-width: 1;
    stroke-dasharray: 2 10;
}

.sr-track__trail,
.sr-track__dot,
.sr-track__glow {
    stroke-linecap: round;
    animation-duration: var(--sr-lap, 28s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.sr-track__trail {
    stroke: rgba(97,151,178,.3);
    stroke-width: 3;
    stroke-dasharray: 5 95;
    stroke-dashoffset: 4.99;
    animation-name: sr-lap-trail;
}

.sr-track__glow {
    stroke: rgba(97,151,178,.16);
    stroke-width: 20;
    stroke-dasharray: .01 99.99;
    animation-name: sr-lap-dot;
}

.sr-track__dot {
    stroke: var(--sr-lime);
    stroke-width: 9;
    stroke-dasharray: .01 99.99;
    animation-name: sr-lap-dot;
}

@keyframes sr-lap-dot {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -100; }
}

@keyframes sr-lap-trail {
    from { stroke-dashoffset: 4.99; }
    to   { stroke-dashoffset: -95.01; }
}

/* Anticlockwise variant, so adjacent sections never run in lockstep. */
.sr-track--reverse .sr-track__dot,
.sr-track--reverse .sr-track__glow { animation-name: sr-lap-dot-reverse; }
.sr-track--reverse .sr-track__trail { animation-name: sr-lap-trail-reverse; }

@keyframes sr-lap-dot-reverse {
    from { stroke-dashoffset: -100; }
    to   { stroke-dashoffset: 0; }
}

@keyframes sr-lap-trail-reverse {
    from { stroke-dashoffset: -95.01; }
    to   { stroke-dashoffset: 4.99; }
}

/* Parked while the section is off screen. Set by sr.js; without JS the
   laps simply keep running, which is the harmless default. */
.sr-tech-bg.is-parked .sr-track__dot,
.sr-tech-bg.is-parked .sr-track__glow,
.sr-tech-bg.is-parked .sr-track__trail { animation-play-state: paused; }

@media (max-width: 700px) {
    .sr-track__kerb,
    .sr-track__glow { display: none; }

    .sr-track__dot { stroke-width: 7; }
    .sr-track__trail { stroke-width: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-track__trail,
    .sr-track__glow { display: none !important; }

    .sr-track__dot { animation: none !important; }
}