/* Animations */

@keyframes animate-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes fanFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(44, 66, 218, 0.3); }
    50% { box-shadow: 0 0 20px rgba(44, 66, 218, 0.5); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Utility animation classes */
.animate-pulse {
    animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-fade {
    animation: fade-in 1s ease-out;
}

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

.animate-slide-right {
    animation: slide-right 0.8s ease-out;
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-gradient-shift {
    animation: gradient-shift 3s ease infinite;
    background-size: 200% 200%;
}

.animate-scale-in {
    animation: scale-in 0.5s ease-out;
}

/* Fan Stack Animation for Hero Carousel */
.fan-card-1 {
    animation: fanFloat 4s ease-in-out infinite;
    animation-delay: 0s;
}

.fan-card-2 {
    animation: fanFloat 4s ease-in-out infinite;
    animation-delay: 0.2s;
}

.fan-card-3 {
    animation: fanFloat 4s ease-in-out infinite;
    animation-delay: 0.4s;
}

/* Stagger animations for cards */
.animate-stagger-1 {
    animation: slide-up 0.8s ease-out 0.1s both;
}

.animate-stagger-2 {
    animation: slide-up 0.8s ease-out 0.2s both;
}

.animate-stagger-3 {
    animation: slide-up 0.8s ease-out 0.3s both;
}

.animate-stagger-4 {
    animation: slide-up 0.8s ease-out 0.4s both;
}

.animate-stagger-5 {
    animation: slide-up 0.8s ease-out 0.5s both;
}

.animate-stagger-6 {
    animation: slide-up 0.8s ease-out 0.6s both;
}

/* Hover animations */
.hover-lift:hover {
    transform: translateY(-5px);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
    animation: glow 0.5s ease-out forwards;
}

.hover-scale-110:hover {
    transform: scale(1.1);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-shadow:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-shadow-lg:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth transitions */
.transition-smooth {
    transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-smooth-fast {
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gradient animations */
.bg-gradient-animated {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* Navbar animations */
.navbar-slide-down {
    animation: slide-down 0.3s ease-out;
}

@keyframes slide-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Carousel autoplay animation */
@keyframes carousel-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.carousel-scroll {
    animation: carousel-scroll 20s linear infinite;
}

/* Button ripple effect */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple {
    animation: ripple 0.6s ease-out;
}

/* Fade in with delay */
.fade-in-delay-1 { animation: fade-in 1s ease-out 0.1s both; }
.fade-in-delay-2 { animation: fade-in 1s ease-out 0.2s both; }
.fade-in-delay-3 { animation: fade-in 1s ease-out 0.3s both; }
.fade-in-delay-4 { animation: fade-in 1s ease-out 0.4s both; }