/* ==========================================================================
   Bewegung — asynchron geladen, nicht kritisch.
   Grundsätze (CLAUDE.md, Regel 4):
     1. Nichts startet unsichtbar und wartet auf JavaScript. Ohne Support: statisch sichtbar.
     2. Scroll-Effekte nur über animation-timeline (scroll()/view()), läuft im Compositor.
     3. prefers-reduced-motion: reduce (Run 10: Stufen statt komplett aus). Weg fallen Parallax, Kippen, Schweben, Bewegung
        über 8 px, Endlos-Schleifen und Hochzählen. Es bleiben: Einblenden per opacity (≤ 300 ms), Linien, die sich einmal
        zeichnen (≤ 600 ms), Hover-Farbwechsel. Die erlaubten Animationen stehen mit !important in gfx.css, gfx-hero.css
        und late.css und schlagen damit die Sperre unten (Universal-Selektor, geringste Spezifität).
     4. Nur transform / stroke-dashoffset, kein Layout-Sprung.
     5. Genau EIN besonderer Moment pro Seite: aktiv ist nur der Effekt der Body-Klasse fx-<name>
        (Feld "effekt" in data/, Default je Seitentyp in app/main.py).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Kennzahl-Panel (Styleguide): die Kurve zeichnet sich einmal */
  .readout__chart .line { stroke-dasharray: 1; stroke-dashoffset: 0; animation: ev-draw 1.1s var(--ease-out) .15s both; }
  .readout__chart .dot { animation: ev-pop .3s var(--ease-out) 1.15s both; transform-box: fill-box; transform-origin: center; }
  @keyframes ev-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes ev-pop { from { transform: scale(.4); } to { transform: scale(1); } }

  @supports (animation-timeline: view()) {
    /* Balken wachsen (Styleguide, Messwerte) */
    .bar__fill { transform-origin: left center; animation: ev-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    @keyframes ev-grow { from { transform: scaleX(.08); } to { transform: scaleX(1); } }

    /* fx-showcase: Shop-Screenshot kippt beim Scrollen nach hinten, Markierungen wachsen heran */
    .fx-showcase .showcase__frame { animation: ev-tilt linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    .fx-showcase .marker { animation: ev-mark linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    /* Run 7 (K59): .browser und .hero haben overflow:hidden und wären damit Scroll-Container, gegen die view()
       misst – dort scrollt nichts, die 3. Markierung blieb bei ~88 %. overflow:clip schneidet genauso ab, ist aber
       kein Scroll-Container → view() misst gegen die Seite, alle Markierungen erreichen scale(1). */
    .fx-showcase .showcase__frame, .fx-showcase .hero { overflow: clip; }
    @keyframes ev-tilt { from { transform: rotateX(0deg) scale(1); } to { transform: rotateX(9deg) scale(.95); } }
    @keyframes ev-mark { from { transform: scale(.55); } to { transform: scale(1); } }

    /* fx-prozess: Linie über den Schritten füllt sich beim Scrollen */
    .fx-prozess .steps__item { position: relative; }
    .fx-prozess .steps__item::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--signal); transform-origin: left center;
      animation: ev-fill linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes ev-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* fx-timeline: Signal-Linie der Zeitleiste füllt sich mit dem Lesen */
    .fx-timeline .timeline::after { animation: ev-vfill linear both; animation-timeline: view(); animation-range: entry 30% cover 70%; }
    @keyframes ev-vfill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

    /* fx-cases: Screenshots richten sich beim Hereinscrollen auf */
    .fx-cases .case-card__shot .browser { transform-origin: 50% 100%; animation: ev-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes ev-rise { from { transform: perspective(900px) rotateX(14deg) translateY(12px); } to { transform: perspective(900px) rotateX(0) translateY(0); } }

    /* fx-leistungen: Messbalken an jeder Leistungskarte läuft voll */
    .fx-leistungen .svc-grid .card { overflow: hidden; }
    .fx-leistungen .svc-grid .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--signal); transform-origin: left center;
      animation: ev-fill linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Sperre für alles, was nicht ausdrücklich erlaubt ist; Übergänge nur noch für Farben (Hover), nie für transform */
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity !important; }
}