/* ============================================
   SCROLL ANIMATIONS - Premium Effects V2
   ============================================ */

/* Base State - Hidden */
.animate-hidden {
    opacity: 0;
    will-change: transform, opacity, filter;
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.8s ease;
}

/* Base State - Visible (Triggered by JS) */
.animate-visible {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) rotate(0deg) skew(0deg) !important;
    filter: blur(0px) !important;
}

/* --- V1 Basic Effects --- */

/* 1. FADE UP */
[data-animate="fade-up"] {
    transform: translateY(60px);
}

/* 2. FADE VISUALS */
[data-animate="fade-right"] { transform: translateX(-60px); }
[data-animate="fade-left"] { transform: translateX(60px); }

/* 3. ZOOM IN */
[data-animate="zoom-in"] {
    transform: scale(0.85);
}

/* 4. BLUR REVEAL */
[data-animate="blur-reveal"] {
    filter: blur(20px);
    transform: scale(1.1);
    transition: opacity 1s ease, filter 1.2s ease, transform 1.2s ease;
}

/* --- V2 Advanced 3D & Elastic Effects --- */

/* 5. 3D FLIP REVEAL (Best for cards) */
/* Requires parent perspective */
[data-animate="flip-reveal"] {
    transform: perspective(2000px) rotateX(45deg) translateY(60px) scale(0.9);
    transform-origin: center bottom;
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1s ease;
}

/* 6. ELASTIC POP (Best for buttons/icons) */
[data-animate="elastic-pop"] {
    transform: scale(0.5);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}

/* 7. SKEW SLIDE (Dynamic entry) */
[data-animate="skew-slide"] {
    transform: translateX(-50px) skewX(-15deg);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
}

/* 8. STAGGER PARENT (Helper for JS) */
[data-animate-stagger] > .animate-hidden {
    /* Children will get delay via JS */
}

/* Stagger Delays (Pre-defined for manual use) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-hidden {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}