.hero{

  --wave-h:clamp(70px,9vw,130px);
  --pad-t:calc(var(--nav-h) * .55);
  --pad-b:calc(var(--wave-h) + 8px);
  --w:min(1750px,100vw,calc((100svh - var(--pad-t) - var(--pad-b)) * 1.82));
  --wave:var(--bg);
  position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 95% at 50% 50%,#05030f 35%,#06123a 100%);
  touch-action:pan-y;-webkit-tap-highlight-color:transparent;
}

.hero__sim{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
.hero.no-webgl .hero__sim{display:none}

.hero__veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,rgba(3,4,14,.55),rgba(3,4,14,0) 22%)}

.stage{
  position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
  padding:var(--pad-t) 0 var(--pad-b);
}

.scene{
  position:relative;width:var(--w);aspect-ratio:16 / 9;will-change:transform;
  transition:transform var(--ease,.15s) ease;
}
.layer{
  position:absolute;inset:0;pointer-events:none;will-change:transform;
  translate:calc(var(--mx,0px) * var(--k,0)) calc(var(--my,0px) * var(--k,0));
  transform:scale(var(--s,1));
  transition:translate var(--ease,.15s) ease;
}
.scene.is-resting,.scene.is-resting .layer{transition-duration:.9s}
.layer img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.layer--logo{scale:calc(1 + var(--beat,0))}
.layer--logo img{filter:drop-shadow(0 26px 30px rgba(236,22,120,.35))}

.a-drift  img{animation:drift 18s ease-in-out -4s infinite alternate}
.a-drift2 img{animation:drift 23s ease-in-out -9s infinite alternate-reverse}
.a-float  img{animation:floatY 10s ease-in-out -2s infinite alternate}
.a-float2 img{animation:floatY 12s ease-in-out -6s infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(-8px,5px,0)}to{transform:translate3d(9px,-6px,0)}}
@keyframes floatY{from{transform:translateY(-6px)}to{transform:translateY(6px)}}

.hero:not(.is-ready) .layer,
.hero:not(.is-met) .layer[data-role=logo],
.hero:not(.is-met) .layer[data-role=front]{opacity:0}
.hero.is-ready .layer[data-role=deep],.hero.is-ready .layer[data-role=mid],
.hero.is-met .layer[data-role=logo],.hero.is-met .layer[data-role=front]{animation:reveal var(--dur,2s) cubic-bezier(.19,1,.22,1) var(--t,0s) backwards}
@keyframes reveal{
  from{opacity:0;filter:blur(var(--blur,10px));scale:var(--from,1.05)}
  35%{opacity:1}
  to{opacity:1;filter:blur(0);scale:1}
}

.hero__flare{
  position:absolute;left:0;right:0;z-index:1;height:0;pointer-events:none;opacity:0;
  top:calc((100% + var(--pad-t) - var(--pad-b)) / 2);
}
.hero__flare::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(90,120,255,.0) 6%,rgba(150,175,255,.6) 34%,#fff 50%,rgba(150,175,255,.6) 66%,rgba(90,120,255,0) 94%,transparent);
}
.hero__flare::after{
  content:"";position:absolute;left:8%;right:8%;top:-46px;height:92px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(150,120,255,.32),rgba(150,120,255,0) 70%);
}
.hero__flare i{
  position:absolute;left:50%;top:0;width:220px;height:220px;margin:-110px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.75),rgba(225,90,255,.22) 32%,rgba(225,90,255,0) 68%);
}
.hero.is-met .hero__flare{animation:flare var(--flare-dur,2.2s) cubic-bezier(.2,.7,.2,1) var(--flare-t,0s) both}
@keyframes flare{0%{opacity:0;scale:.15 1}14%{opacity:1}100%{opacity:0;scale:1.3 1}}

.sweep{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  -webkit-mask:url(../images/kissfm_logo.png) center / contain no-repeat;mask:url(../images/kissfm_logo.png) center / contain no-repeat;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%) 160% 0 / 250% 100% no-repeat;
}
.hero.is-met .sweep{animation:sweep var(--sweep-dur,1.8s) cubic-bezier(.45,0,.2,1) var(--sweep-t,3s) both}
@keyframes sweep{from{background-position:160% 0}to{background-position:-60% 0}}

.hero.no-webgl{background:linear-gradient(125deg,#05030f,#1a0b4a,#4a0a52,#06123a,#05030f);background-size:400% 400%;animation:fallbackFlow 40s ease-in-out infinite}
@keyframes fallbackFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@media (max-width:1000px){
  .hero{--w:125vw;min-height:calc(var(--w) * .5625 + var(--pad-t) + var(--pad-b) + 30px)}
}
@media (max-width:600px){.hero{--w:150vw}}

@media (prefers-reduced-motion:reduce){
  .layer,.layer img,.hero__flare,.sweep,.hero.no-webgl{animation:none !important}
  .hero__flare{display:none}
}