/* Banner Animation Styles */
.banner-slide {
    transition: all 0.3s ease;
}

.banner-image {
    transition: transform 0.3s ease;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
}

/* Mobile responsive banner optimization */
@media (max-width: 768px) {
    .banner-image {
        height: 65vh;
        object-position: center top;
    }
    
    .banner-slide {
        min-height: 65vh !important;
    }
    
    .min-h-screen {
        min-height: 65vh !important;
    }
    
    #default-carousel {
        min-height: 65vh !important;
    }
    
    .your-carousel {
        min-height: 65vh !important;
    }
}

/* Animation Classes */
@keyframes fadeInOut {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes slideEffect {
    0% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(-10px); }
}

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

@keyframes bounceEffect {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes pulseEffect {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes shakeEffect {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes rotateEffect {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(0.5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-0.5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes flipEffect {
    0% { transform: perspective(400px) rotateY(0); }
    50% { transform: perspective(400px) rotateY(2deg); }
    100% { transform: perspective(400px) rotateY(0); }
}

/* Animation Application Classes */
.animate-fade .banner-image {
    animation: fadeInOut var(--animation-duration, 3s) infinite ease-in-out;
}

.animate-slide .banner-image {
    animation: slideEffect var(--animation-duration, 3s) infinite ease-in-out;
}

.animate-zoom .banner-image {
    animation: zoomEffect var(--animation-duration, 3s) infinite ease-in-out;
}

.animate-bounce .banner-image {
    animation: bounceEffect var(--animation-duration, 3s) infinite ease-in-out;
}

.animate-pulse .banner-image {
    animation: pulseEffect var(--animation-duration, 3s) infinite ease-in-out;
}

.animate-shake .banner-image {
    animation: shakeEffect var(--animation-duration, 3s) infinite ease-in-out;
}

.animate-rotate .banner-image {
    animation: rotateEffect var(--animation-duration, 3s) infinite ease-in-out;
}

.animate-flip .banner-image {
    animation: flipEffect var(--animation-duration, 3s) infinite ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .animate-slide .banner-image {
        animation: slideEffect var(--animation-duration, 3s) infinite ease-in-out;
        transform-origin: center;
    }
    
    .animate-zoom .banner-image {
        animation: zoomEffect var(--animation-duration, 3s) infinite ease-in-out;
        transform-origin: center;
    }
}

/* Smooth transitions for carousel changes */
.your-carousel .banner-slide {
    transition: opacity 0.5s ease-in-out;
}

/* Pause animations on hover for better UX */
.banner-slide:hover .banner-image {
    animation-play-state: paused;
}