/* ====================  css/bewegung.css  ====================
   Parallax beim Scrollen, ohne eine Zeile JavaScript: scroll-gekoppelte
   CSS-Animationen (animation-timeline). Sie laufen im Compositor des
   Browsers, nicht im Hauptthread - dadurch ruckelt nichts, und die
   Punktwolke in welt.js behaelt ihre eigene Scroll-Schleife fuer sich.

   Regel: Fliesstext bleibt still. Bewegter Lesetext strengt an. Bewegt
   werden die Ebenen um den Text herum - Geraete, Blaetter, Spalten.

   Wer es nicht kann (Firefox) oder nicht will (reduzierte Bewegung),
   bekommt dieselbe Seite ohne Bewegung. Es fehlt nichts. */

@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){

  /* Auf dem Telefon halbe Wege: kleine Bildschirme, kurze Abschnitte. */
  :root{ --p: 1 }
  @media (max-width: 760px){ :root{ --p: .55 } }

  /* ---------- Einstieg: Text bleibt zurueck, Geraet zieht vor ---------- */
  .kapitel--hero .satz{
    animation: einstieg-text linear both;
    animation-timeline: scroll(root);
    animation-range: 0 90vh;
  }
  .kapitel--hero .mock{
    animation: einstieg-geraet linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }

  /* ---------- Mockups in den Abschnitten: gleiten gegen die Scrollrichtung ---------- */
  .kapitel:not(.kapitel--hero) .mock{
    --weg: 90px;
    animation: einblenden linear both, schweben linear both;
    animation-timeline: view(), view();
    animation-range: entry 0% cover 30%, cover 0% cover 100%;
  }
  /* Das Befund-Blatt legt sich beim Hereinkommen auf den Tisch. */
  .blatt{
    animation: blatt-legen linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 55%;
  }

  /* ---------- Die vier Tueren: jede Spalte mit eigener Geschwindigkeit ---------- */
  .tuer{
    animation: schweben linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .tuer:nth-child(1){ --weg: 14px }
  .tuer:nth-child(2){ --weg: 38px }
  .tuer:nth-child(3){ --weg: 62px }
  .tuer:nth-child(4){ --weg: 86px }

  /* ---------- Stationen, Listenzeilen, Ueberschriften: tauchen auf ---------- */
  .zeitachse li, .ablauf li, .liste > div, .faq details, .arbeit,
  .kapitel:not(.kapitel--hero, .kapitel--text) h2{
    animation: auftauchen linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }

  @keyframes einstieg-text{ to{ translate: 0 calc(90px * var(--p)); opacity: .15 } }
  @keyframes einstieg-geraet{ to{ translate: 0 calc(-140px * var(--p)) } }
  @keyframes einblenden{ from{ opacity: 0 } to{ opacity: 1 } }
  @keyframes schweben{
    from{ translate: 0 calc(var(--weg) * var(--p)) }
    to  { translate: 0 calc(var(--weg) * var(--p) * -1) }
  }
  @keyframes auftauchen{ from{ opacity: 0; translate: 0 28px } to{ opacity: 1; translate: 0 0 } }
  @keyframes blatt-legen{ from{ rotate: -6deg } to{ rotate: -1deg } }
}
}