/* ═══════════════════════════════════════════════════════════════════════════
   KFZ-TRACK · LOGIN-EFFEKTE (nur Desktop) – Gegenstueck zu js/auth_fx.js
   ---------------------------------------------------------------------------
   .afx-scene bildet das Hintergrundbild nach: background-size cover und
   background-position center 20% auf #auth-page. Mit Container-Einheiten
   (cqw/cqh) des #auth-page ergibt sich exakt dieselbe Groesse und Lage.
   Innen gilt: 1 Bildpixel = var(--u) = 100cqw / 1330.
   ═══════════════════════════════════════════════════════════════════════════ */
.afx-scene { display: none; }

@media (min-width: 769px) {
  #auth-page { container-type: size; }

  .afx-scene {
    display: block;
    position: absolute; z-index: 0; pointer-events: none;
    width: max(100cqw, 166.25cqh);            /* 1330 / 800 */
    aspect-ratio: 1330 / 800;
    left: calc((100cqw - max(100cqw, 166.25cqh)) * .5);
    top:  calc((100cqh - max(60.1504cqw, 100cqh)) * .2);
    container-type: inline-size;
    --afx-c: #ff6b35;
    --afx-live: #00c8f0;
  }
  .afx-scene > * { --u: calc(100cqw / 1330); }

  /* Fahrzeuge sollen unter der Markenspalte hindurch ansprechbar sein */
  .auth-grid, .auth-brand { pointer-events: none; }
  .auth-form-wrap { pointer-events: auto; }
}

/* ── Scheinwerfer ────────────────────────────────────────────────────────── */
.afx-light, .afx-streak {
  position: absolute;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  translate: -50% -50%;
  mix-blend-mode: screen;
}
.afx-light {
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  rotate: var(--r);
}
/* ::before = weisses Licht mit Hof, ::after = oranger Warnblinker */
.afx-light::before, .afx-light::after {
  content: ''; position: absolute; inset: -110%; border-radius: 50%;
  opacity: 0; transition: opacity .45s ease;
}
.afx-light::before {
  background: radial-gradient(closest-side,
    rgba(255,255,255,.95) 0%, rgba(255,246,230,.75) 22%,
    rgba(255,214,170,.28) 52%, rgba(255,190,140,0) 100%);
}
.afx-light::after {
  background: radial-gradient(closest-side,
    rgba(255,214,150,.95) 0%, rgba(255,140,30,.8) 25%,
    rgba(255,90,10,.3) 55%, rgba(255,80,0,0) 100%);
}
/* Anamorphe Lichtstreifen der Hauptscheinwerfer */
.afx-streak {
  width: calc(var(--w) * var(--u)); height: max(1px, calc(1.4 * var(--u)));
  background: radial-gradient(closest-side, rgba(255,246,232,.7), rgba(255,240,220,0));
  border-radius: 50%;
  opacity: 0; scale: .4 1;
  transition: opacity .45s ease, scale .6s ease;
}

/* Passwortfeld aktiv (oder Hover auf das Fahrzeug): Xenon zuendet */
.afx-scene.is-ready .afx-light::before,
.afx-scene.hover-bike .afx-bike.afx-light::before,
.afx-scene.hover-car .afx-car.afx-light::before {
  opacity: .75; animation: afx-ignite .9s linear;
}
.afx-scene.is-ready .afx-streak,
.afx-scene.hover-bike .afx-bike.afx-streak,
.afx-scene.hover-car .afx-car.afx-streak { opacity: .18; scale: 1 1; }

@keyframes afx-ignite {
  0% { opacity: 0 } 10% { opacity: .55 } 18% { opacity: .08 } 30% { opacity: .85 }
  42% { opacity: .3 } 58% { opacity: .9 } 100% { opacity: .75 }
}

/* Login erfolgreich: einmal Lichthupe */
.afx-scene.is-flash .afx-light::before { animation: afx-flash .65s ease-out; }
.afx-scene.is-flash .afx-streak { animation: afx-flash-streak .65s ease-out; }
@keyframes afx-flash {
  0% { opacity: .75; scale: 1 } 22% { opacity: 1; scale: 1.8 } 100% { opacity: .8; scale: 1.05 }
}
@keyframes afx-flash-streak {
  0% { opacity: .18; scale: 1 1 } 22% { opacity: .5; scale: 1.6 1.3 } 100% { opacity: .2; scale: 1 1 }
}

