/* Einblenden, wenn der Abschnitt in den Blick kommt — **einmal**.
 *
 * Hier steht bewusst kein `animation-timeline: view()`, obwohl es das gäbe:
 * Eine scroll-gesteuerte Animation hängt an der Scrollposition, nicht an
 * einem Ereignis. Sie läuft rückwärts, sobald der Abschnitt wieder
 * hinauswandert, und am unteren Fensterrand steht sie mitten im Verlauf —
 * dort war der Inhalt sichtbar blasser als der Rest der Seite. Gemeint ist
 * aber: einmal da, immer da.
 *
 * Den unsichtbaren Anfangszustand setzt deshalb `behaviour.js`, nicht diese
 * Datei. Ohne JavaScript ist alles sofort sichtbar — Inhalt, den nur ein
 * Skript hervorholen kann, ist verlorener Inhalt.
 */
@keyframes pc-fade { from { opacity: 0; translate: 0 40px } to { opacity: 1; translate: 0 0 } }
/* Parallax über die Scroll-Zeitleiste — kein Scroll-Ereignis, kein Ruckeln. */
/* **14 %, nicht 6 %.** Mit 6 % wanderte das Bild über seine ganze Sichtbarkeit
   27 px weit — messbar, aber niemand nimmt es wahr. Der Effekt lebt davon,
   dass man ihn sieht. */
@keyframes pc-parallax { from { translate: 0 -14% } to { translate: 0 14% } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .m-parallax { animation: pc-parallax linear both; animation-timeline: scroll(root block) }

    /* **Ein bildfüllender Abschnitt bewegt nur sein Bild.** Wanderte der
       ganze Abschnitt, wanderte der Text darauf mit — und oben und unten
       risse er Lücken in die Seite. Das Bild ist etwas größer als sein
       Rahmen, damit beim Wandern kein Rand entsteht. */
    .m-parallax.pc-layered,
    .m-parallax.pc-layered > .pc-backdrop,
    figure.m-parallax { animation: none; overflow: hidden }

    .m-parallax.pc-layered > .pc-backdrop img,
    figure.m-parallax > img {
      animation: pc-parallax linear both;
      animation-timeline: scroll(root block);
      /* Größer als der Rahmen, damit beim Wandern kein Rand entsteht. Der
         Wert ist der Grundmaßstab, auf den der Zoom beim Zeigen aufsetzt. */
      --pc-scale: 1.34;
    }
  }
}

/* **Die Zeitleiste des Rahmens, nicht die der Seite.** Über `scroll(root)`
   verteilt sich die Bewegung auf die gesamte Seitenhöhe: gemessen 5 px auf
   750 px Blätterweg — technisch aktiv, praktisch unsichtbar.

   Ein blankes `view()` am Bild hilft nicht: Der Rahmen hat `overflow:hidden`
   und ist damit selbst der Scrollport, in dem das Bild immer vollständig
   sichtbar ist — gemessen 0 px. Die Zeitleiste gehört deshalb an den
   **Rahmen**, der durchs Fenster wandert; das Bild beruft sich auf sie. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Am **äußeren** Rahmen: Er ist es, der durchs Fenster wandert. Eine
       Zeitleiste an der inneren Bildschicht stünde still, weil ihr
       Scrollport wieder der Rahmen mit `overflow:hidden` wäre. */
    .m-parallax {
      view-timeline-name: --pc-band;
      view-timeline-axis: block;
    }
    .m-parallax.pc-layered > .pc-backdrop img,
    figure.m-parallax > img {
      animation-timeline: --pc-band;
      animation-range: cover 0% cover 100%;
    }
  }
}

/* Der Zoom beim Zeigen setzt auf dem Parallax-Maßstab auf, statt ihn zu
   ersetzen — sonst spränge das Bild beim Überfahren auf seine Rahmengröße
   zurück und ein Rand würde sichtbar. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  figure.m-parallax:hover > img,
  .m-parallax.pc-layered:hover > .pc-backdrop img { --pc-scale: 1.42 }
}