/* Beweging — ingetogen, nooit inhoud verbergend zonder vangnet.
   1. Hero: eenmalige introductie bij het laden (transform + opacity).
   2. Secties: scroll-reveal via CSS scroll-timelines (Chrome/Edge).
      Andere browsers: animations.js zet .has-reveal op <html> en .is-visible per element.
      Zonder JS of ondersteuning blijft alles gewoon zichtbaar.
   3. prefers-reduced-motion: alles uit. */

@keyframes rise {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to { opacity: 1; transform: none; }
}

@keyframes settle {
  from { transform: scale(1.04); }
  to { transform: none; }
}

@keyframes wipe {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise var(--duration-reveal) var(--ease-out) both;
  }

  .rise--1 { animation-delay: 80ms; }
  .rise--2 { animation-delay: 180ms; }
  .rise--3 { animation-delay: 300ms; }

  .hero__media img {
    animation: settle 1.6s var(--ease-out) both;
  }

  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    [data-reveal='wipe'] {
      animation-name: wipe;
      animation-range: entry 0% cover 35%;
    }

    [data-reveal-step='2'] { animation-range: entry 8% entry 63%; }
    [data-reveal-step='3'] { animation-range: entry 16% entry 71%; }
    [data-reveal-step='4'] { animation-range: entry 24% entry 79%; }
  }

  /* Fallback via IntersectionObserver (animations.js) */
  .has-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
  }

  .has-reveal [data-reveal='wipe'] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--ease-out);
  }

  .has-reveal [data-reveal-step='2'] { transition-delay: 80ms; }
  .has-reveal [data-reveal-step='3'] { transition-delay: 160ms; }
  .has-reveal [data-reveal-step='4'] { transition-delay: 240ms; }

  .has-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }

  /* Uitklapblokken: zachte opening waar de browser dit ondersteunt */
  @supports (interpolate-size: allow-keywords) {
    .accordion {
      interpolate-size: allow-keywords;
    }

    .accordion__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 400ms var(--ease-out), content-visibility 400ms allow-discrete;
    }

    .accordion__item[open]::details-content {
      block-size: auto;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}