/* ==========================================================
   HM SOLUCIONES INTEGRALES
   ANIMACIONES PREMIUM
==========================================================*/

/* ---------- APARICIÓN AL HACER SCROLL ---------- */

.reveal{
    opacity:0;
    transform:translateY(70px);
    transition:
        opacity .9s ease,
        transform .9s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}


/* ---------- FADE ---------- */

.fade{
    opacity:0;
    transition:opacity .8s ease;
}

.fade.active{
    opacity:1;
}


/* ---------- ZOOM ---------- */

.zoom{
    opacity:0;
    transform:scale(.90);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.zoom.active{
    opacity:1;
    transform:scale(1);
}


/* ---------- DESDE LA IZQUIERDA ---------- */

.left{
    opacity:0;
    transform:translateX(-70px);
    transition:
        opacity .9s ease,
        transform .9s ease;
}

.left.active{
    opacity:1;
    transform:translateX(0);
}


/* ---------- DESDE LA DERECHA ---------- */

.right{
    opacity:0;
    transform:translateX(70px);
    transition:
        opacity .9s ease,
        transform .9s ease;
}

.right.active{
    opacity:1;
    transform:translateX(0);
}


/* ---------- TARJETAS ---------- */

.service-card,
.benefit-card,
.process-card,
.work-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}


/* ---------- IMÁGENES ---------- */

.service-image{

    transition:
        transform .5s ease;

}

.service-card:hover .service-image{

    transform:scale(1.08);

}

.about-image img{

    transition:
        transform .6s ease;

}

.about-image:hover img{

    transform:scale(1.05);

}

.work-card{

    overflow:hidden;

}

.work-card img{

    transition:
        transform .6s ease;

}

.work-card:hover img{

    transform:scale(1.05);

}


/* ---------- BOTONES ---------- */

.quote-button{

    transition:
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}

.quote-button:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 35px rgba(173,0,7,.30);

}


/* ---------- MENÚ ---------- */

.menu a{

    transition:
        color .30s ease;

}


/* ---------- REDES ---------- */

.social-icons a{

    transition:
        transform .35s ease,
        background .35s ease;

}

.social-icons a:hover{

    transform:translateY(-6px);

}


/* ---------- FLOAT ---------- */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.quote-card{

    animation:
        float 6s ease-in-out infinite;

}


/* ---------- BRILLO BOTÓN ---------- */

.quote-button{

    position:relative;

    overflow:hidden;

}

.quote-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transition:.8s;

}

.quote-button:hover::before{

    left:130%;

}


/* ---------- HERO ---------- */

.hero{

    animation:

        heroFade 1.2s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:scale(1.03);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ---------- TARJETAS ---------- */

.service-card:hover,
.process-card:hover,
.work-card:hover{

    transform:

        translateY(-10px);

}


/* ---------- REDUCIR MOVIMIENTO ---------- */

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}