/**
 * EF2 - Animaciones
 * Estilos de animación para mejorar la experiencia de usuario
 */

/* Animaciones de entrada */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animaciones de énfasis */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

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

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.5;
    }
}

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

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

/* Clases de animación */
.animate {
    animation-duration: 0.6s;
    animation-fill-mode: both;
}

.animate--fast {
    animation-duration: 0.3s;
}

.animate--slow {
    animation-duration: 1s;
}

.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;
}

.animate--delay-5 {
    animation-delay: 0.5s;
}

/* Clases de animación específicas */
.animate--fade-in {
    animation-name: fadeIn;
}

.animate--slide-up {
    animation-name: slideInUp;
}

.animate--slide-left {
    animation-name: slideInLeft;
}

.animate--slide-right {
    animation-name: slideInRight;
}

.animate--zoom-in {
    animation-name: zoomIn;
}

.animate--pulse {
    animation-name: pulse;
}

.animate--bounce {
    animation-name: bounce;
}

.animate--flash {
    animation-name: flash;
}

.animate--shake {
    animation-name: shake;
}

.animate--float {
    animation-name: float;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Para elementos que queremos animar al entrar en el viewport */
.animate-on-scroll {
    opacity: 0;
}

.animate-on-scroll.animated {
    opacity: 1;
}