/* =====================================
   ANIMATIONS.CSS
===================================== */


/* =====================================
   PRODUTO FLUTUANDO
===================================== */


@keyframes floating{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }


    100%{

        transform:translateY(0);

    }

}



/* =====================================
   ENTRADA SUAVE
===================================== */


@keyframes fadeUp{


    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes fadeLeft{


    from{

        opacity:0;

        transform:translateX(-40px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes fadeRight{


    from{

        opacity:0;

        transform:translateX(40px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }

}



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


.hero-text{

    animation:fadeLeft .8s ease forwards;

}



.hero-product{

    animation:fadeRight .9s ease forwards;

}



/* =====================================
   BOTÃO CTA
===================================== */


.cta{

    position:relative;

    overflow:hidden;

}



.cta::before{


    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;


    background:

    linear-gradient(

    120deg,

    transparent,

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

    transparent

    );


    transition:.5s;

}



.cta:hover::before{

    left:120%;

}



.cta:hover{

    transform:translateY(-4px);

}




/* =====================================
   PULSAÇÃO SUAVE
===================================== */


@keyframes pulse{


    0%{

        box-shadow:

        0 0 0 0 rgba(0,177,79,.5);

    }


    70%{

        box-shadow:

        0 0 0 20px rgba(0,177,79,0);

    }


    100%{

        box-shadow:

        0 0 0 0 rgba(0,177,79,0);

    }

}



.hero .cta{

    animation:pulse 2.5s infinite;

}



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


.card,
.steps-grid div,
.offer-box{


    animation:fadeUp .8s ease;

    transition:.35s;

}



.card:hover,
.steps-grid div:hover{


    transform:translateY(-8px);

}



/* =====================================
   BADGE
===================================== */


.badge{


    animation:fadeUp .6s ease;

}



/* =====================================
   GLOW DO PRODUTO
===================================== */


.product-glow{


    animation:pulseGlow 4s infinite;

}



@keyframes pulseGlow{


    0%{

        transform:scale(1);

        opacity:.5;

    }


    50%{

        transform:scale(1.15);

        opacity:.8;

    }


    100%{

        transform:scale(1);

        opacity:.5;

    }

}



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


.reveal{


    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}



.reveal.active{


    opacity:1;

    transform:translateY(0);

}



/* =====================================
   REDUZIR MOVIMENTO
   ACESSIBILIDADE
===================================== */


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


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


        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        scroll-behavior:auto!important;

        transition-duration:.01ms!important;

    }


}