/* ==========================================================================
   HERO-EFFEKT — ANFANG   (Experiment, in sich abgeschlossen)
   --------------------------------------------------------------------------
   Scrollgekoppelter Ken-Burns-Effekt auf dem Hero-Hintergrund.
   Vollstaendig entfernbar: diese Datei loeschen und die eine <link>-Zeile
   aus index.html entfernen. Es wurde nichts anderes veraendert.

   Warum Pseudoelemente: Das Hero-Bild ist ein CSS-background-image auf
   .hero, kein <img>. Wuerde man .hero selbst skalieren, wanderte der Text
   mit. Deshalb bekommt ::before das Bild (animiert), ::after den Verlauf
   (unbewegt) und der Inhalt liegt per z-index darueber.
   ========================================================================== */

:root{
  /* Endwert der Skalierung. Hier aendern, sonst nirgends. */
  --hero-zoom: 1.8;
}

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px){

    .hero{
      /* Damit das vergroesserte Bild nicht ueber den Hero hinauslaeuft. */
      overflow: clip;
      /* Bild und Verlauf ziehen auf die Pseudoelemente um. Ohne dieses
         none wuerde der Browser dasselbe Bild ein zweites Mal anfordern. */
      background-image: none;
      /* Eigener Stapelkontext: erlaubt negative z-index auf den Pseudoelementen,
         ohne dass sie hinter den Seitenhintergrund rutschen. */
      isolation: isolate;
    }

    /* --- Ebene 1: das Bild. Die einzige Ebene, die sich bewegt. --- */
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      background-image:url("/assets/gleis-hero-1920.webp");
      background-position:center 58%;
      background-size:cover;
      background-repeat:no-repeat;
      transform-origin:center 60%;
      scale:1;
      animation:hero-ken-burns linear both;
      /* Bewusst scroll() statt view(): Der Hero steht ganz oben auf der Seite.
         An exit gekoppelt liefe die Bewegung erst, waehrend er aus dem Bild
         scrollt - der sichtbare Teil bekaeme fast nichts davon ab. Mit einem
         festen Bereich von 0 bis 60vh ist sie fertig, solange der Hero noch
         gut ein Drittel des Bildschirms fuellt. */
      animation-timeline:scroll(root block);
      animation-range:0 60vh;
    }

    /* AVIF-Aufwertung, identisch zur Logik im Haupt-Stylesheet. */
    @supports (background-image:image-set(url("/assets/gleis-hero-1920.avif") type("image/avif"))){
      .hero::before{
        background-image:image-set(
          url("/assets/gleis-hero-1920.avif") type("image/avif"),
          url("/assets/gleis-hero-1920.webp") type("image/webp"));
      }
    }

    /* --- Ebene 2: der Verlauf. Bleibt stehen, damit die dunklen
           Kanten oben und unten nicht mitwandern. --- */
    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background-image:linear-gradient(180deg,
        rgba(16,31,56,.90) 0%,
        rgba(16,31,56,.72) 45%,
        rgba(16,31,56,.93) 100%);
    }

    /* Ebene 3, der Inhalt, braucht keine Regel: durch die negativen z-index
       oben liegt er ohnehin darueber. Ein position:relative auf .hero__inner
       waere sogar schaedlich - es wuerde zum Bezugsrahmen fuer das absolut
       positionierte DB-Siegel und dieses um 94px nach innen ziehen. */
  }
}

@keyframes hero-ken-burns{
  from{ scale:1; }
  to  { scale:var(--hero-zoom); }
}


/* ==========================================================================
   HERO-EFFEKT — ENDE
   ========================================================================== */