/*Start - css/hero.css*/
@keyframes aproximarImg{
0%{width:100%; margin-left:0%; margin-top:-5%;}
100%{width:110%; margin-left:-5%; margin-top:-5%;}
}
.hero{
width:100%;
position:relative;
float:left;
z-index:99;
}
.hero-fundo{
width:100%;
float:left;
position:relative;
height:160vw;
overflow:hidden;
transition:height 0.3s ease-out;
}
.hero-fundo img{
width:110%;
margin-top:-5%;
margin-left:-5%;
display:block;
animation:aproximarImg 8s ease-in-out;
}
.hero-logo{
position:absolute;
top:5vw;
left:50%;
transform:translateX(-50%);
width:50vw;
z-index:50;
}
.hero-logo img{
width:100%;
display:block;
}
.hero-hamburger{
position:absolute;
top:11vw;
left:5vw;
width:9vw;
height:6vw;
cursor:pointer;
z-index:100;
float:left;
}
.hero-hamburger-line{
width:100%;
height:1vw;
background-color:var(--branco_lente07);
border-radius:0.5vw;
position:absolute;
left:0;
transition:all 0.3s ease;
float:left;
box-shadow:0 0.2vw 0.5vw var(--preto_lente05);
}
.hero-hamburger-line:nth-child(1){
top:0;
}
.hero-hamburger-line:nth-child(2){
top:50%;
transform:translateY(-50%);
}
.hero-hamburger-line:nth-child(3){
bottom:0;
}
.hero-personagem{
position:absolute;
top:60vw;
width:100%;
float:left;
transition:transform 0.1s ease-out;
will-change:transform;
height:160vw;
}
.hero-personagem img{
width:100%;
display:block;
}
.hero-conteudo{
position:absolute;
top:132vw;
left:50%;
transform:translateX(-50%);
text-align:center;
width:90vw;
float:left;
z-index:10;
}
.hero-texto{
width:55vw;
font-family:var(--ibarra);
font-size:7vw;
font-style:italic;
color:white;
text-shadow:0 0.3vw 1.5vw var(--preto_lente09);
line-height:7vw;
background-color:var(--teste00);
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:6vw;
}
.hero-botao{
position:relative;
float:left;
left:50%;
transform:translateX(-50%);
width:50vw;
cursor:pointer;
transition:transform 0.2s ease;
background-color: var(--botao-fundo);
border-radius: 3vw;
}
.hero-botao:hover{
transform:translateX(-50%) scale(1.05);
}
.hero-botao img{
width:100%;
display:block;
}
.hero-botao-texto{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
font-family:var(--euphorigenic);
font-size:6vw;
color:white;
white-space:nowrap;
cursor:pointer;
}
.fireflies-container{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:5;
overflow:hidden;
}
.firefly{
position:absolute;
background-color:rgba(255,230,150,0.8);
border-radius:50%;
box-shadow:0 0 1vw rgba(255,230,150,0.8),0 0 2vw rgba(255,230,150,0.5);
filter: blur(1px);
animation:firefly-blink 3s ease-in-out infinite;
}
@keyframes firefly-blink{
0%{
opacity:0;
transform:scale(0.5);
}
25%{
opacity:1;
transform:scale(1);
}
75%{
opacity:1;
transform:scale(1);
}
100%{
opacity:0;
transform:scale(0.5);
}
}
/*End - css/hero.css*/