/* ==========================================================
   VERTEX WEBSITE
   Archivo: animations.css

   Animaciones discretas del sitio.

========================================================== */


/* ==========================================================
   FADE UP
========================================================== */


.animate {

    opacity:
        0;

    transform:
        translateY(25px);

    animation-fill-mode:
        forwards;

}



.animate--fade-up {

    animation:
        fadeUp 0.8s ease forwards;

}



/* Secuencia Hero */


.hero__eyebrow {

    animation-delay:
        0.2s;

}



.hero__title {

    animation-delay:
        0.35s;

}



.hero__description {

    animation-delay:
        0.5s;

}



.hero__actions {

    animation-delay:
        0.7s;

}



/* ==========================================================
   KEYFRAMES
========================================================== */


@keyframes fadeUp {


    from {

        opacity:
            0;

        transform:
            translateY(25px);

    }



    to {

        opacity:
            1;

        transform:
            translateY(0);

    }


}



/* ==========================================================
   APARICIÓN SUAVE DE SECCIONES

   Preparado para Intersection Observer
   desde JavaScript
========================================================== */


.reveal {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:

        opacity 0.8s ease,

        transform 0.8s ease;

}



.reveal.active {

    opacity:
        1;

    transform:
        translateY(0);

}



/* ==========================================================
   HOVER IMÁGENES
========================================================== */


.service-card,
.sector-card,
.project {

    transition:

        transform var(--transition-normal),

        box-shadow var(--transition-normal);

}



/* ==========================================================
   MOVIMIENTO SUAVE BOTONES
========================================================== */


.btn {

    transition:

        transform var(--transition-normal),

        background-color var(--transition-normal),

        color var(--transition-normal);

}



/* ==========================================================
   RESPETO A USUARIOS CON REDUCCIÓN DE MOVIMIENTO

========================================================== */


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


    *,
    *::before,
    *::after {


        animation-duration:
            0.01ms !important;


        animation-iteration-count:
            1 !important;


        transition-duration:
            0.01ms !important;


        scroll-behavior:
            auto !important;


    }


}