/* Login fehlgeschlagen: zweimal Warnblinker */
.afx-scene.is-hazard .afx-light::before { opacity: 0; animation: none; }
.afx-scene.is-hazard .afx-light::after { animation: afx-hazard 1.4s steps(1, end); }
.afx-scene.is-hazard .afx-streak { opacity: 0; }
@keyframes afx-hazard {
  0% { opacity: 1 } 22% { opacity: 0 } 40% { opacity: 1 } 62% { opacity: 0 } 100% { opacity: 0 }
}

/* ── Tracking-HUD ────────────────────────────────────────────────────────── */
.afx-target {
  position: absolute; pointer-events: auto; cursor: crosshair;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.afx-frame { position: absolute; inset: 0; opacity: 0; }
.afx-frame i {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--afx-c);
  filter: drop-shadow(0 0 4px rgba(255,107,53,.7));
  transition: width .25s, height .25s, border-color .25s;
}
.afx-frame .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.afx-frame .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.afx-frame .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.afx-frame .br { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.afx-target.is-locked .afx-frame { animation: afx-lock .7s cubic-bezier(.2,.9,.3,1.25) forwards, afx-breathe 3.2s ease-in-out .7s infinite; }
@keyframes afx-lock {
  0% { opacity: 0; scale: 1.35 } 55% { opacity: 1 } 70% { scale: .97 } 82% { opacity: .5 } 100% { opacity: 1; scale: 1 }
}
@keyframes afx-breathe { 0%, 100% { opacity: 1 } 50% { opacity: .6 } }
.afx-target:hover .afx-frame i { width: 34px; height: 34px; }

/* Label */
.afx-tag {
  position: absolute; bottom: 100%; margin-bottom: 10px;
  min-width: 168px; padding: 8px 11px 9px;
  font-family: var(--font-head); color: #fff; white-space: nowrap;
  background: rgba(7,7,13,.62);
  border: 1px solid rgba(255,107,53,.35); border-radius: 10px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  opacity: 0; translate: 0 6px;
  transition: opacity .35s ease, translate .35s ease, border-color .25s;
}
.afx-tag-tl .afx-tag { left: 0; }
/* innen oben links – fuer Ziele, die bis an den oberen Bildrand reichen */
.afx-tag-in .afx-tag { bottom: auto; top: 16px; left: 20px; margin: 0; }
.afx-tag-tr .afx-tag { right: 0; }
.afx-target.is-locked .afx-tag { opacity: 1; translate: 0 0; transition-delay: .45s; }
.afx-target:hover .afx-tag { border-color: rgba(255,107,53,.75); transition-delay: 0s; }

.afx-head { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .08em; }
.afx-head b { font-weight: 800; }
.afx-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--afx-live);
  box-shadow: 0 0 0 0 rgba(0,200,240,.6); animation: afx-ping 1.6s ease-out infinite;
}
@keyframes afx-ping { 0% { box-shadow: 0 0 0 0 rgba(0,200,240,.6) } 100% { box-shadow: 0 0 0 9px rgba(0,200,240,0) } }
.afx-live {
  margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .14em;
  color: var(--afx-live); padding: 1px 5px; border: 1px solid rgba(0,200,240,.45); border-radius: 4px;
}
.afx-speed { margin-top: 4px; font-size: 22px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.afx-speed small { margin-left: 4px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); }
.afx-geo { margin-top: 2px; font-size: 10.5px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Details beim Hover aufklappen */
.afx-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.afx-more > div {
  overflow: hidden; display: grid; grid-template-columns: auto auto; gap: 3px 14px;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.afx-more b { font-weight: 600; }
.afx-more em { font-style: normal; color: var(--afx-c); font-weight: 700; font-size: 9.5px; letter-spacing: .1em; margin-right: 6px; }
.afx-more span:first-child, .afx-more span:nth-child(2) { margin-top: 8px; }
.afx-target:hover .afx-more { grid-template-rows: 1fr; }

/* Fehler: HUD faerbt sich kurz rot */
.afx-scene.is-hazard { --afx-c: #ff3b30; }
.afx-scene.is-hazard .afx-tag { border-color: rgba(255,59,48,.8); }

/* Bewegung reduzieren: Zustaende bleiben, Animationen entfallen */
@media (prefers-reduced-motion: reduce) {
  .afx-scene *, .afx-scene *::before, .afx-scene *::after { animation: none !important; transition: none !important; }
  .afx-target.is-locked .afx-frame { opacity: 1; }
  .afx-scene.is-hazard .afx-light::after { opacity: .8; }
}