/* ==========================================================
   FORCAEB.COM.BR
   ANIMATIONS.CSS
   SISTEMA DE ANIMAÇÕES GERAIS
========================================================== */


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


.fade{

    opacity:0;

    transition:1s ease;

}


.fade.show{

    opacity:1;

}



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


.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity 1s ease,

    transform 1s ease;

}


.fade-up.show{

    opacity:1;

    transform:translateY(0);

}



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


.fade-down{

    opacity:0;

    transform:translateY(-60px);

    transition:1s ease;

}



.fade-down.show{

    opacity:1;

    transform:translateY(0);

}



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


.fade-left{

    opacity:0;

    transform:translateX(-80px);

    transition:1s ease;

}



.fade-left.show{

    opacity:1;

    transform:translateX(0);

}



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


.fade-right{

    opacity:0;

    transform:translateX(80px);

    transition:1s ease;

}



.fade-right.show{

    opacity:1;

    transform:translateX(0);

}



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


.zoom{

    opacity:0;

    transform:scale(.7);

    transition:1s ease;

}



.zoom.show{

    opacity:1;

    transform:scale(1);

}



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


.rotate{

    opacity:0;

    transform:rotate(-10deg);

    transition:1s ease;

}



.rotate.show{

    opacity:1;

    transform:rotate(0);

}



/* ==========================================================
   DELAYS
========================================================== */


.delay-1{

    transition-delay:.2s;

}


.delay-2{

    transition-delay:.4s;

}


.delay-3{

    transition-delay:.6s;

}


.delay-4{

    transition-delay:.8s;

}


.delay-5{

    transition-delay:1s;

}



/* ==========================================================
   PULSO DOURADO
========================================================== */


.pulse-gold{


    animation:


    pulseGold 3s infinite;


}



@keyframes pulseGold{


    0%{


        box-shadow:

        0 0 0 rgba(200,165,66,0);


    }



    50%{


        box-shadow:


        0 0 40px rgba(200,165,66,.6);


    }



    100%{


        box-shadow:

        0 0 0 rgba(200,165,66,0);


    }


}



/* ==========================================================
   BRILHO PASSANDO
========================================================== */


.shine{


    position:relative;

    overflow:hidden;


}



.shine::after{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:50%;


    height:100%;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.4),

    transparent

    );


    animation:


    shineMove 4s infinite;


}



@keyframes shineMove{


    0%{


        left:-100%;


    }



    40%{


        left:150%;


    }



    100%{


        left:150%;


    }


}



/* ==========================================================
   FLUTUAÇÃO
========================================================== */


.float{


    animation:


    floating 5s infinite ease-in-out;


}



@keyframes floating{


    0%,100%{


        transform:translateY(0);


    }


    50%{


        transform:translateY(-15px);


    }


}
/* ==========================================================
   ANIMAÇÃO DE MEDALHAS
========================================================== */


.medal{

    animation:

    medalFloat 4s infinite ease-in-out;

}



@keyframes medalFloat{


    0%,100%{

        transform:

        translateY(0)

        rotate(0deg);

    }


    50%{

        transform:

        translateY(-15px)

        rotate(3deg);

    }


}



/* ==========================================================
   CARD 3D MILITAR
========================================================== */


.card-3d{


    transform-style:preserve-3d;

    transition:.5s;

}



.card-3d:hover{


    transform:


    perspective(800px)

    rotateY(8deg)

    translateY(-10px);


}



/* ==========================================================
   ENTRADA DE NÚMEROS
========================================================== */


.counter{


    animation:


    counterAppear 1.5s ease forwards;


}



@keyframes counterAppear{


    from{


        opacity:0;


        transform:

        scale(.5);


    }


    to{


        opacity:1;


        transform:

        scale(1);


    }


}



/* ==========================================================
   IMPACTO DE BATALHA
========================================================== */


.impact{


    animation:


    impactShake .8s;


}



