/* Animation Styles - Replace AOS with vanilla JS + CSS approach */

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */

/* Slide Up animations */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale Up animations */
@keyframes scaleUpFade {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce Up animations */
@keyframes bounceUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide from left */
@keyframes slideLeftFade {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide from right */
@keyframes slideRightFade {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Rotate Scale Up */
@keyframes rotateScaleUp {
    from {
        opacity: 0;
        transform: scale(0.9) rotateY(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotateY(0);
    }
}

/* ============================================
   ANIMATION CLASSES
   ============================================ */

/* Base state - before animation triggers */
[data-animate] {
    opacity: 0;
}

/* After animation triggers */
[data-animate].is-animated {
    animation-fill-mode: forwards;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animation variants */
[data-animate="slideUp"].is-animated {
    animation-name: slideUpFade;
}

[data-animate="scaleUp"].is-animated {
    animation-name: scaleUpFade;
}

[data-animate="bounce"].is-animated {
    animation-name: bounceUp;
}

[data-animate="slideLeft"].is-animated {
    animation-name: slideLeftFade;
}

[data-animate="slideRight"].is-animated {
    animation-name: slideRightFade;
}

[data-animate="rotateScale"].is-animated {
    animation-name: rotateScaleUp;
}

/* ============================================
   STAGGERED ANIMATIONS (children)
   ============================================ */

/* Children elements with stagger */
[data-animate-child] {
    opacity: 0;
}

[data-animate-child].is-animated {
    animation-fill-mode: forwards;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-name: slideUpFade;
}

/* Stagger delay calculation */
[data-stagger] [data-animate-child]:nth-child(1) { animation-delay: 0ms; }
[data-stagger] [data-animate-child]:nth-child(2) { animation-delay: var(--stagger-delay, 100ms); }
[data-stagger] [data-animate-child]:nth-child(3) { animation-delay: calc(var(--stagger-delay, 100ms) * 2); }
[data-stagger] [data-animate-child]:nth-child(4) { animation-delay: calc(var(--stagger-delay, 100ms) * 3); }
[data-stagger] [data-animate-child]:nth-child(5) { animation-delay: calc(var(--stagger-delay, 100ms) * 4); }
[data-stagger] [data-animate-child]:nth-child(6) { animation-delay: calc(var(--stagger-delay, 100ms) * 5); }
[data-stagger] [data-animate-child]:nth-child(7) { animation-delay: calc(var(--stagger-delay, 100ms) * 6); }
[data-stagger] [data-animate-child]:nth-child(8) { animation-delay: calc(var(--stagger-delay, 100ms) * 7); }
[data-stagger] [data-animate-child]:nth-child(n+9) { animation-delay: calc(var(--stagger-delay, 100ms) * 8); }

/* ============================================
   PREFERS REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate-child] {
        animation: none !important;
        opacity: 1 !important;
    }
}