/* ============================================
   Professional Animations System
   Lightweight, performant, accessible
   ============================================ */

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Base Animation Classes ===== */
.ep-animate-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
}

.ep-animate-on-scroll.ep-animated {
    opacity: 1;
}

/* ===== Exclude Catalog Page from Animations ===== */
.catalog-main .ep-animate-on-scroll,
.catalog-main .catalog-item,
.catalog-main .catalog-grid,
.catalog-main section,
.catalog-grid-section,
.catalog-grid-section *,
#catalogGrid,
#catalogGrid * {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
}

/* ===== Fade In Animations ===== */
@keyframes epFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes epFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes epFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes epFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes epFadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Scale Animations ===== */
@keyframes epScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes epScaleUp {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Slide Animations ===== */
@keyframes epSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes epSlideDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Stagger Animation Delays ===== */
.ep-animate-delay-1 { animation-delay: 0.1s; }
.ep-animate-delay-2 { animation-delay: 0.2s; }
.ep-animate-delay-3 { animation-delay: 0.3s; }
.ep-animate-delay-4 { animation-delay: 0.4s; }
.ep-animate-delay-5 { animation-delay: 0.5s; }

/* ===== Animation Variants ===== */
.ep-animate-fade-in {
    animation: epFadeIn 0.6s ease-out forwards;
}

.ep-animate-fade-in-up {
    animation: epFadeInUp 0.7s ease-out forwards;
}

.ep-animate-fade-in-down {
    animation: epFadeInDown 0.7s ease-out forwards;
}

.ep-animate-fade-in-left {
    animation: epFadeInLeft 0.7s ease-out forwards;
}

.ep-animate-fade-in-right {
    animation: epFadeInRight 0.7s ease-out forwards;
}

.ep-animate-scale-in {
    animation: epScaleIn 0.6s ease-out forwards;
}

.ep-animate-scale-up {
    animation: epScaleUp 0.7s ease-out forwards;
}

.ep-animate-slide-up {
    animation: epSlideUp 0.8s ease-out forwards;
}

.ep-animate-slide-down {
    animation: epSlideDown 0.8s ease-out forwards;
}

/* ===== Section-Specific Animations ===== */
/* Hero Slider - Already has animations, keep as is */

/* Products Section */
.products-showcase-section.ep-animated {
    animation: epFadeInUp 0.8s ease-out forwards;
}

/* Video Section */
.home-video-section.ep-animated {
    animation: epFadeIn 0.7s ease-out forwards;
}

/* About Section */
.about-section-new.ep-animated {
    animation: epFadeInUp 0.8s ease-out forwards;
}

.about-section-new .about-grid > * {
    opacity: 0;
    animation: epFadeInUp 0.7s ease-out forwards;
}

.about-section-new.ep-animated .about-grid > *:nth-child(1) { animation-delay: 0.1s; }
.about-section-new.ep-animated .about-grid > *:nth-child(2) { animation-delay: 0.2s; }
.about-section-new.ep-animated .about-grid > *:nth-child(3) { animation-delay: 0.3s; }
.about-section-new.ep-animated .about-grid > *:nth-child(4) { animation-delay: 0.4s; }

/* Industries Section */
.industries-section.ep-animated {
    animation: epFadeInUp 0.8s ease-out forwards;
}

.industries-section .industry-card {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.industries-section.ep-animated .industry-card {
    opacity: 1;
    animation: epScaleIn 0.6s ease-out forwards;
}

.industries-section.ep-animated .industry-card:nth-child(1) { animation-delay: 0.1s; }
.industries-section.ep-animated .industry-card:nth-child(2) { animation-delay: 0.2s; }
.industries-section.ep-animated .industry-card:nth-child(3) { animation-delay: 0.3s; }
.industries-section.ep-animated .industry-card:nth-child(4) { animation-delay: 0.4s; }
.industries-section.ep-animated .industry-card:nth-child(5) { animation-delay: 0.5s; }
.industries-section.ep-animated .industry-card:nth-child(6) { animation-delay: 0.6s; }

/* Contact/Location Section */
.location-section.ep-animated {
    animation: epFadeInUp 0.8s ease-out forwards;
}

/* Product Cards - Stagger Animation */
.product-card.ep-animate-on-scroll,
.industry-card.ep-animate-on-scroll,
.glass-jars-card.ep-animate-on-scroll,
.metal-lids-card.ep-animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.product-card.ep-animate-on-scroll.ep-animated,
.industry-card.ep-animate-on-scroll.ep-animated,
.glass-jars-card.ep-animate-on-scroll.ep-animated,
.metal-lids-card.ep-animate-on-scroll.ep-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Section Headers */
.section-header.ep-animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-header.ep-animate-on-scroll.ep-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Buttons - Subtle hover enhancement */
.btn-primary,
.btn-secondary,
.slide-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover,
.btn-secondary:hover,
.slide-btn:hover {
    transform: translateY(-2px);
}

/* Performance Optimization */
.ep-animate-on-scroll {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .ep-animate-on-scroll {
        /* Reduce animation distance on mobile */
        transform: translateY(15px) !important;
    }
    
    @keyframes epFadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}