/* ============================================================
 * Entrance-Animations — Reveal-System
 * ------------------------------------------------------------
 * Elemente mit [data-reveal] starten als unsichtbar (opacity 0,
 * translate3d 0 32px) und animieren in den finalen Zustand sobald
 * die JS in reveals.js die .is-revealed-Klasse setzt.
 *
 * Delay wird inline gesetzt (transition-delay) — JS staggered.
 *
 * Bei prefers-reduced-motion: Animationen aus, Inhalt direkt da.
 *
 * Hinweise:
 *   - translate3d (statt translateY) erzwingt GPU-Compositor-Layer.
 *     Verhindert Layout-Anchoring-Issues beim Page-Load Scroll.
 *   - KEIN will-change: das würde Browser dazu zwingen den Layer
 *     dauerhaft zu reservieren — Memory-Fresser und kann auf
 *     manchen Setups Scroll-Glitches beim Reload triggern.
 * ============================================================ */

/* Scroll-Anchoring deaktivieren während Reveals laufen — Browser kompensiert
   sonst dabei für vermeintliche Layout-Shifts und scrollt minimal. */
html { overflow-anchor: none; }

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* A11y: Bei reduced-motion alles sofort sichtbar, keine Transition */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}