/* Premium Scroll Animations - Mobile First & Performance Optimized */
:root {
    --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Initial States */
[data-animate],
[data-animate-section] h2,
[data-animate-section] .category-card {
    opacity: 0;
    will-change: transform, opacity;
}

/* Animations Triggered Only When Class Added */
.animate-from-left {
    animation: premiumSlideInLeft 1.2s var(--ease-premium) forwards;
}

.animate-from-right {
    animation: premiumSlideInRight 1.2s var(--ease-premium) forwards;
}

.animate-fade-up {
    animation: premiumFadeUp 1.2s var(--ease-premium) forwards;
}

.animate-fade {
    animation: premiumFadeIn 1.5s var(--ease-premium) forwards;
}

/* Mobile Optimizations - Reduce travel distance for smoothness */
@media (max-width: 768px) {
    .animate-from-left {
        animation-name: premiumSlideInLeftMobile;
    }

    .animate-from-right {
        animation-name: premiumSlideInRightMobile;
    }
}

/* Keyframes */
@keyframes premiumSlideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes premiumSlideInLeftMobile {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes premiumSlideInRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes premiumSlideInRightMobile {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes premiumFadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes premiumFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Stagger Delays */
.delay-100 {
    animation-delay: 100ms;
}

.delay-150 {
    animation-delay: 150ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

.delay-600 {
    animation-delay: 600ms;
}

.delay-700 {
    animation-delay: 700ms;
}

.delay-800 {
    animation-delay: 800ms;
}