/**
 * Modern Scroll Animations CSS
 * Kaarten vliegen van buiten naar binnen tijdens scrollen
 */

/* Base scroll animation class */
.scroll-animate {
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: var(--animation-delay, 0ms);
    will-change: transform, opacity;
}

/* Animated in state - alle animaties eindigen hier */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) !important;
}

/* Animated out state - kaarten verdwijnen geleidelijk */
.scroll-animate.animate-out {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Slide Up Animation - van onder naar boven */
.scroll-animate.slide-up {
    transform: translateY(120px);
}

.scroll-animate.slide-up.animate-out {
    transform: translateY(80px);
}

/* Slide Left Animation - van links naar binnen */
.scroll-animate.slide-left {
    transform: translateX(-150px);
}

.scroll-animate.slide-left.animate-out {
    transform: translateX(-100px);
}

/* Slide Right Animation - van rechts naar binnen */
.scroll-animate.slide-right {
    transform: translateX(150px);
}

.scroll-animate.slide-right.animate-out {
    transform: translateX(100px);
}

/* Fade Scale Animation - fade in met lichte zoom */
.scroll-animate.fade-scale {
    transform: scale(0.8) translateY(40px);
}

.scroll-animate.fade-scale.animate-out {
    transform: scale(0.9) translateY(30px);
}

/* Hover effecten voor geanimeerde elementen */
.scroll-animate.animate-in:hover {
    transform: translateY(-4px) scale(1.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Speciale behandeling voor pricing cards */
.pricing-card.scroll-animate.fade-scale.animate-in {
    transform: scale(1) translateY(0);
}

.pricing-card.scroll-animate.fade-scale.animate-in:hover {
    transform: translateY(-6px) scale(1.03);
}

/* Verbeterde animaties voor specifieke elementen */

/* Stat Cards - elegante side-to-side beweging */
.stat-card.scroll-animate {
    transition-duration: 1.4s;
}

.stat-card.scroll-animate.slide-left {
    transform: translateX(-180px) translateY(60px);
}

.stat-card.scroll-animate.slide-left.animate-out {
    transform: translateX(-120px) translateY(40px);
}

.stat-card.scroll-animate.slide-right {
    transform: translateX(180px) translateY(60px);
}

.stat-card.scroll-animate.slide-right.animate-out {
    transform: translateX(120px) translateY(40px);
}

/* Pillar Cards - dramatische wave effect */
.pillar-card.scroll-animate {
    transition-duration: 1.6s;
}

.pillar-card.scroll-animate.slide-left {
    transform: translateX(-200px) translateY(80px);
}

.pillar-card.scroll-animate.slide-left.animate-out {
    transform: translateX(-140px) translateY(50px);
}

.pillar-card.scroll-animate.slide-up {
    transform: translateY(150px);
}

.pillar-card.scroll-animate.slide-up.animate-out {
    transform: translateY(100px);
}

.pillar-card.scroll-animate.slide-right {
    transform: translateX(200px) translateY(80px);
}

.pillar-card.scroll-animate.slide-right.animate-out {
    transform: translateX(140px) translateY(50px);
}

/* Platform Cards - synchronized entrance */
.platform-card.scroll-animate {
    transition-duration: 1.3s;
}

.platform-card.scroll-animate.slide-left {
    transform: translateX(-160px) translateY(80px);
}

.platform-card.scroll-animate.slide-left.animate-out {
    transform: translateX(-110px) translateY(50px);
}

.platform-card.scroll-animate.slide-up {
    transform: translateY(130px);
}

.platform-card.scroll-animate.slide-up.animate-out {
    transform: translateY(90px);
}

.platform-card.scroll-animate.slide-right {
    transform: translateX(160px) translateY(80px);
}

.platform-card.scroll-animate.slide-right.animate-out {
    transform: translateX(110px) translateY(50px);
}

/* Episode Cards - sequential reveal */
.episode-card.scroll-animate {
    transition-duration: 1.1s;
}

.episode-card.scroll-animate.slide-up {
    transform: translateY(120px);
}

.episode-card.scroll-animate.slide-up.animate-out {
    transform: translateY(80px);
}

/* Abdul Biography - dramatic entrance */
.abdul-biography.scroll-animate {
    transition-duration: 1.8s;
}

.abdul-biography.scroll-animate.fade-scale {
    transform: scale(0.7) translateY(100px);
}

.abdul-biography.scroll-animate.fade-scale.animate-out {
    transform: scale(0.85) translateY(60px);
}

/* Partner Logos - rolling in effect */
.partner-logo.scroll-animate {
    transition-duration: 1.0s;
}

.partner-logo.scroll-animate.slide-up {
    transform: translateY(80px);
}

.partner-logo.scroll-animate.slide-up.animate-out {
    transform: translateY(50px);
}

/* Why Choose Card - impressive entrance */
.why-choose-card.scroll-animate {
    transition-duration: 1.5s;
}

.why-choose-card.scroll-animate.slide-left {
    transform: translateX(-220px) translateY(60px);
}

.why-choose-card.scroll-animate.slide-left.animate-out {
    transform: translateX(-150px) translateY(40px);
}

/* Testimonial Card - gentle reveal */
.testimonial-card.scroll-animate {
    transition-duration: 1.2s;
}

.testimonial-card.scroll-animate.fade-scale {
    transform: scale(0.8) translateY(70px);
}

.testimonial-card.scroll-animate.fade-scale.animate-out {
    transform: scale(0.9) translateY(45px);
}

/* Signup Card - attention-grabbing */
.signup-card.scroll-animate {
    transition-duration: 1.4s;
}

.signup-card.scroll-animate.slide-right {
    transform: translateX(180px) translateY(70px);
}

.signup-card.scroll-animate.slide-right.animate-out {
    transform: translateX(120px) translateY(45px);
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
    /* Kleinere maar nog steeds dramatische transform waarden op mobiel */
    .scroll-animate.slide-left {
        transform: translateX(-80px);
    }
    
    .scroll-animate.slide-left.animate-out {
        transform: translateX(-60px);
    }
    
    .scroll-animate.slide-right {
        transform: translateX(80px);
    }
    
    .scroll-animate.slide-right.animate-out {
        transform: translateX(60px);
    }
    
    .scroll-animate.slide-up {
        transform: translateY(80px);
    }
    
    .scroll-animate.slide-up.animate-out {
        transform: translateY(60px);
    }
    
    .scroll-animate.fade-scale {
        transform: scale(0.85) translateY(40px);
    }
    
    .scroll-animate.fade-scale.animate-out {
        transform: scale(0.92) translateY(30px);
    }
    
    /* Kortere animatie duur op mobiel */
    .scroll-animate {
        transition-duration: 0.9s !important;
    }
    
    /* Minder hover effect op mobiel */
    .scroll-animate.animate-in:hover {
        transform: translateY(-2px) scale(1.01);
    }
}

/* Reduced motion ondersteuning */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        transition: opacity 0.3s ease !important;
        transform: none !important;
    }
    
    .scroll-animate.animate-in {
        opacity: 1;
        transform: none !important;
    }
    
    .scroll-animate.animate-in:hover {
        transform: none !important;
    }
}

/* High contrast ondersteuning */
@media (prefers-contrast: high) {
    .scroll-animate {
        outline: 1px solid transparent;
    }
    
    .scroll-animate.animate-in {
        outline: none;
    }
}

/* Focus states voor accessibility */
.scroll-animate:focus-within {
    outline: 2px solid var(--primary-orange);
    outline-offset: 4px;
}

/* Loading state */
.scroll-animate.loading {
    opacity: 0.3;
    transform: scale(0.98);
    transition: all 0.3s ease;
}

/* Debug mode (add ?debug=scroll to URL) */
.debug-scroll .scroll-animate {
    outline: 2px dashed rgba(255, 107, 53, 0.5);
}

.debug-scroll .scroll-animate.animate-in {
    outline-color: rgba(76, 175, 80, 0.8);
}

/* Performance optimizations */
.scroll-animate {
    backface-visibility: hidden;
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* Ensure glassmorphism effects work with animations */
.scroll-animate.glass-layer {
    backdrop-filter: blur(0px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.3s ease;
}

.scroll-animate.glass-layer.animate-in {
    backdrop-filter: blur(12px);
}