/* ==========================================================================
   FILM-EINFLUG — ANFANG   (Experiment, in sich abgeschlossen)
   --------------------------------------------------------------------------
   Ueberschrift und Unterzeile der Imagefilm-Sektion fliegen beim Runterscrollen
   von rechts ein. Die rote Marke "Imagefilm" darueber bleibt stehen, ebenso das
   Video darunter.

   Vollstaendig entfernbar: diese Datei loeschen und die eine <link>-Zeile
   aus index.html entfernen. Es wurde nichts anderes veraendert.

   Warum dieser Selektor: .section__head nutzen alle Sektionen der Seite.
   aria-labelledby="imagefilm" gibt es dagegen nur einmal - damit trifft die
   Regel genau diese eine Kopfzeile, ohne dass am Markup etwas geaendert
   werden musste.

   Grundzustand ist bewusst der ENDzustand: keine Verschiebung, volle
   Deckkraft. Ohne Unterstuetzung fuer Scroll-Animationen (Firefox, aeltere
   Safari) sieht die Sektion damit vollstaendig korrekt aus, nur ohne
   Bewegung. Ein opacity:0 steht nirgends ausserhalb des @supports-Blocks.
   ========================================================================== */

:root{
  /* --- Stellschrauben. Nur hier aendern. --- */

  /* Startversatz nach rechts, getrennt fuer breite und schmale Bildschirme. */
  --film-versatz-desktop: 35vw;
  --film-versatz-mobil:   20vw;

  /* Wann die Bewegung laeuft. Fertig, bevor die Sektion mittig steht. */
  --film-bereich: entry 5% cover 45%;

  /* Startet zuegig, laeuft weich aus. Traegt mehr zur Wirkung bei als die Distanz. */
  --film-easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* Leichtes Aufklaren statt Einblenden aus dem Nichts. */
  --film-opazitaet-start: .6;

  /* --- Ab hier nichts mehr anfassen. --- */
  --film-versatz: var(--film-versatz-desktop);
}

@media (max-width: 900px){
  :root{ --film-versatz: var(--film-versatz-mobil); }
}

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

    /* clip statt hidden: clip erzeugt keinen Scroll-Container und laesst
       position:sticky in verschachtelten Elementen unangetastet. Nur die
       X-Achse, damit vertikal nichts abgeschnitten wird. */
    section[aria-labelledby="imagefilm"]{
      overflow-x: clip;
    }

    /* Alle direkten Kinder der Kopfzeile ausser der roten Marke .eyebrow.
       Beide Elemente teilen sich Zeitachse und Bereich, bewegen sich also
       exakt gleich und wirken wie ein Block. */
    section[aria-labelledby="imagefilm"] .section__head > :not(.eyebrow){
      /* Nur Compositor-Eigenschaften: translate und opacity.
         Keine Layout-Eigenschaft, daher kein Reflow und kein CLS. */
      animation: film-einflug var(--film-easing) both;
      animation-timeline: view();
      animation-range: var(--film-bereich);
      /* Kein animation-delay: bei Scroll-Zeitachsen wirkt es nicht wie bei
         zeitbasierten Animationen. Die Verzoegerung steckt im Bereich oben. */
    }
  }
}

@keyframes film-einflug{
  from{ translate: var(--film-versatz) 0; opacity: var(--film-opazitaet-start); }
  to  { translate: 0 0;                   opacity: 1; }
}

/* ==========================================================================
   FILM-EINFLUG — ENDE
   ========================================================================== */