/* =========================================================================
   Scroll-based reveal animations (site-wide)
   - Elements start hidden and animate in as they enter the viewport.
   - Driven by js/scroll-animations.js, which adds `.is-visible` via an
     IntersectionObserver. Direction is set with the `data-reveal` attribute
     ("up" | "left" | "right" | "zoom"); stagger is set with `--reveal-delay`.
   - Fully disabled for users who prefer reduced motion.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

    [data-reveal] {
        opacity: 0;
        transform: translateY(32px);
        transition:
            opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
            transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
        transition-delay: var(--reveal-delay, 0s);
        will-change: opacity, transform;
    }

    [data-reveal="left"] {
        transform: translateX(-44px);
    }

    [data-reveal="right"] {
        transform: translateX(44px);
    }

    [data-reveal="zoom"] {
        transform: scale(0.92);
    }

    /* Revealed state — animate back to the natural position. */
    [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Safety net: if JS is unavailable, nothing is permanently hidden. */
.no-js [data-reveal],
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}