/* Reveal-on-scroll utilities
   ──────────────────────────
   Elements with [data-reveal] start invisible and fade in
   when they enter the viewport. Optional [data-reveal-delay]
   in milliseconds for stagger effects.

   The js controller adds .is-revealed when the element enters
   the viewport (or immediately on prefers-reduced-motion).
*/

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-reveal) var(--ease-reveal),
    transform var(--duration-reveal) var(--ease-reveal);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Fallback — if js fails to load, show content after a short delay
   instead of leaving it permanently invisible */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}