/* ==========================================================================
   Fahrer-Bereich · basis/bewegung.css — the motion kit (lane W0 `wbas1`, VERTRAG.md 2.0 § 4)
   Levels on <html data-bewegung="voll|ruhig|still"> (basis/bewegung.js): voll = everything,
   ruhig = entrances + value moves, no loops, still = nothing moves. Loops pause while the tab is
   hidden (<html data-sichtbar="nein">). No @import, no foreign host, CSP-clean.
   ========================================================================== */

/* ── entrance (≤ 250 ms, staggered through CSSOM animation-delay) ──────── */
@keyframes bw-auftritt { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.bw-auftritt { animation: bw-auftritt 240ms cubic-bezier(.2, .7, .2, 1) both; }

/* ── progress ring ─────────────────────────────────────────────────────── */
.bw-ring { width: 64px; height: 64px; display: block; flex: none; }
.bw-ring-bahn { fill: none; stroke: var(--schiene); stroke-width: 9; }
.bw-ring-bogen { fill: none; stroke: var(--frei); stroke-width: 9; stroke-linecap: round; }
.bw-ring.bw-gelb .bw-ring-bogen { stroke: var(--achtung); }
.bw-ring.bw-rot .bw-ring-bogen { stroke: var(--rost); }
.bw-ring-text { fill: var(--text); font: 700 20px var(--schrift); }

/* ── the truck on its route ───────────────────────────────────────────── */
.bw-strecke { width: 100%; height: auto; display: block; overflow: visible; }
.bw-strecke-bahn { fill: none; stroke: var(--schiene); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.bw-strecke-gefahren { fill: none; stroke: var(--ton); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.bw-strecke-start { fill: var(--karte); stroke: var(--frei); stroke-width: 3; }
.bw-strecke-ziel { fill: var(--ton); stroke: var(--karte); stroke-width: 3; }
.bw-lkw-kiste { fill: var(--text); }
.bw-lkw-haus { fill: var(--ton); }
.bw-lkw-rad { fill: var(--grund); stroke: var(--text); stroke-width: 1.2; }

/* ── loops (voll only) ─────────────────────────────────────────────────── */
@keyframes bw-hebebuehne { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bw-puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes bw-drehen { to { transform: rotate(360deg); } }
@keyframes bw-rollen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.8px); } }
@keyframes bw-hof { 0% { transform: translateX(-4%); } 100% { transform: translateX(104%); } }
@keyframes bw-fernfahrt { 0% { transform: translateX(-60px); } 100% { transform: translateX(1260px); } }
@keyframes bw-glanz { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(260%) skewX(-18deg); } }

html[data-bewegung="voll"] .bw-hebebuehne { animation: bw-hebebuehne 3.2s ease-in-out infinite; }
html[data-bewegung="voll"] .bw-puls { animation: bw-puls 2.4s ease-in-out infinite; }
html[data-bewegung="voll"] .bw-drehen { animation: bw-drehen 6s linear infinite; transform-box: fill-box; transform-origin: center; }
html[data-bewegung="voll"] .bw-rollen { animation: bw-rollen .9s ease-in-out infinite; }
html[data-bewegung="voll"] .bw-hof { animation: bw-hof 14s linear infinite; }
html[data-bewegung="voll"] .bw-fernfahrt { animation: bw-fernfahrt 38s linear infinite; }
.pano-lkw { fill: var(--fernstes); opacity: 0; }
html[data-bewegung="voll"] .pano-lkw { opacity: .9; }

.bw-glanz { position: relative; overflow: hidden; }
.bw-glanz-streifen { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--glanz) 60%, transparent), transparent); }
html[data-bewegung="voll"] .bw-glanz-streifen { opacity: 1; animation: bw-glanz 7s ease-in-out infinite; }

/* the nav: the open group slides in, a new badge pulses once */
@keyframes bw-aufklappen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html[data-bewegung="voll"] .gruppe.offen .gruppe-inhalt,
html[data-bewegung="ruhig"] .gruppe.offen .gruppe-inhalt { animation: bw-aufklappen 180ms ease-out both; }
@keyframes bw-blatt { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bw-blatt-seite { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-bewegung="voll"] .blatt:not([hidden]) .blatt-innen,
html[data-bewegung="ruhig"] .blatt:not([hidden]) .blatt-innen { animation: bw-blatt 220ms cubic-bezier(.2, .7, .2, 1) both; }
html[data-bewegung="voll"] .blatt.seitlich:not([hidden]) .blatt-innen,
html[data-bewegung="ruhig"] .blatt.seitlich:not([hidden]) .blatt-innen { animation-name: bw-blatt-seite; }

/* ── hidden tab: every loop stands still ─────────────────────────────────── */
html[data-sichtbar="nein"] .bw-schleife,
html[data-sichtbar="nein"] .bw-glanz-streifen { animation-play-state: paused; }

/* ── still: nothing moves at all (also the entrance) ─────────────────────── */
html[data-bewegung="still"] .bw-auftritt,
html[data-bewegung="still"] .bw-schleife,
html[data-bewegung="still"] .bw-glanz-streifen { animation: none; }
html[data-bewegung="ruhig"] .bw-schleife,
html[data-bewegung="ruhig"] .bw-glanz-streifen { animation: none; }

/* the device asks for less motion and the wish is `auto`: bewegung.js sets `still`; this is the CSS-only net
   for the time before the script runs */
@media (prefers-reduced-motion: reduce) {
  html:not([data-bewegung]) .bw-auftritt, html:not([data-bewegung]) .bw-schleife { animation: none; }
}