/*
 * Bewegung. Der Inhalt ist ohne JS sichtbar: Startzustände greifen nur unter
 * html.anim, das animations.js bei erlaubter Bewegung setzt.
 */

@media (prefers-reduced-motion: no-preference) {
  /* Hero: Headline zeilenweise per Maske */
  .held__zeile > span {
    animation: zeile-ein 900ms var(--ease) both;
    animation-delay: calc(var(--zeile, 0) * 110ms + 120ms);
  }
  @keyframes zeile-ein { from { transform: translateY(105%); } }

  /* Sektionen */
  .anim [data-reveal] { opacity: 0; transform: translateY(14px); }
  .anim [data-reveal].drin {
    opacity: 1;
    transform: none;
    transition: opacity 460ms var(--ease), transform 460ms var(--ease);
    transition-delay: calc(var(--n, 0) * 60ms);
  }

  /* Bemaßung zeichnet sich von Pfeil zu Pfeil */
  .anim [data-bem] .bem__linie { transform: scaleX(0); }
  .anim [data-bem] .bem__wert { opacity: 0; }
  .anim [data-bem].drin .bem__linie { transform: none; transition: transform 1000ms var(--ease); }
  .anim [data-bem].drin .bem__wert { opacity: 1; transition: opacity 320ms ease 700ms; }

  /* Ablauf: Linie folgt dem Scrollen */
  @supports (animation-timeline: view()) {
    .ablauf__linie i {
      animation: linie-wachsen linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 62%;
    }
    @keyframes linie-wachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }

    @media (min-width: 900px) {
      .blueprint__raster {
        animation: raster-drift linear both;
        animation-timeline: view();
      }
      @keyframes raster-drift { from { transform: translateY(-6%); } to { transform: translateY(6%); } }
    }
  }

  /* Schritte rasten mit leichtem Versatz ein */
  .anim .schritt[data-reveal] { transform: translateX(-16px); }
  .anim .schritt[data-reveal].drin { transform: none; }

  /* Mobiles Menü */
  .vollmenue:not([hidden]) nav li { animation: menue-ein 460ms var(--ease) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
  @keyframes menue-ein { from { opacity: 0; transform: translateY(12px); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}