/* public/assets/css/animations.css */

/* Keyframe Animations */
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInModal {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

@keyframes animatedHoverGrow {
    from { transform: scale(1); }
    to { transform: scale(1.03); }
}

@keyframes animatedFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes animatedFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes animatedBounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes animatedScaleIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes animatedSlideIn {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* Apply Animations */
.animated-fade-in {
    animation: animatedFadeIn 0.6s ease-out forwards;
}

.animated-fade-in-up {
    animation: animatedFadeInUp 0.6s ease-out forwards;
}

.animated-bounce-in {
    animation: animatedBounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animated-scale-in {
    animation: animatedScaleIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animated-slide-in {
    animation: animatedSlideIn 0.7s ease-out forwards;
}

/* Hover/Interaction Animations */
.animated-pulse {
    animation: animatedPulse 1.5s infinite;
}

.animated-hover-grow:hover {
    animation: animatedHoverGrow 0.3s forwards;
}

/* Delay for staggered animations */
.animated-fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.animated-fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.animated-fade-in-up:nth-child(3) { animation-delay: 0.3s; }
.animated-fade-in-up:nth-child(4) { animation-delay: 0.4s; }
.animated-fade-in-up:nth-child(5) { animation-delay: 0.5s; }
.animated-fade-in-up:nth-child(6) { animation-delay: 0.6s; }
/* Add more as needed, or use JS for more complex staggering */

.hero-content, .hero-image {
    opacity: 0; /* Hide elements initially for animation */
}