/*=========================================
        ECOAGROMATIC SAS
        animations.css
==========================================*/

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

*{
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .35s ease,
        opacity .35s ease,
        box-shadow .35s ease;
}

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

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-50px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(50px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;
        transform:scale(.85);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.45);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

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

.hero-overlay h1{

    animation:fadeUp 1s ease;

}

.hero-overlay p{

    animation:fadeUp 1.3s ease;

}

.hero-overlay .btn{

    animation:zoomIn 1.6s ease;

}

/*==============================
        SERVICIOS
==============================*/

.service-text{

    animation:fadeLeft .9s ease;

}

.gallery{

    animation:fadeRight .9s ease;

}

/*==============================
        GALERÍA
==============================*/

.gallery img{

    cursor:pointer;

    overflow:hidden;

}

.gallery img:hover{

    transform:scale(1.05);

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

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

.btn:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 28px rgba(0,0,0,.2);

}

.btn:active{

    transform:scale(.98);

}

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

#navbar a{

    position:relative;

}

#navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.35s;

}

#navbar a:hover::after{

    width:100%;

}

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

.service{

    transition:.4s;

}

.service:hover{

    background:#fbfcff;

}

/*==============================
        CONTACTO
==============================*/

.qr{

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

}

.socials a{

    display:inline-block;

}

.socials a:hover{

    transform:translateX(8px);

}

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

footer{

    transition:.3s;

}

/*==============================
        WHATSAPP
==============================*/

.whatsapp{

    animation:pulse 2.5s infinite;

}

.whatsapp:hover{

    transform:scale(1.12);

}

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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

img{

    will-change:transform;

}

/*==============================
        HEADER SCROLL
==============================*/

.header-scroll{

    background:#ffffff;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

}

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

#hero img{

    transition:transform 8s linear;

}

#hero:hover img{

    transform:scale(1.05);

}

/*==============================
        ACCESIBILIDAD
==============================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}