/* ==========================================================
   TRINITY ECUADOR
   ANIMATIONS.CSS
   ========================================================== */

/* ==========================================================
   VARIABLES DE ANIMACIÓN
========================================================== */

:root{

    --animation-fast:.35s;
    --animation-normal:.60s;
    --animation-slow:1s;

}

/* ==========================================================
   TRANSICIONES GLOBALES
========================================================== */

*{

    transition:

        background-color .35s ease,

        color .35s ease,

        border-color .35s ease,

        box-shadow .35s ease,

        transform .35s ease;

}

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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   FADE DOWN
========================================================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   FADE LEFT
========================================================== */

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ==========================================================
   FADE RIGHT
========================================================== */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ==========================================================
   ZOOM
========================================================== */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.90);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================================
   FLOAT
========================================================== */

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ==========================================================
   PULSE
========================================================== */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================================
   ROTATE
========================================================== */

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   SHINE
========================================================== */

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:120%;

    }

}

/* ==========================================================
   HERO
========================================================== */

.hero-content{

    animation:fadeLeft .9s ease forwards;

}

.hero-image{

    animation:fadeRight 1.2s ease forwards;

}

.hero-label{

    animation:fadeDown .8s ease;

}

.hero-buttons{

    animation:fadeUp 1.2s ease;

}

.hero-stats{

    animation:fadeUp 1.4s ease;

}

.image-card{

    animation:floating 7s ease-in-out infinite;

}

/* ==========================================================
   CÍRCULOS
========================================================== */

.circle-one{

    animation:floating 10s ease-in-out infinite;

}

.circle-two{

    animation:floating 12s ease-in-out infinite reverse;

}

.circle-three{

    animation:pulse 8s infinite;

}

/* ==========================================================
   CARDS
========================================================== */

.service-card,
.software-card,
.process-card,
.why-card,
.testimonial-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.service-card:hover,
.software-card:hover,
.process-card:hover,
.why-card:hover,
.testimonial-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-xl);

}

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

.btn{

    transition:all .35s ease;

}

.btn:hover{

    transform:translateY(-5px);

}

.btn:active{

    transform:scale(.96);

}

/* ==========================================================
   LOGO
========================================================== */

.logo img:hover{

    transform:scale(1.04);

}

/* ==========================================================
   MENU
========================================================== */

.menu li{

    transition:.30s;

}

.menu li:hover{

    transform:translateY(-2px);

}

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

.about-image img,

.image-card img,

.software-card img{

    transition:transform .7s ease;

}

.about-image:hover img,

.image-card:hover img,

.software-card:hover img{

    transform:scale(1.05);

}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   LEFT
========================================================== */

.reveal-left{

    opacity:0;

    transform:translateX(-70px);

    transition:.9s;

}

.reveal-left.active{

    opacity:1;

    transform:translateX(0);

}

/* ==========================================================
   RIGHT
========================================================== */

.reveal-right{

    opacity:0;

    transform:translateX(70px);

    transition:.9s;

}

.reveal-right.active{

    opacity:1;

    transform:translateX(0);

}

/* ==========================================================
   SCALE
========================================================== */

.reveal-scale{

    opacity:0;

    transform:scale(.92);

    transition:.8s;

}

.reveal-scale.active{

    opacity:1;

    transform:scale(1);

}

/* ==========================================================
   FAQ
========================================================== */

.faq-item{

    transition:.30s;

}

.faq-item:hover{

    transform:translateX(8px);

}

/* ==========================================================
   FOOTER LINKS
========================================================== */

.footer a{

    transition:.30s;

}

.footer a:hover{

    padding-left:6px;

}

/* ==========================================================
   SOCIAL
========================================================== */

.footer-social a{

    transition:.35s;

}

.footer-social a:hover{

    transform:translateX(8px);

}

/* ==========================================================
   CTA
========================================================== */

.cta-box{

    animation:zoomIn 1s ease;

}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.hero-scroll{

    animation:floating 2s infinite;

}

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

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

*{

    animation:none !important;

    transition:none !important;

}

}