/*
 * Reveal - subtiele fade-up animatie als elementen in viewport komen
 *
 * Wordt alleen actief als JS draait (html.js class).
 * Zonder JS: elementen direct zichtbaar (graceful fallback).
 * Respecteert prefers-reduced-motion.
 */

/* NB: reveal gebruikt de losse `translate`-property (niet `transform`),
   zodat component-hovers met `transform: translateY(...)` blijven werken
   i.p.v. overschreven te worden door .reveal.is-visible. */
.js .reveal {
  opacity:    0;
  translate:  0 20px;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              translate 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--transition-fast);
  /* alleen de entrance (opacity/translate) krijgt de stagger-delay; de
     hover (transform) reageert direct */
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms;
  will-change: opacity, translate;
}

.js .reveal.is-visible {
  opacity:   1;
  translate: 0 0;
}

/* Respect user preference voor minder beweging */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity:    1;
    translate:  none;
    transition: none;
  }
}