/* ==========================================================
   FORCAEB.COM.BR
   HOME.CSS
   EFEITOS DA PÁGINA INICIAL
========================================================== */


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


.hero{

    position:relative;

    min-height:100vh;

    overflow:hidden;

}



/* camada de profundidade */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.35),

        rgba(0,0,0,.85)

    );

    z-index:1;

}



/* imagem/textura de guerra */

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    url('../img/backgrounds/noise.png');

    opacity:.08;

    z-index:2;

    pointer-events:none;

}



/* ==========================================================
   CONTEÚDO HERO
========================================================== */


.hero-content{

    position:relative;

    z-index:5;

    animation:

    heroAppear 2s ease forwards;

}



@keyframes heroAppear{


    0%{

        opacity:0;

        transform:

        translateY(80px);

    }


    100%{

        opacity:1;

        transform:

        translateY(0);

    }


}



.hero-content h2{

    animation:

    titleReveal 2s ease;

}



@keyframes titleReveal{


    from{

        opacity:0;

        letter-spacing:20px;

    }


    to{

        opacity:1;

        letter-spacing:3px;

    }


}



/* ==========================================================
   SUBTÍTULO
========================================================== */


.hero-content h3{

    animation:

    subtitleReveal 3s ease;

}



@keyframes subtitleReveal{


    from{

        opacity:0;

        transform:

        translateY(30px);

    }


    to{

        opacity:1;

        transform:

        translateY(0);

    }


}



/* ==========================================================
   BOTÃO PRINCIPAL
========================================================== */


.hero .btn{

    animation:

    buttonReveal 3.5s ease;

    position:relative;

}



@keyframes buttonReveal{


    0%{

        opacity:0;

        transform:scale(.5);

    }


    100%{

        opacity:1;

        transform:scale(1);

    }


}



.hero .btn:hover{

    box-shadow:

    0 0 35px rgba(200,165,66,.7);

}



/* ==========================================================
   EFEITO DE LUZ NO FUNDO
========================================================== */


.light-beam{

    position:absolute;

    width:500px;

    height:500px;

    background:

    radial-gradient(

    circle,

    rgba(200,165,66,.25),

    transparent 70%

    );


    filter:blur(80px);

    animation:

    lightMove 12s infinite alternate;


}



@keyframes lightMove{


    from{

        transform:

        translate(-150px,-50px);

    }


    to{

        transform:

        translate(200px,100px);

    }


}



/* ==========================================================
   FUMAÇA DO CAMPO DE BATALHA
========================================================== */


.battle-smoke{

    position:absolute;

    bottom:-100px;

    left:-100px;

    width:700px;

    height:400px;


    background:

    radial-gradient(

    ellipse,

    rgba(255,255,255,.18),

    transparent 70%

    );


    filter:blur(50px);


    animation:

    smokeBattle 15s infinite alternate;


}



@keyframes smokeBattle{


    from{

        transform:

        translateX(-50px)

        scale(1);

    }


    to{

        transform:

        translateX(250px)

        scale(1.4);

    }


}



/* ==========================================================
   CHAMAS / BRASAS
========================================================== */


.embers{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}



.embers span{


    position:absolute;


    bottom:-20px;


    width:5px;


    height:5px;


    background:#d6a438;


    border-radius:50%;


    opacity:.8;


    animation:

    emberRise 8s linear infinite;


}



@keyframes emberRise{


    0%{

        transform:

        translateY(0)

        scale(1);

        opacity:0;

    }


    20%{

        opacity:1;

    }


    100%{


        transform:

        translateY(-100vh)

        translateX(80px)

        scale(.3);


        opacity:0;


    }


}
/* ==========================================================
   LOADER CINEMATOGRÁFICO
========================================================== */


#loader{

    animation:

    loaderFade 1s ease;

}



@keyframes loaderFade{


    from{

        opacity:0;

    }


    to{

        opacity:1;

    }


}



