/* Bewegung: Reveal + Parallax. Läuft nur, wenn JavaScript aktiv ist (Klasse .js an <html>, gesetzt von boot.js).
   Ohne JS oder bei „Bewegung reduzieren“ sind alle Inhalte sofort sichtbar.
   Hinweis: data-reveal und data-parallax nicht am selben Element kombinieren (beide nutzen transform). */
.js [data-reveal] {
  opacity: 0; transform: translateY(var(--reveal-distance, 24px));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="left"] { transform: translateX(calc(var(--reveal-distance, 24px) * -1)); }
.js [data-reveal="right"] { transform: translateX(var(--reveal-distance, 24px)); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal="left"], .js [data-reveal="right"] { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none; will-change: auto; }
  .ref-card, .ref-card__link .icon, .stat-card--link, .btn, .btn__icon, .btn .icon, .card, .service-card, .service-card__link .icon, .toast, .icon-btn, .tabs__tab { transition: none; }
  .btn:hover > .icon, .btn:hover .btn__icon, .btn:active, .service-card:hover, .service-card:focus-within, .ref-card:hover, .ref-card:focus-within, .card--hover:hover, .card--hover:focus-within { transform: none; }
  .toast { animation: none; }
}