/* ===================================================================
 * Fancy Scroll Animations - Staggered Fade-Up with Blur
 * Premium scroll-triggered animations for all sections
 * ================================================================ */

/* ===================================================================
 * BASE ANIMATION STATES
 * ================================================================ */

/* Hide elements before animation */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    filter: blur(10px);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Visible state - triggered by JavaScript */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ===================================================================
 * STAGGERED DELAYS - Cascade Effect
 * ================================================================ */

/* First child - appears immediately */
.animate-on-scroll:nth-child(1) {
    transition-delay: 0ms;
}

.animate-on-scroll:nth-child(2) {
    transition-delay: 100ms;
}

.animate-on-scroll:nth-child(3) {
    transition-delay: 200ms;
}

.animate-on-scroll:nth-child(4) {
    transition-delay: 300ms;
}

.animate-on-scroll:nth-child(5) {
    transition-delay: 400ms;
}

.animate-on-scroll:nth-child(6) {
    transition-delay: 500ms;
}

.animate-on-scroll:nth-child(7) {
    transition-delay: 600ms;
}

.animate-on-scroll:nth-child(8) {
    transition-delay: 700ms;
}

.animate-on-scroll:nth-child(9) {
    transition-delay: 800ms;
}

.animate-on-scroll:nth-child(10) {
    transition-delay: 900ms;
}

/* ===================================================================
 * SECTION HEADERS - Extra Fancy
 * ================================================================ */

.section-header.animate-on-scroll {
    opacity: 0;
    transform: translateY(80px) scale(0.9);
    filter: blur(15px);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-header.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Section badge - appears first */
.section-badge.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
    filter: blur(8px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-badge.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Headings - dramatic entrance */
h2.animate-on-scroll,
h3.animate-on-scroll {
    opacity: 0;
    transform: translateY(60px) scale(0.92);
    filter: blur(12px);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

h2.animate-on-scroll.is-visible,
h3.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* ===================================================================
 * CARDS - Premium Reveal
 * ================================================================ */

.card.animate-on-scroll,
.pillar-item.animate-on-scroll,
.industry-card.animate-on-scroll,
.guide-card.animate-on-scroll,
.pitfall-card.animate-on-scroll,
.location-card.animate-on-scroll,
.expert-card.animate-on-scroll,
.testimonial-card.animate-on-scroll,
.faq-item.animate-on-scroll {
    opacity: 0;
    transform: translateY(70px) scale(0.93) rotateX(10deg);
    filter: blur(12px);
    transition: all 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card.animate-on-scroll.is-visible,
.pillar-item.animate-on-scroll.is-visible,
.industry-card.animate-on-scroll.is-visible,
.guide-card.animate-on-scroll.is-visible,
.pitfall-card.animate-on-scroll.is-visible,
.location-card.animate-on-scroll.is-visible,
.expert-card.animate-on-scroll.is-visible,
.testimonial-card.animate-on-scroll.is-visible,
.faq-item.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0);
}

/* ===================================================================
 * GRID ITEMS - Staggered Grid Reveal
 * ================================================================ */

.grid .animate-on-scroll {
    opacity: 0;
    transform: translateY(60px) scale(0.94);
    filter: blur(10px);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.grid .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Grid stagger pattern */
.grid .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.grid .animate-on-scroll:nth-child(2) { transition-delay: 150ms; }
.grid .animate-on-scroll:nth-child(3) { transition-delay: 300ms; }
.grid .animate-on-scroll:nth-child(4) { transition-delay: 450ms; }
.grid .animate-on-scroll:nth-child(5) { transition-delay: 600ms; }
.grid .animate-on-scroll:nth-child(6) { transition-delay: 750ms; }

/* ===================================================================
 * SPECIAL SECTIONS
 * ================================================================ */

/* Stats counter - no scale, just fade and slide */
.stat-item.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(8px);
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-item.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Process steps - sequential reveal */
.process-step.animate-on-scroll {
    opacity: 0;
    transform: translateY(80px) scale(0.9) rotateY(-10deg);
    filter: blur(15px);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

.process-step.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateY(0deg);
    filter: blur(0);
}

/* Feature items - slide from side */
.feature-item.animate-on-scroll {
    opacity: 0;
    transform: translateX(-60px) translateY(40px) scale(0.95);
    filter: blur(10px);
    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-item.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
}

/* ===================================================================
 * TEXT CONTENT - Elegant Fade
 * ================================================================ */

p.animate-on-scroll,
.section-description.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(6px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

p.animate-on-scroll.is-visible,
.section-description.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ===================================================================
 * IMAGES & MEDIA - Scale Reveal
 * ================================================================ */

img.animate-on-scroll,
.visual-container.animate-on-scroll {
    opacity: 0;
    transform: scale(0.85);
    filter: blur(20px);
    transition: all 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

img.animate-on-scroll.is-visible,
.visual-container.animate-on-scroll.is-visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* ===================================================================
 * MOBILE OPTIMIZATIONS
 * ================================================================ */

@media (max-width: 768px) {
    /* Reduce animation intensity on mobile */
    .animate-on-scroll {
        transform: translateY(40px) scale(0.97);
        filter: blur(6px);
        transition-duration: 0.8s;
    }
    
    .section-header.animate-on-scroll {
        transform: translateY(50px) scale(0.95);
        filter: blur(8px);
    }
    
    .card.animate-on-scroll {
        transform: translateY(40px) scale(0.96);
        filter: blur(8px);
    }
    
    /* Reduce stagger delays on mobile */
    .animate-on-scroll:nth-child(n) {
        transition-delay: 0ms !important;
    }
    
    .grid .animate-on-scroll:nth-child(1) { transition-delay: 0ms !important; }
    .grid .animate-on-scroll:nth-child(2) { transition-delay: 100ms !important; }
    .grid .animate-on-scroll:nth-child(3) { transition-delay: 200ms !important; }
}

@media (prefers-reduced-motion: reduce) {
    /* Respect user's motion preferences */
    .animate-on-scroll {
        transform: none !important;
        filter: none !important;
        transition: opacity 0.3s ease !important;
    }
}

/* ===================================================================
 * PERFORMANCE OPTIMIZATION
 * ================================================================ */

/* Use GPU acceleration */
.animate-on-scroll {
    will-change: transform, opacity, filter;
}

.animate-on-scroll.is-visible {
    will-change: auto;
}