.loader-logo{

    animation:

    logoEntrance 2s ease;

}



@keyframes logoEntrance{


    0%{

        opacity:0;

        transform:

        scale(.5)

        translateY(50px);


    }


    100%{


        opacity:1;

        transform:

        scale(1)

        translateY(0);


    }


}



.loader-logo img{


    filter:

    drop-shadow(

    0 0 30px rgba(200,165,66,.6)

    );


    animation:

    logoPulse 4s infinite;


}



@keyframes logoPulse{


    0%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.05);

    }


    100%{

        transform:scale(1);

    }


}



/* ==========================================================
   BOTÃO ENTRAR
========================================================== */


#enterButton{


    position:relative;

    overflow:hidden;

}



#enterButton::before{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:100%;


    height:100%;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.5),

    transparent

    );


    transition:.8s;


}



#enterButton:hover::before{


    left:120%;


}



#enterButton:hover{


    box-shadow:


    0 0 50px rgba(200,165,66,.8);


}



/* ==========================================================
   SAÍDA DO LOADER
========================================================== */


#loader.hide{


    animation:

    loaderExit 1.5s forwards;


}



@keyframes loaderExit{


    from{


        opacity:1;


        visibility:visible;


    }



    to{


        opacity:0;


        visibility:hidden;


    }


}



/* ==========================================================
   EFEITO CAMERA ZOOM
========================================================== */


.camera-effect{


    animation:


    cameraZoom 20s infinite alternate;


}



@keyframes cameraZoom{


    from{


        transform:

        scale(1);


    }


    to{


        transform:

        scale(1.08);


    }


}



/* ==========================================================
   BORDA MILITAR DO HERO
========================================================== */


.hero-frame{


    position:absolute;


    inset:40px;


    border:


    1px solid rgba(200,165,66,.35);


    z-index:3;


    pointer-events:none;


}



.hero-frame::before,


.hero-frame::after{


    content:"";


    position:absolute;


    width:120px;


    height:120px;


    border-color:var(--gold);


}



.hero-frame::before{


    top:-1px;


    left:-1px;


    border-top:3px solid;


    border-left:3px solid;


}



.hero-frame::after{


    bottom:-1px;


    right:-1px;


    border-bottom:3px solid;


    border-right:3px solid;


}



/* ==========================================================
   HUD MILITAR
========================================================== */


.hud{


    position:absolute;


    z-index:5;


    color:rgba(255,255,255,.5);


    font-family:'Oswald',sans-serif;


    letter-spacing:3px;


    text-transform:uppercase;


    font-size:12px;


}



.hud.top-left{


    top:120px;


    left:50px;


}



.hud.bottom-right{


    bottom:60px;


    right:50px;


}



.hud span{


    color:var(--gold);


}



/* ==========================================================
   LINHA DE DIGITALIZAÇÃO
========================================================== */


.scan-line{


    position:absolute;


    width:100%;


    height:2px;


    background:


    rgba(200,165,66,.3);


    top:0;


    animation:


    scanMove 6s linear infinite;


}



@keyframes scanMove{


    from{


        top:0;


    }


    to{


        top:100%;


    }


}



/* ==========================================================
   MAPA TÁTICO
========================================================== */


.tactical-map{


    background:


    linear-gradient(

    rgba(0,0,0,.6),

    rgba(0,0,0,.8)

    ),


    url('../img/backgrounds/map.jpg');


    background-size:cover;


    background-position:center;


}



/* ==========================================================
   EFEITO FILME ANTIGO
========================================================== */


.film-grain{


    position:absolute;


    inset:0;


    background-image:


    url('../img/backgrounds/grain.png');


    opacity:.12;


    pointer-events:none;


    animation:


    grainMove .2s infinite;


}



@keyframes grainMove{


    0%{

        transform:translate(0,0);

    }


    25%{

        transform:translate(-3px,2px);

    }


    50%{

        transform:translate(2px,-3px);

    }


    100%{

        transform:translate(0,0);

    }


}
/* ==========================================================
   AJUSTE DO VÍDEO DE FUNDO
========================================================== */


