/**
 * Reveal-on-scroll for the VC `animation` param (animate.css slug as class).
 * Only active when <html> carries .js-reveal, which the head snippet sets
 * after checking IntersectionObserver + prefers-reduced-motion. Without it
 * everything is simply visible.
 */
.js-reveal .fadeInUp,
.js-reveal .fadeIn,
.js-reveal .fadeInLeft,
.js-reveal .fadeInRight {
    opacity: 0;
    transition: opacity 1.05s var(--ease-reveal), transform 1.05s var(--ease-reveal);
}

.js-reveal .fadeInUp    { transform: translateY(20px); }
.js-reveal .fadeInLeft  { transform: translateX(-24px); }
.js-reveal .fadeInRight { transform: translateX(24px); }

.js-reveal .is-visible {
    opacity: 1;
    transform: none;
}

/* Staggered children: only inside an animated ancestor. An ancestor with
   .has-stagger stays put itself (no moving backgrounds) and only acts as
   the trigger for its children. */
.js-reveal .has-stagger {
    opacity: 1;
    transform: none;
}

.js-reveal :is(.fadeInUp, .fadeIn, .fadeInLeft, .fadeInRight) .reveal-child {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal);
    transition-delay: calc(var(--i, 0) * 90ms);
}

.js-reveal .is-visible .reveal-child {
    opacity: 1;
    transform: none;
}