/* TELOS #72 on a lap: a track, a stop per round (the season) or per session (a race weekend), the car riding it.
 * Used by /gp (the season, one lap + the next weekend) and /gp/<race> while the weekend is still to come.
 * Markup: gp-hub.php (season) and includes/weekend_lap.php (weekend); weekend states and car position: assets/telos-weekend-lap.js. */
.slap{position:relative;margin:6px 0 4px;padding:70px 6px 46px}
.slap-track{position:relative;height:3px;border-radius:2px;background:rgba(255,255,255,.1);--cx:0%}
.slap-fill{position:absolute;left:0;top:0;bottom:0;width:var(--cx);border-radius:2px;background:linear-gradient(90deg,rgba(0,242,255,0),#00f2ff);box-shadow:0 0 14px rgba(0,242,255,.6);animation:slapFill 1.9s cubic-bezier(.2,.7,.2,1) both}
.slap-stop{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;display:block;z-index:2}
.slap-stop i{position:absolute;inset:4px;border-radius:50%;background:#05070b;border:2px solid rgba(255,255,255,.26);transition:transform .15s}
.slap-stop:hover i,.slap-stop:focus-visible i{transform:scale(1.5);border-color:#00f2ff}
.slap-stop.finished i{background:#00f2ff;border-color:#00f2ff;box-shadow:0 0 9px rgba(0,242,255,.75)}
.slap-stop.next i{border-color:#ffaa00;box-shadow:0 0 0 0 rgba(255,170,0,.6);animation:slapPulse 1.5s ease-out infinite}
.slap-stop.live i{background:#ff3b30;border-color:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.7);animation:slapPulseR 1.2s ease-out infinite}
.slap-car{position:absolute;left:var(--cx);bottom:12px;width:98px;height:auto;z-index:3;pointer-events:none;transform:translateX(-80%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.65));animation:slapDrive 1.9s cubic-bezier(.2,.7,.2,1) both}
.slap-flag{position:absolute;right:-2px;top:-30px;width:20px;height:26px;border-radius:2px;background:conic-gradient(#fff 25%,#0b0d10 0 50%,#fff 0 75%,#0b0d10 0) 0 0/10px 10px;opacity:.9}
.slap-ends{display:flex;justify-content:space-between;margin-top:24px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.45)}
.slap-ends b{color:#fff;font-weight:700}
/* the weekend: every stop is labelled, and one line says what is on now / next (filled in by telos-weekend-lap.js) */
.slap-wk{padding:62px 26px 8px}
.slap-lbl{position:absolute;left:50%;top:22px;transform:translateX(-50%);font:700 9.5px/1 'JetBrains Mono',monospace;font-style:normal;letter-spacing:1.2px;color:rgba(255,255,255,.42);white-space:nowrap;pointer-events:none}
.slap-stop.finished .slap-lbl{color:rgba(0,242,255,.85)}
.slap-stop.next .slap-lbl{color:#ffaa00}
.slap-stop.live .slap-lbl{color:#ff5a4f}
.slap-cap{margin:38px 0 0;text-align:center;font:700 11px/1.5 'JetBrains Mono',monospace;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.slap-cap:empty{display:none}
.slap-cap b{color:#fff}
.slap-cap .lv{color:#ff5a4f}
@keyframes slapFill{from{width:0}to{width:var(--cx)}}
@keyframes slapDrive{from{left:0}to{left:var(--cx)}}
@keyframes slapPulse{0%{box-shadow:0 0 0 0 rgba(255,170,0,.65)}100%{box-shadow:0 0 0 12px rgba(255,170,0,0)}}
@keyframes slapPulseR{0%{box-shadow:0 0 0 0 rgba(255,59,48,.7)}100%{box-shadow:0 0 0 12px rgba(255,59,48,0)}}
@media(max-width:760px){.slap{padding-top:58px}.slap-car{width:76px}.slap-stop{width:14px;height:14px;margin:-7px 0 0 -7px}.slap-stop i{inset:3px}
  .slap-wk{padding:52px 20px 6px}.slap-lbl{top:18px;font-size:8.5px;letter-spacing:.6px}.slap-cap{margin-top:32px;font-size:10px;letter-spacing:1px}}
@media (prefers-reduced-motion:reduce){.slap-fill,.slap-car,.slap-stop.next i,.slap-stop.live i{animation:none}}