/* wenlueducation motion — .reveal pattern
 *
 * Usage: add `class="reveal"` to any element you want to fade-up on scroll.
 * The element starts invisible + 20px down; motion.js adds the `.is-visible`
 * class when the element enters the viewport (25% threshold).
 *
 * Two layers of fallback:
 *   1. CSS transition on `.reveal -> .reveal.is-visible` runs even without
 *      Motion One — so if the CDN is blocked, motion.js can still trigger
 *      the class change and you get a CSS-driven reveal.
 *   2. <noscript> override in index.html sets `.reveal` to visible state
 *      so users with JS disabled don't see a blank page.
 *
 * If prefers-reduced-motion is on, elements skip the reveal entirely and
 * render in their final state immediately.
 */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
  transition:
    opacity   var(--wl-dur-reveal) var(--wl-ease-out),
    transform var(--wl-dur-reveal) var(--wl-ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}