/* ── data-reveal: CSS fallback reveal for non-GSAP elements ── */
/* These elements use IntersectionObserver in reveal.js and are NOT
   animated by GSAP, so the CSS transition is safe here. */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  /* Use transform3d so the browser composites on the GPU */
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  /* Promote to compositor layer immediately, so no layout thrash on first paint */
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  /* Release GPU layer after animation is done */
  will-change: auto;
}

[data-reveal]:nth-child(1) { transition-delay:   0ms; }
[data-reveal]:nth-child(2) { transition-delay:  80ms; }
[data-reveal]:nth-child(3) { transition-delay: 160ms; }
[data-reveal]:nth-child(4) { transition-delay: 240ms; }
[data-reveal]:nth-child(5) { transition-delay: 320ms; }
[data-reveal]:nth-child(6) { transition-delay: 400ms; }

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}