/* ==========================================================================
   Reveals (design.md §15): inhoud is NOOIT standaard verborgen. Pas als reveal.js klaar is (html.rr)
   krijgt [data-reveal] zijn beginstand. Beeld ("image") onthult van onder naar boven.
   ========================================================================== */

.rr [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(20px);
}

.rr [data-reveal] {
  transition:
    opacity var(--dur-medium) var(--ease-reveal),
    transform var(--dur-medium) var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* Beeld onthult binnen het (soms schuin afgeknipte) element zelf: het geobserveerde element houdt zijn eigen vorm,
   anders ziet IntersectionObserver nooit een zichtbaar vlak en verschijnt het beeld niet (zo in het prototype). */
.rr [data-reveal="image"]:not(.is-in) {
  opacity: 1;
  transform: none;
}

.rr [data-reveal="image"] > img {
  transition: clip-path var(--dur-slow) var(--ease-reveal);
}

.rr [data-reveal="image"]:not(.is-in) > img {
  clip-path: inset(100% 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .rr [data-reveal]:not(.is-in) {
    transform: none;
  }
}