/* -------------------------------------------------------------------------
   Scroll-reveal animations.

   Ported from the original Joomla site, which drove SP Page Builder addon
   animations through animate.css + Waypoints: fadeIn, fadeInUp, fadeInLeft,
   fadeInRight, zoomIn and zoomInUp, with animationduration 300 ms and staggered
   animationdelays of 100-1000 ms.

   Two deliberate differences:
     - modest pixel offsets instead of animate.css' 100% translations, which
       turned every wide card into a slide rather than a fade;
     - a 600 ms default duration (300 ms reads as a jump on full-width blocks).
   Both are per-element configurable:
     data-reveal="fadeInUp" data-reveal-delay="120" data-reveal-duration="300"

   Elements are only hidden while <html> carries .js-anim, which is set by an
   inline <head> script and removed again if the observer never starts — so
   nothing can stay invisible when JavaScript is unavailable or fails.
   ------------------------------------------------------------------------- */

.js-anim [data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
}

.js-anim [data-reveal].is-visible {
    will-change: auto;
    animation-name: twFadeUp;
    animation-duration: var(--reveal-duration, 600ms);
    animation-delay: var(--reveal-delay, 0ms);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
}

.js-anim [data-reveal="fadeIn"].is-visible      { animation-name: twFadeIn; }
.js-anim [data-reveal="fadeInDown"].is-visible  { animation-name: twFadeDown; }
.js-anim [data-reveal="fadeInLeft"].is-visible  { animation-name: twFadeLeft; }
.js-anim [data-reveal="fadeInRight"].is-visible { animation-name: twFadeRight; }
.js-anim [data-reveal="zoomIn"].is-visible      { animation-name: twZoomIn; }
.js-anim [data-reveal="zoomInUp"].is-visible    { animation-name: twZoomInUp; }

@keyframes twFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes twFadeUp {
    from { opacity: 0; transform: translate3d(0, 28px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes twFadeDown {
    from { opacity: 0; transform: translate3d(0, -28px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes twFadeLeft {
    from { opacity: 0; transform: translate3d(-32px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes twFadeRight {
    from { opacity: 0; transform: translate3d(32px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes twZoomIn {
    from { opacity: 0; transform: scale3d(0.92, 0.92, 0.92); }
    to   { opacity: 1; transform: none; }
}

@keyframes twZoomInUp {
    from { opacity: 0; transform: translate3d(0, 24px, 0) scale3d(0.94, 0.94, 0.94); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .js-anim [data-reveal] {
        opacity: 1;
        will-change: auto;
    }

    .js-anim [data-reveal].is-visible {
        animation: none;
    }
}