/* motion-v2 — Scroll-Tiefe im Hero.
   Abschaltbar: Inhalt dieser Datei leeren, dann uebernimmt die alte JS-Parallaxe wieder.

   Bezugsgroesse ist die Dokument-Scrollposition (scroll()), nicht der Eintritt des
   Elements in den Sichtbereich (view()). Der Hero steht ganz oben und tritt nie ein —
   mit view() stuende die Animation dauerhaft still. */
:root{ --motion-v2:1; }

@supports (animation-timeline: scroll()){
  .hero::before,
  .hero .evidence-grid,
  .hero .container{
    animation-timeline:scroll(root block);
    /* Ueber die ersten 900px Scrollweg, danach ist der Hero ohnehin durch. */
    animation-range:0 900px;
    animation-fill-mode:both;
    animation-timing-function:linear;
    animation-duration:1s;   /* bei Scroll-Zeitachsen ohne Wirkung, aber erforderlich */
  }
  .hero::before{ transform:none; animation-name:mv2-bg }
  .hero .evidence-grid{ animation-name:mv2-mid }
  .hero .container{ animation-name:mv2-fore }
}

/* Das Bild zieht am staerksten mit, das Raster mittel, der Inhalt leicht dagegen —
   daraus entsteht der Tiefeneindruck. */
@keyframes mv2-bg  { from{ transform:translate3d(0,0,0) scale(1.06) }  to{ transform:translate3d(0,170px,0) scale(1.06) } }
@keyframes mv2-mid { from{ transform:translate3d(0,0,0) }              to{ transform:translate3d(0,85px,0) } }
@keyframes mv2-fore{ from{ transform:translate3d(0,0,0) }              to{ transform:translate3d(0,-40px,0) } }

@media (prefers-reduced-motion: reduce){
  .hero::before,.hero .evidence-grid,.hero .container{ animation:none !important }
}