/**
 * ==============================================================================
 * Premium Scroll-Triggered Animation System
 * File: css/scroll-animations.css
 * Purpose: Buttery-smooth, physics-based scroll entrance and repeating animations.
 * ==============================================================================
 */

/* 1. Global Smooth Scroll */
html {
    scroll-behavior: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
}

/* 2. Core Reveal Base Classes */
.scroll-reveal,
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-fade,
.reveal-scale,
.scroll-animate,
.scroll-stagger-item {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* Directional Initial Offsets (Subtle 24px-30px to prevent jank/jumpiness) */
.reveal-up,
.scroll-reveal:not(.reveal-left):not(.reveal-right):not(.reveal-scale):not(.reveal-down):not(.reveal-fade) {
    transform: translate3d(0, 26px, 0);
}

.reveal-down {
    transform: translate3d(0, -26px, 0);
}

.reveal-left {
    transform: translate3d(-28px, 0, 0);
}

.reveal-right {
    transform: translate3d(28px, 0, 0);
}

.reveal-scale {
    transform: translate3d(0, 18px, 0) scale(0.95);
}

.reveal-fade {
    transform: translate3d(0, 14px, 0);
}

.scroll-stagger-item {
    transform: translate3d(0, 24px, 0);
}

/* 3. Visible States (Triggered by Intersection Observer) */
.scroll-reveal.is-visible,
.reveal-up.is-visible,
.reveal-down.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-fade.is-visible,
.reveal-scale.is-visible,
.scroll-animate.is-visible,
.scroll-stagger-item.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
}

/* 4. Natural Cascade Stagger Sequence (Quick & Elegant) */
.delay-1, .stagger-1 { transition-delay: 0.05s !important; }
.delay-2, .stagger-2 { transition-delay: 0.10s !important; }
.delay-3, .stagger-3 { transition-delay: 0.15s !important; }
.delay-4, .stagger-4 { transition-delay: 0.20s !important; }
.delay-5, .stagger-5 { transition-delay: 0.25s !important; }
.delay-6, .stagger-6 { transition-delay: 0.30s !important; }
.delay-7, .stagger-7 { transition-delay: 0.35s !important; }
.delay-8, .stagger-8 { transition-delay: 0.40s !important; }
.delay-9, .stagger-9 { transition-delay: 0.45s !important; }
.delay-10, .stagger-10 { transition-delay: 0.50s !important; }

/* 5. Interactive controls must never be blocked */
.scroll-reveal a,
.scroll-reveal button,
.scroll-reveal input,
.scroll-reveal select,
.scroll-reveal textarea,
.scroll-stagger-item a,
.scroll-stagger-item button {
    pointer-events: auto;
}

/* 6. Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right,
    .reveal-fade,
    .reveal-scale,
    .scroll-animate,
    .scroll-stagger-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}