#bgVideo{

    animation:

    videoZoom 25s infinite alternate;

}



@keyframes videoZoom{


    from{

        transform:scale(1);

    }


    to{

        transform:scale(1.08);

    }


}



/* ==========================================================
   VINHETA CINEMATOGRÁFICA
========================================================== */


.cinematic-vignette{


    position:absolute;


    inset:0;


    z-index:4;


    pointer-events:none;


    background:


    radial-gradient(

    circle,

    transparent 35%,

    rgba(0,0,0,.85) 100%

    );


}



/* ==========================================================
   PARALLAX DE CAMADAS
========================================================== */


.parallax-layer{


    position:absolute;


    inset:0;


    background-position:center;


    background-size:cover;


    will-change:transform;


}



.parallax-front{


    animation:

    frontMove 20s infinite alternate;


}



@keyframes frontMove{


    from{

        transform:

        translateX(-15px);

    }


    to{

        transform:

        translateX(25px);

    }


}



/* ==========================================================
   TEXTO OPERACIONAL
========================================================== */


.operation-text{


    font-family:'Oswald',sans-serif;


    text-transform:uppercase;


    letter-spacing:6px;


    color:rgba(255,255,255,.65);


    font-size:14px;


    animation:


    blinkText 3s infinite;


}



@keyframes blinkText{


    0%,100%{

        opacity:.5;

    }


    50%{

        opacity:1;

    }


}



/* ==========================================================
   MARCA D'ÁGUA FEB
========================================================== */


.watermark{


    position:absolute;


    bottom:40px;


    left:50%;


    transform:translateX(-50%);


    font-family:'Cinzel',serif;


    font-size:120px;


    color:rgba(255,255,255,.03);


    letter-spacing:20px;


    pointer-events:none;


}



/* ==========================================================
   TRANSIÇÃO ENTRE SEÇÕES
========================================================== */


.section-transition{


    position:absolute;


    bottom:-1px;


    left:0;


    width:100%;


    height:120px;


    background:


    linear-gradient(

    transparent,

    #080808

    );


}



/* ==========================================================
   EFEITO DE POEIRA
========================================================== */


.dust{


    position:absolute;


    inset:0;


    overflow:hidden;


    pointer-events:none;


}



.dust span{


    position:absolute;


    width:4px;


    height:4px;


    background:white;


    border-radius:50%;


    opacity:.2;


    animation:


    dustFloat 15s infinite;


}



@keyframes dustFloat{


    from{


        transform:


        translateY(100vh)


        translateX(0);


    }


    to{


        transform:


        translateY(-20vh)


        translateX(150px);


    }


}



/* ==========================================================
   BOTÃO DE SCROLL
========================================================== */


.scroll-down{


    position:absolute;


    bottom:35px;


    left:50%;


    transform:translateX(-50%);


    color:white;


    font-family:'Oswald',sans-serif;


    letter-spacing:3px;


    text-transform:uppercase;


    font-size:12px;


}



.scroll-down::after{


    content:"";


    display:block;


    width:2px;


    height:50px;


    background:var(--gold);


    margin:15px auto;


    animation:


    scrollLine 2s infinite;


}



@keyframes scrollLine{


    0%{

        height:10px;

        opacity:0;

    }


    50%{

        height:50px;

        opacity:1;

    }


    100%{

        height:10px;

        opacity:0;

    }


}



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


@media(max-width:768px){


.hero{


    min-height:100vh;


}



.hero-frame{


    inset:20px;


}



.watermark{


    font-size:45px;


    letter-spacing:8px;


}



.hud{


    display:none;


}



.hero-content h2{


    font-size:35px;


}



.hero-content h3{


    letter-spacing:2px;


}



.battle-smoke{


    width:400px;


}



}