/* =================================================================
   MOTION & REVEALS (Enterprise Scroll Architecture)
   ================================================================= */

@media (prefers-reduced-motion: no-preference) {
    /* Base reveal state (Standalone or Group Items) */
    .js-reveal, .reveal-item {
        opacity: 0;
        will-change: opacity, transform;
        /* Enterprise SaaS Spring Easing: smooth deceleration */
        transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1), 
                    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Modifiers for direction */
    .reveal-up {
        transform: translateY(40px); /* Increased from 20px for a more luxurious float */
    }

    .reveal-fade {
        transform: translateY(0);
    }

    /* Active state added by JS */
    .js-reveal.is-visible, .reveal-item.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Subtle Background Parallax */
    @supports (animation-timeline: scroll()) {
        .parallax-bg {
            animation: parallax-bg linear both;
            animation-timeline: scroll(block nearest);
        }

        @keyframes parallax-bg {
            from { transform: translateY(-2%); }
            to { transform: translateY(5%); }
        }
    }
}

/* Fallback for users preferring reduced motion or JS disabled */
@media (prefers-reduced-motion: reduce) {
    .js-reveal, .reveal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .parallax-bg {
        animation: none !important;
    }
}