/* ═══════════════════════════════════════════════════════════════════════════
   TELOS #72 — the car as a recurring brand object.

   One car, used wherever the site needs a character: the homepage boot
   (includes/boot-launch.php), error pages, the offline page, loaders and the hero
   slot of a race that has no driver yet. Same language as the boot: cyan
   blueprint, a glowing floor line, the livery render and its technical drawing.

   Assets (assets/cars): telos72.webp 1800w · telos72-720.webp · telos72-360.webp
                         telos72-lines.webp 1800w · telos72-lines-720.webp (the drawing)

   Pure CSS, no JS. prefers-reduced-motion shows the final frame.

   Markup (a scene):
     <div class="tcar is-enter">                       state classes: is-enter · is-reveal · is-red · is-pit
       <span class="tcar-streak"></span>
       <img class="tcar-body"  src="/assets/cars/telos72-720.webp" width="720" height="174" alt="TELOS #72">
       <img class="tcar-lines" src="/assets/cars/telos72-lines-720.webp" width="720" height="174" alt="" aria-hidden="true">
       <span class="tcar-floor"></span>
     </div>
   Markup (a loader):
     <div class="tcar-loader" role="status"><div class="tcar-loader-track">
        <img class="tcar-loader-car" src="/assets/cars/telos72-360.webp" width="116" height="28" alt="">
     </div><span class="tcar-loader-lbl">Loading the race feed</span></div>
   ═══════════════════════════════════════════════════════════════════════════ */

.tcar{--tcar-w:min(640px,92vw);--tcar-c:0,242,255;position:relative;width:var(--tcar-w);max-width:100%;margin:0 auto;isolation:isolate;line-height:0}
.tcar img{display:block;width:100%;height:auto;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.tcar::after{content:'';position:absolute;left:6%;right:6%;bottom:-7%;height:16%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(var(--tcar-c),.24),transparent 70%);filter:blur(12px)}

/* the livery render */
.tcar-body{position:relative;z-index:2;
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(var(--tcar-c),.14));
  -webkit-box-reflect:below -3px linear-gradient(transparent 74%,rgba(255,255,255,.15))}
/* its technical drawing, laid exactly over it */
.tcar-lines{position:absolute;left:0;top:0;z-index:3;opacity:0}
/* the floor the car stands on */
.tcar-floor{position:absolute;left:-12%;right:-12%;bottom:1.5%;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(var(--tcar-c),.65) 16%,rgba(var(--tcar-c),.65) 84%,transparent);
  box-shadow:0 0 18px rgba(var(--tcar-c),.5)}

