/* Motion-Modul v1 (seven repeat) · wiederverwendbar, Ziel: Skill modern-web-design
   Nur transform und opacity. Alles im prefers-reduced-motion-Block abgeschaltet.
   Klassen:
   .rv        Reveal von unten (Varianten .l von links, .s aus Skalierung; Verzögerung .d1 bis .d5)
   .stag      Kinder gestaffelt (motion.js setzt --i je Kind)
   .wr        Wort-für-Wort-Reveal aus Masken (motion.js zerlegt den Text)
   .par       Bild-Parallax über native CSS-Scroll-Timeline (nur mit @supports, sonst statisch)
   .count     Tabellarische Ziffern für hochzählende Zahlen (Endwert steht hart im HTML)
   Timing nach references/motion-werte.md: Reveal 600–750 ms, Stagger 70 ms, Easing expo-out. */
:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-ease-out:cubic-bezier(.22,1,.36,1);--m-rv:.75s;--m-stag:.07s}
.rv{opacity:0;transform:translateY(26px);transition:opacity var(--m-rv) var(--m-ease),transform var(--m-rv) var(--m-ease)}
.rv.l{transform:translateX(-32px)}
.rv.s{transform:scale(.96)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}
.stag>*{opacity:0;transform:translateY(20px);transition:opacity .65s var(--m-ease),transform .65s var(--m-ease);transition-delay:calc(var(--i,0) * var(--m-stag))}
.stag.in>*{opacity:1;transform:none}
.wr .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .02em .1em 0;margin-bottom:-.1em}
.wr .w i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform .9s var(--m-ease);transition-delay:calc(var(--i,0) * var(--m-stag))}
.wr.in .w i{transform:none}
.count{font-variant-numeric:tabular-nums}
.par{overflow:hidden}
.par img{will-change:transform}
@supports (animation-timeline: view()){
  .par img{animation:m-parY linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes m-parY{from{transform:translateY(-7%) scale(1.14)}to{transform:translateY(7%) scale(1.14)}}
}
@media(prefers-reduced-motion:reduce){
  .rv,.stag>*,.wr .w i{opacity:1;transform:none;transition:none}
  .par img{animation:none;transform:none}
}