/* VideoFuchs24 – Effekte. Alles hier ist optisch; bei "reduzierter Bewegung" wird es abgeschaltet. */

/* ---------- Seitenübergänge (Chrome, Edge, Safari 18+) ---------- */
@view-transition { navigation: auto; }
header.top { view-transition-name: hdr; }
#sidenav { view-transition-name: sidenav; }
#anav { view-transition-name: anav; }
.botnav { view-transition-name: botnav; }
::view-transition-old(root) { animation: vt-out .16s ease-in both; }
::view-transition-new(root) { animation: vt-in .25s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Aurora-Hintergrund + feines Raster ---------- */
html { background: var(--bg); }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(224,164,88,.13), transparent 70%),
    radial-gradient(32% 30% at 88% 12%, rgba(94,196,220,.10), transparent 70%),
    radial-gradient(40% 38% at 55% 100%, rgba(142,162,255,.09), transparent 70%);
  filter: blur(30px);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
}


/* ---------- Glas-Karten (ruhig) ---------- */
.card, .stat, .fleet, #sidenav, #anav, .dlist { background-color: rgba(27,34,44,.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }

/* ---------- Einblenden (nur die Seite als Ganzes, sehr dezent) ---------- */
.fx-in { opacity: 0; transform: translateY(12px) scale(.995); animation: fxin .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes fxin { to { opacity: 1; transform: none; } }

/* ---------- Statusbanner: Ring zeichnet sich, Radar bei "alles ruhig", Alarm pulsiert ---------- */
.ring .arc { animation: ringdraw 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ringdraw { from { stroke-dasharray: 0 226.2; } }
.ring .sweep { transform-origin: 43px 43px; animation: spin 5s linear infinite; }
.ring .ping { transform-origin: 43px 43px; animation: ping 5s ease-out infinite; }
.ring .ping.p2 { animation-delay: 2.5s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(.2); opacity: .7; } 100% { transform: scale(1); opacity: 0; } }
.fleet { overflow: hidden; }
.fleet.err { animation: fxin .7s cubic-bezier(.2,.7,.2,1) both, alertglow 4s ease-in-out .7s infinite; }
@keyframes alertglow { 0%, 100% { box-shadow: 0 0 0 1px rgba(224,108,108,.3); } 50% { box-shadow: 0 0 0 1px rgba(224,108,108,.5), 0 0 24px rgba(224,108,108,.10); } }
/* ---------- Kamerakarten im Überwachungs-Look ---------- */
.cam { transition: border-color .25s; }
.cam:hover { transform: none; }
.cam .shot { background: linear-gradient(100deg, #0c0f13 30%, #151b23 50%, #0c0f13 70%); background-size: 250% 100%; animation: skeleton 1.6s linear infinite; }
.cam .shot:has(img.loaded) { animation: none; }
@keyframes skeleton { from { background-position: 125% 0; } to { background-position: -125% 0; } }
.cam .shot img { opacity: 0; transition: opacity .5s ease; }
.cam .shot img.loaded { opacity: 1; }
.cam .shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}
.cam .hud { position: absolute; left: 10px; right: 10px; top: 9px; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  font: 700 .7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.cam .hud .rec { display: inline-flex; align-items: center; gap: 5px; }
.cam .hud .rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: blink 1.2s steps(2, start) infinite; }
.cam .hud .live i { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: none; }
@keyframes blink { to { visibility: hidden; } }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cam.st-ok .pill::before { animation: livepulse 3s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---------- Navigation: bewusst ohne Animation (ruhige Seitenleiste) ---------- */
#sidenav a, #anav a, #sidenav .cnt, #anav .cnt, .botnav .cnt { animation: none !important; }

/* ---------- Meldungen ---------- */
.flash { animation: flashin .45s cubic-bezier(.2,.9,.3,1.3) both; }
.flash.hide { animation: flashout .4s ease forwards; }
@keyframes flashin { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes flashout { to { opacity: 0; transform: translateY(-8px); height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } }

/* ---------- Anmeldung ---------- */
.center .card { box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(224,164,88,.12); }
.authhero { display: grid; place-items: center; margin: 7vh auto -4vh; }
.authhero img { width: 88px; height: 88px; filter: drop-shadow(0 14px 30px rgba(224,164,88,.35)); animation: float 8s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-4px); } }

/* ---------- Zahlen ---------- */
.stat b, .fleet h2 { font-variant-numeric: tabular-nums; }

/* ---------- Weniger Bewegung gewünscht: alles ruhig ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fx-in { opacity: 1; transform: none; }
  .cam .shot img { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}