/* ==============================================
   Scroll Animations CSS
   Beautiful scroll-triggered animations
   ============================================== */

/* Base state - elements start invisible */
[data-animate] {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

/* Active state - elements become visible */
[data-animate].animate-in {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ==============================================
   FADE ANIMATIONS
   ============================================== */

/* Fade Up */
[data-animate="fade-up"] {
    transform: translateY(60px);
}

/* Fade Down */
[data-animate="fade-down"] {
    transform: translateY(-60px);
}

/* Fade Left */
[data-animate="fade-left"] {
    transform: translateX(60px);
}

/* Fade Right */
[data-animate="fade-right"] {
    transform: translateX(-60px);
}

/* Fade In (no movement) */
[data-animate="fade-in"] {
    transform: none;
}

/* ==============================================
   ZOOM ANIMATIONS
   ============================================== */

/* Zoom In */
[data-animate="zoom-in"] {
    transform: scale(0.8);
}

/* Zoom Out */
[data-animate="zoom-out"] {
    transform: scale(1.2);
}

/* Zoom In Up */
[data-animate="zoom-in-up"] {
    transform: scale(0.8) translateY(40px);
}

/* Zoom In Down */
[data-animate="zoom-in-down"] {
    transform: scale(0.8) translateY(-40px);
}

/* ==============================================
   SLIDE ANIMATIONS
   ============================================== */

/* Slide Up */
[data-animate="slide-up"] {
    transform: translateY(100px);
}

/* Slide Down */
[data-animate="slide-down"] {
    transform: translateY(-100px);
}

/* Slide Left */
[data-animate="slide-left"] {
    transform: translateX(100px);
}

/* Slide Right */
[data-animate="slide-right"] {
    transform: translateX(-100px);
}

/* ==============================================
   FLIP ANIMATIONS
   ============================================== */

/* Flip Up */
[data-animate="flip-up"] {
    transform: perspective(2500px) rotateX(45deg);
    transform-origin: center bottom;
}

[data-animate="flip-up"].animate-in {
    transform: perspective(2500px) rotateX(0deg);
}

/* Flip Down */
[data-animate="flip-down"] {
    transform: perspective(2500px) rotateX(-45deg);
    transform-origin: center top;
}

[data-animate="flip-down"].animate-in {
    transform: perspective(2500px) rotateX(0deg);
}

/* Flip Left */
[data-animate="flip-left"] {
    transform: perspective(2500px) rotateY(-45deg);
    transform-origin: right center;
}

[data-animate="flip-left"].animate-in {
    transform: perspective(2500px) rotateY(0deg);
}

/* Flip Right */
[data-animate="flip-right"] {
    transform: perspective(2500px) rotateY(45deg);
    transform-origin: left center;
}

[data-animate="flip-right"].animate-in {
    transform: perspective(2500px) rotateY(0deg);
}

/* ==============================================
   SPECIAL ANIMATIONS
   ============================================== */

/* Blur In */
[data-animate="blur-in"] {
    filter: blur(15px);
    transform: scale(0.95);
}

[data-animate="blur-in"].animate-in {
    filter: blur(0);
    transform: scale(1);
}

/* Bounce In */
[data-animate="bounce-in"] {
    transform: scale(0.5);
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Rotate In */
[data-animate="rotate-in"] {
    transform: rotate(-20deg) translateY(50px);
}

[data-animate="rotate-in"].animate-in {
    transform: rotate(0deg) translateY(0);
}

/* Text Reveal - for headings */
[data-animate="text-reveal"] {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translateX(-20px);
}

[data-animate="text-reveal"].animate-in {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateX(0);
}

/* Counter Up Effect */
[data-animate="counter-up"] {
    transform: translateY(30px);
}

/* Staggered Children */
[data-animate="stagger"] > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="stagger"].animate-in > * {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delay for children */
[data-animate="stagger"].animate-in > *:nth-child(1) { transition-delay: 0.05s; }
[data-animate="stagger"].animate-in > *:nth-child(2) { transition-delay: 0.1s; }
[data-animate="stagger"].animate-in > *:nth-child(3) { transition-delay: 0.15s; }
[data-animate="stagger"].animate-in > *:nth-child(4) { transition-delay: 0.2s; }
[data-animate="stagger"].animate-in > *:nth-child(5) { transition-delay: 0.25s; }
[data-animate="stagger"].animate-in > *:nth-child(6) { transition-delay: 0.3s; }
[data-animate="stagger"].animate-in > *:nth-child(7) { transition-delay: 0.35s; }
[data-animate="stagger"].animate-in > *:nth-child(8) { transition-delay: 0.4s; }
[data-animate="stagger"].animate-in > *:nth-child(9) { transition-delay: 0.45s; }
[data-animate="stagger"].animate-in > *:nth-child(10) { transition-delay: 0.5s; }
[data-animate="stagger"].animate-in > *:nth-child(n+11) { transition-delay: 0.55s; }

/* ==============================================
   DELAY MODIFIERS
   ============================================== */

[data-delay="100"] { transition-delay: 0.1s !important; }
[data-delay="200"] { transition-delay: 0.2s !important; }
[data-delay="300"] { transition-delay: 0.3s !important; }
[data-delay="400"] { transition-delay: 0.4s !important; }
[data-delay="500"] { transition-delay: 0.5s !important; }
[data-delay="600"] { transition-delay: 0.6s !important; }
[data-delay="700"] { transition-delay: 0.7s !important; }
[data-delay="800"] { transition-delay: 0.8s !important; }
[data-delay="900"] { transition-delay: 0.9s !important; }
[data-delay="1000"] { transition-delay: 1s !important; }

/* ==============================================
   DURATION MODIFIERS
   ============================================== */

[data-duration="fast"] { transition-duration: 0.4s !important; }
[data-duration="normal"] { transition-duration: 0.8s !important; }
[data-duration="slow"] { transition-duration: 1.2s !important; }
[data-duration="slower"] { transition-duration: 1.6s !important; }

/* ==============================================
   EASING MODIFIERS
   ============================================== */

[data-ease="linear"] { transition-timing-function: linear !important; }
[data-ease="ease"] { transition-timing-function: ease !important; }
[data-ease="ease-in"] { transition-timing-function: ease-in !important; }
[data-ease="ease-out"] { transition-timing-function: ease-out !important; }
[data-ease="ease-in-out"] { transition-timing-function: ease-in-out !important; }
[data-ease="bounce"] { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important; }
[data-ease="smooth"] { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* ==============================================
   COUNTER ANIMATION (for stats)
   ============================================== */

.stats__number {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.stats__number.counting {
    animation: pulse 0.3s ease infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ==============================================
   PARALLAX EFFECT (subtle)
   ============================================== */

[data-parallax] {
    transition: transform 0.1s ease-out;
}

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    
    [data-animate="blur-in"] {
        filter: none !important;
    }
}

/* Reduce animation intensity on mobile for performance */
@media (max-width: 768px) {
    [data-animate] {
        transition-duration: 0.5s;
    }
    
    [data-animate="fade-up"],
    [data-animate="fade-down"] {
        transform: translateY(30px);
    }
    
    [data-animate="fade-left"],
    [data-animate="fade-right"],
    [data-animate="slide-left"],
    [data-animate="slide-right"] {
        transform: translateX(30px);
    }
}