/*====================================

ADVANCED HERO

====================================*/

.hero{

overflow:hidden;

position:relative;

}

.hero-image{

overflow:hidden;

}

.hero-image img{

animation:heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

0%{

transform:scale(1.12);

}

100%{

transform:scale(1.25);

}

}



/* Red Glow */

.hero::after{

content:"";

position:absolute;

left:50%;

top:50%;

width:900px;

height:900px;

transform:translate(-50%,-50%);

background:radial-gradient(

circle,

rgba(193,18,31,.12),

transparent 70%

);

pointer-events:none;

animation:pulseGlow 6s infinite;

}

@keyframes pulseGlow{

0%{

opacity:.3;

transform:translate(-50%,-50%) scale(.8);

}

50%{

opacity:.9;

transform:translate(-50%,-50%) scale(1);

}

100%{

opacity:.3;

transform:translate(-50%,-50%) scale(.8);

}

}



/* Big Title */

.big-text{

user-select:none;

font-size:260px;

opacity:.04;

animation:floatText 12s ease-in-out infinite;

}

@keyframes floatText{

0%{

transform:translateX(-50%) translateY(0);

}

50%{

transform:translateX(-50%) translateY(-15px);

}

100%{

transform:translateX(-50%) translateY(0);

}

}



/* Scroll Mouse */

.hero-scroll{

position:absolute;

bottom:45px;

left:50%;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

font-size:12px;

letter-spacing:5px;

}

.hero-scroll::before{

content:"";

width:28px;

height:48px;

border:2px solid rgba(255,255,255,.5);

border-radius:50px;

display:block;

position:relative;

}

.hero-scroll::after{

content:"";

position:absolute;

top:13px;

width:6px;

height:6px;

background:var(--red);

border-radius:50%;

animation:wheel 2s infinite;

}

@keyframes wheel{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(20px);

opacity:0;

}

}



/* Hero Gradient */

.overlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.2),

rgba(0,0,0,.75)

);

z-index:2;

}