/* ── act 1: it drives in (404) ─────────────────────────────────────────────── */
.tcar-streak{position:absolute;z-index:1;left:-8%;bottom:19%;width:62%;height:3px;border-radius:3px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--tcar-c),.85));box-shadow:0 0 14px rgba(var(--tcar-c),.6)}
.tcar.is-enter .tcar-body{animation:tcarIn 1.3s cubic-bezier(.06,.6,.16,1) both,tcarFloat 2.8s ease-in-out 1.3s infinite}
.tcar.is-enter .tcar-streak{animation:tcarStreak 1.3s cubic-bezier(.06,.6,.16,1) both}
@keyframes tcarIn{0%{transform:translateX(-118vw) skewX(-8deg)}76%{transform:translateX(0) skewX(-1.4deg)}100%{transform:translateX(0) skewX(0)}}
@keyframes tcarStreak{0%{opacity:.95;transform:translateX(-118vw)}76%{opacity:.7;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes tcarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ── act 2: the drawing becomes the livery (hero slot) ─────────────────────── */
.tcar-sweep{position:absolute;top:-8%;bottom:-8%;left:0;width:3px;z-index:4;opacity:0;pointer-events:none;background:#fff;
  box-shadow:0 0 22px rgba(var(--tcar-c),1),0 0 70px rgba(var(--tcar-c),.7)}
.tcar.is-reveal .tcar-lines{animation:tcarDraw 1.9s .1s ease both}
.tcar.is-reveal .tcar-body{animation:tcarBuild 1.45s .5s cubic-bezier(.6,0,.2,1) both}
.tcar.is-reveal .tcar-sweep{animation:tcarSweep 1.45s .5s cubic-bezier(.6,0,.2,1) both}
@keyframes tcarDraw{0%{opacity:0}18%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes tcarBuild{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -2% -20% 0)}}
@keyframes tcarSweep{0%{opacity:1;left:0}92%{opacity:1}100%{opacity:0;left:100%}}

/* ── red flag (500): the car is stopped, the floor line goes red, it smokes ── */
.tcar.is-red{--tcar-c:255,59,48}
.tcar.is-red .tcar-body{filter:grayscale(.45) brightness(.8) drop-shadow(0 20px 22px rgba(0,0,0,.65)) drop-shadow(0 0 34px rgba(255,59,48,.2))}
.tcar.is-red .tcar-floor{animation:tcarPulse 1.7s ease-in-out infinite}
@keyframes tcarPulse{0%,100%{opacity:.55}50%{opacity:1}}
.tcar-smoke{position:absolute;left:27%;top:5%;width:13%;aspect-ratio:1;z-index:3;pointer-events:none}
.tcar-smoke i{position:absolute;inset:0;border-radius:50%;opacity:0;filter:blur(5px);
  background:radial-gradient(circle,rgba(214,218,226,.6),rgba(150,156,168,.2) 55%,transparent 72%);animation:tcarSmoke 3.4s ease-out infinite}
.tcar-smoke i:nth-child(2){animation-delay:1.1s}
.tcar-smoke i:nth-child(3){animation-delay:2.2s}
@keyframes tcarSmoke{0%{opacity:0;transform:translate(0,0) scale(.35)}16%{opacity:.75}100%{opacity:0;transform:translate(-34%,-270%) scale(2)}}

.tcar-sparks{position:absolute;left:24%;top:9%;width:14%;height:12%;z-index:3;pointer-events:none}
.tcar-sparks i{position:absolute;left:50%;top:0;width:3px;height:3px;border-radius:50%;opacity:0;background:#ff7a1a;box-shadow:0 0 6px #ff7a1a;animation:tcarSpark 1.25s ease-in infinite}
.tcar-sparks i:nth-child(1){--dx:-14px;animation-delay:.00s}
.tcar-sparks i:nth-child(2){--dx:10px;animation-delay:.20s;background:#ffb000;box-shadow:0 0 6px #ffb000}
.tcar-sparks i:nth-child(3){--dx:-26px;animation-delay:.45s}
.tcar-sparks i:nth-child(4){--dx:22px;animation-delay:.62s;background:#ffd34d;box-shadow:0 0 6px #ffd34d}
.tcar-sparks i:nth-child(5){--dx:-6px;animation-delay:.85s}
.tcar-sparks i:nth-child(6){--dx:30px;animation-delay:1.0s;background:#ffb000;box-shadow:0 0 6px #ffb000}
@keyframes tcarSpark{0%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:.6}100%{opacity:0;transform:translate(var(--dx,8px),64px) scale(.2)}}

/* ── in the pits (offline) ─────────────────────────────────────────────────── */
.tcar.is-pit{--tcar-c:255,196,0}
.tcar.is-pit .tcar-floor{height:2px;box-shadow:none;
  background:repeating-linear-gradient(90deg,rgba(255,196,0,.75) 0 18px,transparent 18px 30px)}
.tcar.is-pit .tcar-body{animation:tcarIdle 3.2s ease-in-out infinite}
@keyframes tcarIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

/* ── labels around a scene ─────────────────────────────────────────────────── */
.tcar-hud{position:absolute;z-index:4;font:700 10px/1.7 'JetBrains Mono',monospace;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,255,255,.42);white-space:nowrap}
.tcar-hud b{color:rgba(var(--tcar-c),.92);font-weight:700}
.tcar-hud.tl{left:0;top:-12%}
.tcar-hud.tr{right:0;top:-12%;text-align:right}
.tcar-cap{margin-top:16px;text-align:center;font:700 10px/1.7 'JetBrains Mono',monospace;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.42)}
.tcar-cap b{color:#00f2ff;font-weight:700}
.tcar-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:6px;font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:2px;text-transform:uppercase;
  color:#00f2ff;border:1px solid rgba(0,242,255,.3);background:rgba(0,242,255,.06)}
.tcar-chip.warn{color:#ffc400;border-color:rgba(255,196,0,.35);background:rgba(255,196,0,.07)}
.tcar-chip.red{color:#ff5a4f;border-color:rgba(255,59,48,.4);background:rgba(255,59,48,.08)}
.tcar-chip i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:tcarBlink 1.2s steps(2) infinite}
@keyframes tcarBlink{50%{opacity:.25}}

/* ── the race-feed loader: one lap of the track, on repeat ─────────────────── */
.tcar-loader{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 16px;color:rgba(255,255,255,.55)}
.tcar-loader-track{position:relative;width:min(360px,80vw);height:46px;overflow:hidden}
.tcar-loader-track::before{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,242,255,.5) 12%,rgba(0,242,255,.5) 88%,transparent)}
.tcar-loader-car{position:absolute;left:0;bottom:9px;width:116px;height:auto;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(0,242,255,.22));animation:tcarLap 2.2s cubic-bezier(.55,0,.25,1) infinite}
@keyframes tcarLap{0%{transform:translateX(-130px)}100%{transform:translateX(min(360px,80vw))}}
.tcar-loader-lbl{font:700 10px/1.6 'JetBrains Mono',monospace;letter-spacing:2.2px;text-transform:uppercase;text-align:center}

/* ── the hero slot of a race with no winner yet ────────────────────────────── */
.cine-figure .tcar-hero{position:relative;z-index:2;align-self:center;width:min(100%,640px);margin:0 auto}
.cine-figure .tcar-hero .tcar-body{-webkit-box-reflect:none}
/* with the car in it the figure needs no tall driver-sized box */
.cine-figure:has(.tcar-hero){min-height:300px}

@media(max-width:560px){
  .tcar-hud{font-size:9px;letter-spacing:1.6px}
  .tcar-hud.tl,.tcar-hud.tr{top:-16%}
}
@media(prefers-reduced-motion:reduce){
  .tcar *,.tcar::after,.tcar-loader-car{animation:none!important}
  .tcar .tcar-lines,.tcar .tcar-sweep,.tcar .tcar-streak{display:none}
  .tcar-smoke{display:none}
  .tcar-loader-car{left:50%;transform:translateX(-50%)}
}