@keyframes impactShake{


    0%{

        transform:translateX(0);

    }


    20%{

        transform:translateX(-15px);

    }


    40%{

        transform:translateX(15px);

    }


    60%{

        transform:translateX(-10px);

    }


    80%{

        transform:translateX(10px);

    }


    100%{

        transform:translateX(0);

    }


}



/* ==========================================================
   EXPLOSÃO VISUAL
========================================================== */


.explosion{


    animation:


    explosion .8s ease;


}



@keyframes explosion{


    0%{


        opacity:0;


        transform:

        scale(.2);


    }



    50%{


        opacity:1;


        transform:

        scale(1.2);


    }



    100%{


        opacity:0;


        transform:

        scale(1);


    }


}



/* ==========================================================
   GLITCH MILITAR
========================================================== */


.glitch{


    animation:


    glitchEffect 3s infinite;


}



@keyframes glitchEffect{


    0%,90%,100%{


        transform:none;


    }



    92%{


        transform:

        translateX(-3px);


    }



    94%{


        transform:

        translateX(3px);


    }



    96%{


        transform:none;


    }


}



/* ==========================================================
   LOADING
========================================================== */


.loading-bar{


    width:0;


    height:4px;


    background:var(--gold);


    animation:


    loadingProgress 3s infinite;


}



@keyframes loadingProgress{


    0%{


        width:0;


    }


    70%{


        width:90%;


    }


    100%{


        width:100%;


    }


}



/* ==========================================================
   PULSAÇÃO DE ALERTA
========================================================== */


.alert-pulse{


    animation:


    alertPulse 2s infinite;


}



@keyframes alertPulse{


    0%{


        opacity:1;


    }



    50%{


        opacity:.4;


    }



    100%{


        opacity:1;


    }


}



/* ==========================================================
   REVELAÇÃO DE TEXTO
========================================================== */


.text-reveal{


    overflow:hidden;

}



.text-reveal span{


    display:inline-block;


    animation:


    textReveal 1s forwards;


}



@keyframes textReveal{


    from{


        opacity:0;


        transform:

        translateY(100%);


    }



    to{


        opacity:1;


        transform:

        translateY(0);


    }


}



/* ==========================================================
   EFEITO DE DIGITAÇÃO
========================================================== */


.typing{


    overflow:hidden;


    white-space:nowrap;


    border-right:2px solid var(--gold);


    animation:


    typing 4s steps(40),

    cursor .8s infinite;


}



@keyframes typing{


    from{


        width:0;


    }


    to{


        width:100%;


    }


}



@keyframes cursor{


    50%{


        border-color:transparent;


    }


}



/* ==========================================================
   TRANSIÇÃO DE PÁGINA
========================================================== */


.page-transition{


    animation:


    pageEnter .8s ease;


}



@keyframes pageEnter{


    from{


        opacity:0;


        transform:

        scale(1.03);


    }



    to{


        opacity:1;


        transform:

        scale(1);


    }


}



/* ==========================================================
   ANIMAÇÃO REDUZIDA PARA ACESSIBILIDADE
========================================================== */


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


*{


    animation-duration:0.01ms!important;


    transition-duration:0.01ms!important;


}


}

/* ==========================================================
   PARTICULAS DINÂMICAS
========================================================== */


.dust-particle{


position:absolute;


background:white;


border-radius:50%;


opacity:.25;


pointer-events:none;


animation:

dustMove linear infinite;



}



@keyframes dustMove{


from{


transform:

translateY(0)

translateX(0);


}


to{


transform:

translateY(-100vh)

translateX(80px);


}



}



.dynamic-smoke{


position:fixed;


bottom:-200px;


width:350px;


height:350px;


background:

radial-gradient(

circle,

rgba(255,255,255,.15),

transparent 70%

);


filter:blur(60px);


pointer-events:none;


z-index:2;


animation:

smokeRise linear forwards;



}



@keyframes smokeRise{


from{


transform:

translateY(0)

scale(1);


opacity:.3;


}


to{


transform:

translateY(-120vh)

scale(2);


opacity:0;


}



}