/* ==========================================================
   EMFORSOL
   ANIMACIONES.CSS
   ----------------------------------------------------------
   Animaciones globales
   Versión: 1.0.0
   ========================================================== */


/* ==========================================================
   TRANSICIONES GENERALES
========================================================== */

*{
    transition:
        background-color var(--transicion),
        color var(--transicion),
        border-color var(--transicion),
        box-shadow var(--transicion),
        transform var(--transicion),
        opacity var(--transicion);
}


/* ==========================================================
   HOVER TARJETAS
========================================================== */

.animacion-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--sombra-card-hover);
}


/* ==========================================================
   HOVER BOTONES
========================================================== */

.animacion-boton:hover{
    transform:translateY(-2px);
}

.animacion-boton:active{
    transform:scale(.98);
}


/* ==========================================================
   FADE IN
========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade-in{

    animation:fadeIn .40s ease forwards;

}


/* ==========================================================
   DESLIZAR DESDE ABAJO
========================================================== */

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.slide-up{

    animation:slideUp .45s ease forwards;

}


/* ==========================================================
   DESLIZAR DESDE ARRIBA
========================================================== */

@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.slide-down{

    animation:slideDown .45s ease forwards;

}


/* ==========================================================
   APARICIÓN ESCALA
========================================================== */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in{

    animation:zoomIn .30s ease forwards;

}


/* ==========================================================
   ROTACIÓN SUAVE ICONOS
========================================================== */

.animacion-icono:hover{

    transform:rotate(8deg) scale(1.08);

}


/* ==========================================================
   LOADER
========================================================== */

@keyframes girar{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.girar{

    animation:girar 1s linear infinite;

}


/* ==========================================================
   PARPADEO SUAVE
========================================================== */

@keyframes pulse{

    0%{

        opacity:1;

    }

    50%{

        opacity:.65;

    }

    100%{

        opacity:1;

    }

}

.pulse{

    animation:pulse 1.8s infinite;

}


/* ==========================================================
   EFECTO FOCUS
========================================================== */

.focus{

    transition:box-shadow var(--transicion);

}

.focus:focus{

    box-shadow:
        0 0 0 4px rgba(111,175,45,.35);

}


/* ==========================================================
   DESACTIVAR ANIMACIONES
========================================================== */

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}