/*==========================================================
=
=               FISIO CEREZO
=
=               ANIMATIONS.CSS
=
==========================================================*/


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

:root{

    --anim-fast:.25s;

    --anim-normal:.45s;

    --anim-slow:.8s;

    --anim-extra:1.3s;

}

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

.heroLogo{

    animation:

        logoAppear

        1.4s

        ease;

}

.heroSubtitle{

    animation:

        fadeUp

        1s

        .3s

        both;

}

.hero h1{

    animation:

        fadeUp

        1s

        .5s

        both;

}

.heroText{

    animation:

        fadeUp

        1s

        .7s

        both;

}

.heroButtons{

    animation:

        fadeUp

        1s

        .9s

        both;

}

.quickCards{

    animation:

        fadeUp

        1.3s

        1.1s

        both;

}

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

@keyframes logoAppear{

    from{

        opacity:0;

        transform:

            translateY(50px)

            scale(.9);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

            translateY(60px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:

            translateX(-60px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

@keyframes fadeRight{

    from{

        opacity:0;

        transform:

            translateX(60px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

@keyframes floating{

    0%{

        transform:

            translateY(0);

    }

    50%{

        transform:

            translateY(-8px);

    }

    100%{

        transform:

            translateY(0);

    }

}

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

@keyframes scrollMouse{

    0%{

        opacity:0;

        transform:

            translate(-50%,0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

            translate(-50%,18px);

    }

}

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

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

/*==========================================================
=
= BOTÓN PRIMARIO
=
==========================================================*/

.btnPrimary{

    position:relative;

    overflow:hidden;

}

.btnPrimary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

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

            transparent

        );

    transform:

        skewX(-25deg);

}

.btnPrimary:hover::before{

    animation:

        shine

        .8s;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:160%;

    }

}

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

.treatment-card{

    overflow:hidden;

}

.treatment-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.12),

            transparent

        );

    opacity:0;

    transition:.7s;

}

.treatment-card:hover::before{

    opacity:1;

}

/*==========================================================
=
= WHY CARD
=
==========================================================*/

.why-card{

    animation:

        floating

        8s

        ease-in-out

        infinite;

}

.why-card:nth-child(2){

    animation-delay:.5s;

}

.why-card:nth-child(3){

    animation-delay:1s;

}

.why-card:nth-child(4){

    animation-delay:1.5s;

}

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

.quickCards article{

    animation:

        floating

        6s

        ease-in-out

        infinite;

}

.quickCards article:nth-child(2){

    animation-delay:.5s;

}

.quickCards article:nth-child(3){

    animation-delay:1s;

}

/*==========================================================
=
= ICONOS
=
==========================================================*/

.why-card i,

.contact-item i,

.quickCards i{

    transition:.4s;

}

.why-card:hover i,

.contact-card:hover i,

.quickCards article:hover i{

    transform:

        rotate(8deg)

        scale(1.15);

}

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

.gallery img{

    transition:

        transform .6s,

        filter .6s;

}

.gallery:hover img{

    filter:brightness(.8);

}

.gallery img:hover{

    filter:brightness(1);

    transform:

        scale(1.06);

}

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

.social a{

    transition:.4s;

}

.social a:hover{

    animation:

        pulse

        .5s;

}

/*==========================================================
=
= BOTÓN WHATSAPP
=
==========================================================*/

.floating-whatsapp{

    animation:

        pulse

        2.5s

        infinite;

}

/*==========================================================
=
= BOTÓN SUBIR
=
==========================================================*/

.backToTop:hover{

    animation:

        pulse

        .4s;

}

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

.loader-flower{

    animation:

        rotateFlower

        4s

        linear

        infinite;

}

@keyframes rotateFlower{

    from{

        transform:

            rotate(0deg);

    }

    to{

        transform:

            rotate(360deg);

    }

}

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

.reveal{

    opacity:0;

    transform:

        translateY(70px);

    transition:

        1s;

}

.reveal.active{

    opacity:1;

    transform:none;

}

/*==========================================================
=
= HOVER GENERAL
=
==========================================================*/

img,

button,

.card,

article,

a{

    transition:

        var(--transition);

}

.backToTop.is-magnetic{
    transform:none;
}