/* =========================================================
   ELECTRONIC SHOW V7 — HERO
   Opening screen and emblem animation
   ========================================================= */

.hero{
min-height:100vh;
display:flex;
align-items:center;
padding:90px 8%;
background:
linear-gradient(90deg,rgba(5,5,5,.97) 0%,rgba(5,5,5,.88) 36%,rgba(5,5,5,.42) 68%,rgba(5,5,5,.16) 100%),
url("../img/hero.jpg");
background-size:cover;
background-position:65% center;
background-repeat:no-repeat;
}

.hero-content{
max-width:680px;
}

.hero-symbol{
display:inline-flex;
flex-direction:column;
align-items:center;
margin-bottom:65px;
}

.es-icon{
width:320px;
margin-bottom:10px;
animation:esPulse 4.5s ease-in-out infinite;
}

@keyframes esPulse{
0%{transform:scale(1);filter:drop-shadow(0 0 25px rgba(0,102,255,.75)) drop-shadow(0 0 55px rgba(0,102,255,.35))}
50%{transform:scale(1.035);filter:drop-shadow(0 0 35px rgba(0,102,255,1)) drop-shadow(0 0 90px rgba(0,102,255,.65))}
100%{transform:scale(1);filter:drop-shadow(0 0 25px rgba(0,102,255,.75)) drop-shadow(0 0 55px rgba(0,102,255,.35))}
}

.kicker{
color:#0066FF;
font-size:13px;
letter-spacing:8px;
text-transform:uppercase;
font-weight:bold;
text-align:center;
}

.hero h1{
font-size:clamp(56px,8vw,108px);
line-height:.98;
text-transform:uppercase;
letter-spacing:-2px;
margin-bottom:28px;
}

.hero h1 span{
color:#0066FF;
display:block;
text-shadow:0 0 18px rgba(0,102,255,.38);
}

.hero-text{
max-width:650px;
font-size:18px;
line-height:1.8;
color:#DADADA;
margin-bottom:38px;
}