/* Custom animations to replace Framer Motion */

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide up animation */
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Blur reveal animation */
@keyframes blurReveal {
    from {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0);
    }
}

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

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

/* Animation utility classes */
.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out forwards;
}

.animate-blur-reveal {
    animation: blurReveal 0.36s ease-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
}

/* Initial states for animations */
.opacity-0 {
    opacity: 0;
}

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

/* Stagger animation delays */
.animate-delay-1 {
    animation-delay: 0.1s;
}

.animate-delay-2 {
    animation-delay: 0.2s;
}

.animate-delay-3 {
    animation-delay: 0.3s;
}

.animate-delay-4 {
    animation-delay: 0.4s;
}