/*
 * 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.
 */

.js .reveal {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity:   1;
  transform: translateY(0);
}

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