/**
 * Sapp Blocks — Scroll Animations CSS.
 *
 * Elements with [data-sapp-animation] start in an invisible/offset state.
 * The JS adds .is-visible when they scroll into the viewport (IntersectionObserver).
 *
 * Reduced-motion: transitions disabled; elements show immediately.
 *
 * @package Sapp\Blocks
 */

/* Base: all animated elements start hidden */
[data-sapp-animation] {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.6s;
}

/* Initial states */
[data-sapp-animation="fade-up"] {
    opacity: 0;
    transform: translateY(32px);
}

[data-sapp-animation="fade-in"] {
    opacity: 0;
    transform: none;
}

[data-sapp-animation="zoom-in"] {
    opacity: 0;
    transform: scale(0.9);
}

[data-sapp-animation="slide-left"] {
    opacity: 0;
    transform: translateX(-40px);
}

[data-sapp-animation="slide-right"] {
    opacity: 0;
    transform: translateX(40px);
}

/* Visible state — added by JS */
[data-sapp-animation].is-visible {
    opacity: 1;
    transform: none;
}

/* Reduced motion: show immediately with no transition */
@media (prefers-reduced-motion: reduce) {
    [data-sapp-animation] {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}