/**
 * Animation.css - Sistema de animaciones reutilizable
 * 
 * Este archivo contiene todas las animaciones disponibles para usar
 * con el sistema de atributos data-animation.
 */

/* Clase base para animaciones */
.animate {
    animation-fill-mode: both;
    opacity: 1; /* Asegura que el elemento es visible cuando tiene la clase animate */
}

/* Animaciones de Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

/* Desde arriba */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

/* Desde abajo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

/* Desde la izquierda */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

/* Desde la derecha */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}

/* Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
}

/* Zoom hover */
@keyframes zoomUp {
    from {
        transform: scale(1.0);
    }

    to {
        transform: scale(1.03);
    }
}

.zoomUp {
    animation-name: zoomUp;
}

@keyframes zoomDown {
    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.0);
    }
}

.zoomDown {
    animation-name: zoomDown;
}

/* Rebote */
@keyframes bounce {

    from,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom;
}

/* Rotación */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation-name: rotate;
}

/* Parpadeo */
@keyframes flash {

    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

.flash {
    animation-name: flash;
}

/* Pulsación */
@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    animation-name: pulse;
}

/* Agitación */
@keyframes shake {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    animation-name: shake;
}

/* Deslizamiento hacia arriba */
@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    animation-name: slideInUp;
}

/* Deslizamiento hacia abajo */
@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    animation-name: slideInDown;
}

/* Balanceo */
@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing;
}

/* Mover hacia arriba */
@keyframes moveUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-5px);
    }
}

.moveUp {
    animation-name: moveUp;
    animation-fill-mode: forwards;
}

@keyframes moveDown {
    from {
        transform: translateY(-5px);
    }
    to {
        transform: translateY(0);
    }
}

.moveDown {
    animation-name: moveDown;
    animation-fill-mode: forwards;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {

    /* Reducir el tamaño de las animaciones en móviles */
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* Oculta todos los elementos con data-animation */
[data-animation] {
    opacity: 0; 
}

/* Animación con efecto hover */
[data-hover="moveUp"]:hover {
    animation: moveUp 0.8s ease forwards;
}

[data-hover="moveUp"]:not(:hover) {
    animation: moveDown 0.8s ease forwards;
}

[data-zoom="zoomUp"]:hover {
    animation: zoomUp 0.8s ease forwards;
}

[data-zoom="zoomUp"]:not(:hover) {
    animation: zoomDown 0.8s ease forwards;
}