/*Start - css/desktop-hero.css*/
@keyframes aproximar{
0%{background-size:100% auto;}
100%{background-size:110% auto;}
}
.desktop-hero{
width:100%;
height:52vw;
position:relative;
overflow:hidden;
z-index:99;
background-image: url('img/desktop-fundo-castelo.webp');
background-size: 110% auto;
background-position: center top;
background-repeat: no-repeat;
animation:aproximar 8s ease-in-out;
}
.desktop-hero-logo{
position: absolute;
top: 0.9vw;
left: 50%;
transform: translateX(-50%);
width: 18.2vw;
z-index: 50;
}
.desktop-hero-logo img{
width:100%;
display:block;
}
.desktop-hero-hamburger{
position: absolute;
top: 5vw;
left: 3vw;
width: 3vw;
height: 2vw;
cursor: pointer;
z-index: 100;
}
.desktop-hero-hamburger-line{
width:100%;
height:0.3vw;
background-color:var(--branco_lente07);
border-radius:0.2vw;
position:absolute;
left:0;
transition:all 0.3s ease;
box-shadow:0 0.1vw 0.3vw var(--preto_lente05);
}
.desktop-hero-hamburger-line:nth-child(1){
top:0;
}
.desktop-hero-hamburger-line:nth-child(2){
top:50%;
transform:translateY(-50%);
}
.desktop-hero-hamburger-line:nth-child(3){
bottom:0;
}
.desktop-hero-personagem{
position: absolute;
bottom: -15.5vw;
right: -12.5vw;
width: 81vw;
height: 72vw;
transition: transform 0.1s ease-out;
will-change: transform;
z-index: 1;
background-image: url('img/desktop-karazan-pedra.webp');
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain;
}
.desktop-hero-conteudo{
position: absolute;
top: 24.8vw;
left: 27.3vw;
transform: translateX(-50%);
text-align: center;
width: 12vw;
z-index: 10;
background-color: var(--teste00);
}
.desktop-hero-texto{
width: 100%;
font-family: var(--ibarra);
font-size: 1.5vw;
font-style: italic;
color: var(--karazan-cream);
text-shadow: 0 0.3vw 1.5vw var(--preto_lente09);
line-height: 1.9vw;
background-color: var(--teste00);
margin-bottom: 0.8vw;
letter-spacing: -0.05vw;
font-weight: 700;
}
.desktop-hero-botao{
position: relative;
left: 50%;
transform: translateX(-50%);
width: 11vw;
cursor: pointer;
transition: transform 0.2s ease;
background-color: var(--karazan-amber);
border-radius: 0.5vw;
height: 2.6vw;
}
.desktop-hero-botao:hover{
transform:translateX(-50%) scale(1.05);
}
.desktop-hero-botao img{
width:100%;
display:block;
}
.desktop-hero-botao-texto{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--euphorigenic);
font-size: 1.6vw;
color: var(--karazan-cream);
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/desktop-hero.css*/