/* HERO F: Mega stage (stage photo + light beams + giant glowing logo + countdown bar) */
.v-hero-f{--lw:min(calc(100 * var(--vw)),1680px,calc((100svh - 330px) * 2.5));position:relative;min-height:clamp(660px,100svh,1120px);overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;color:#fff;background:#120804}
.v-hero-f:has(.ol-ytag){--lw:min(calc(100 * var(--vw)),1680px,calc((100svh - 390px) * 2.5))}
.v-hero-f .hf-bg{position:absolute;inset:0;z-index:-6}
.v-hero-f .hf-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 60%;animation:hf-kb 26s ease-in-out infinite alternate;will-change:transform}
.v-hero-f .hf-tint{position:absolute;inset:0;z-index:-5;background:linear-gradient(180deg,rgba(18,6,0,.62) 0%,rgba(60,20,0,.18) 34%,rgba(40,12,0,.28) 60%,rgba(12,4,0,.9) 100%)}
/* kinetic outlined headline behind the logo */
.v-hero-f .hf-kinetic{position:absolute;inset:0;z-index:-4;pointer-events:none}
.v-hero-f .hf-k{position:absolute;left:0;right:0;overflow:hidden;white-space:nowrap}
.v-hero-f .hf-k1{top:15%}.v-hero-f .hf-k2{top:56%}
.v-hero-f .hf-k-track{display:flex;width:max-content;animation:hf-mq 60s linear infinite;will-change:transform}
.v-hero-f .hf-k2 .hf-k-track{animation-direction:reverse;animation-duration:70s}
.v-hero-f .hf-k span{font-family:var(--fb);text-transform:uppercase;font-size:clamp(4rem,11vw,10rem);line-height:1;letter-spacing:-.01em;padding-right:.5em;
  color:transparent;-webkit-text-stroke:2px rgba(249,188,13,.5)}
.v-hero-f .hf-k span em{font-style:normal;-webkit-text-stroke-color:rgba(255,255,255,.32)}
/* stage beams */
.v-hero-f .hf-beams{position:absolute;inset:0;z-index:-3;pointer-events:none;mix-blend-mode:screen}
.v-hero-f .hf-beam{--bc:255,214,90;position:absolute;top:-6%;left:var(--x);width:900px;height:120%;margin-left:-450px;transform-origin:50% 0;opacity:.75;
  background:conic-gradient(from 167deg at 50% 0,rgba(var(--bc),0) 0deg,rgba(var(--bc),.55) 9deg,rgba(255,255,255,.7) 13deg,rgba(var(--bc),.55) 17deg,rgba(var(--bc),0) 26deg,rgba(var(--bc),0) 360deg);
  -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 35%,transparent 88%);mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 35%,transparent 88%);
  animation:hf-sweep var(--t) ease-in-out var(--dl) infinite alternate;will-change:transform}
.v-hero-f .hf-beam::before{content:"";position:absolute;left:50%;top:5%;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,rgba(var(--bc),.9) 35%,rgba(var(--bc),0) 70%)}
.v-hero-f .hf-red{--bc:255,70,60}
.v-hero-f .hf-gold{--bc:255,214,90}
.v-hero-f .hf-green{--bc:80,240,150}
/* haze */
.v-hero-f .hf-haze{position:absolute;inset:0;z-index:-2;pointer-events:none}
.v-hero-f .hf-haze i{position:absolute;width:70vw;height:50vh;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,160,.32),rgba(255,180,90,0));animation:hf-haze 18s ease-in-out infinite alternate}
.v-hero-f .hf-haze i:nth-child(1){left:-10%;top:40%}
.v-hero-f .hf-haze i:nth-child(2){left:40%;top:20%;animation-duration:24s;animation-delay:-6s}
.v-hero-f .hf-haze i:nth-child(3){left:10%;top:62%;width:90vw;animation-duration:21s;animation-delay:-11s}
/* embers + confetti */
.v-hero-f .hf-embers{position:absolute;inset:0;z-index:-1;pointer-events:none}
.v-hero-f .hf-embers i{position:absolute;left:var(--x);bottom:-14px;width:calc(6px * var(--s));height:calc(6px * var(--s));border-radius:50%;background:var(--c);
  box-shadow:0 0 10px 2px var(--c);animation:hf-ember var(--d) linear var(--delay) infinite}
.v-hero-f .hf-embers i:nth-child(3n){border-radius:2px;width:calc(7px * var(--s));height:calc(12px * var(--s));box-shadow:none;animation-name:hf-confetti}
/* vignette */
.v-hero-f .hf-vig{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 42%,rgba(0,0,0,0) 38%,rgba(40,10,0,.45) 70%,rgba(8,2,0,.85) 100%)}
/* logo */
.v-hero-f .hf-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:92px 16px 10px}
.v-hero-f .hf-logo-p{width:100%}
.v-hero-f .hf-float{position:relative;animation:hf-in 1.3s cubic-bezier(.2,.9,.25,1.1) both,hf-float 7s ease-in-out 1.3s infinite}
.v-hero-f .hf-logo{position:relative;z-index:1;width:var(--lw);max-width:none;height:auto;margin:0 0 calc(var(--lw) * -.04) calc(50% - var(--lw) / 2);
  filter:drop-shadow(0 0 28px rgba(249,188,13,.45)) drop-shadow(0 24px 30px rgba(0,0,0,.55))}
.v-hero-f .hf-halo{position:absolute;z-index:0;left:50%;top:calc(var(--lw) * .2);width:calc(var(--lw) * .9);height:calc(var(--lw) * .5);translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,200,80,.55),rgba(255,140,30,.18) 55%,rgba(255,120,0,0));animation:hf-glow 4.5s ease-in-out infinite}
.v-hero-f .hf-lion{position:absolute;z-index:2;left:calc(50% + var(--lw) * .132);top:calc(var(--lw) * .256);width:calc(var(--lw) * .13);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,170,.75),rgba(255,200,60,.25) 50%,rgba(255,200,60,0));mix-blend-mode:screen;animation:hf-lion 2.6s ease-in-out infinite;pointer-events:none}
.v-hero-f .hf-h1{font-size:clamp(1.3rem,2.8vw,2.4rem);margin-top:12px;color:var(--gold);-webkit-text-stroke:1.5px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000}
.v-hero-f .hf-h1 span{color:#fff}
/* countdown bar */
.v-hero-f .hf-bar{position:relative;z-index:3;margin:0 auto clamp(14px,2.4vw,26px);width:min(1240px,100% - 32px);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:clamp(14px,2.4vw,34px);
  padding:14px 18px 14px 22px;border-radius:20px;background:linear-gradient(120deg,rgba(20,10,4,.78),rgba(40,18,6,.6));border:1.5px solid rgba(249,188,13,.35);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 50px rgba(0,0,0,.45);animation:hf-up 1s .6s both}
.v-hero-f .hf-bar::before{content:"";position:absolute;left:22px;right:22px;top:-1.5px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--red) 0 33.3%,var(--gold) 0 66.6%,var(--green) 0)}
.v-hero-f .hf-bar-t small{display:block;font-family:var(--fb);text-transform:uppercase;font-size:.62rem;letter-spacing:.18em;color:var(--gold)}
.v-hero-f .hf-bar-t b{display:block;font-family:var(--fb);font-weight:400;text-transform:uppercase;font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.15;margin-top:2px}
.v-hero-f .hf-bar-t span{display:block;font-size:.8rem;opacity:.75;margin-top:2px}
.v-hero-f .hf-cd{display:flex;align-items:flex-start;gap:6px}
.v-hero-f .hf-cd>div{text-align:center;min-width:54px}
.v-hero-f .hf-cd b{display:block;font-family:var(--fb);font-weight:400;font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1;color:#fff;text-shadow:0 0 18px rgba(249,188,13,.5)}
.v-hero-f .hf-cd span{display:block;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-top:4px}
.v-hero-f .hf-cd>i{font-style:normal;font-family:var(--fb);font-size:1.8rem;line-height:1;color:var(--gold);opacity:.7;animation:hf-blink 1s steps(2) infinite}
.v-hero-f .hf-ctas{display:flex;gap:10px}
.v-hero-f .hf-ctas .btn{padding:13px 18px;font-size:.85rem;white-space:nowrap}
.v-hero-f .btn-chunky{border-color:#000;box-shadow:4px 4px 0 #000}
.v-hero-f.fx-paused *,.v-hero-f.fx-paused{animation-play-state:paused!important}

@keyframes hf-kb{from{scale:1.06}to{scale:1.16}}
@keyframes hf-mq{to{transform:translate3d(-50%,0,0)}}
@keyframes hf-sweep{from{transform:rotate(var(--a))}to{transform:rotate(calc(var(--a) * -1))}}
@keyframes hf-haze{to{transform:translate3d(12vw,-6vh,0) scale(1.2)}}
@keyframes hf-ember{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:1}50%{transform:translate3d(24px,-50svh,0)}90%{opacity:.8}100%{transform:translate3d(-10px,-104svh,0);opacity:0}}
@keyframes hf-confetti{0%{transform:translate3d(0,0,0) rotate(var(--r));opacity:0}10%{opacity:1}100%{transform:translate3d(40px,-104svh,0) rotate(calc(var(--r) + 540deg));opacity:0}}
@keyframes hf-in{from{opacity:0;transform:scale(.7) translateY(40px)}to{opacity:1;transform:none}}
@keyframes hf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hf-glow{50%{opacity:.6;transform:scale(1.08)}}
@keyframes hf-lion{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:.95;transform:scale(1.15)}}
@keyframes hf-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes hf-blink{50%{opacity:.15}}

@media(max-width:1000px){
  .v-hero-f .hf-bar{grid-template-columns:1fr auto}
  .v-hero-f .hf-ctas{grid-column:1/-1;justify-content:center}
}
@media(max-width:760px){
  .v-hero-f:has(.ol-ytag){--lw:120vw}
  .v-hero-f{--lw:120vw;min-height:max(640px,100svh)}
  .v-hero-f .hf-in{padding:84px 12px 6px}
  .v-hero-f .hf-k span{font-size:clamp(3.4rem,20vw,6rem)}
  .v-hero-f .hf-k1{top:13%}.v-hero-f .hf-k2{top:57%}
  .v-hero-f .hf-h1 span{display:block}
  .v-hero-f .hf-beam{width:520px;margin-left:-260px}
  .v-hero-f .hf-bg img{object-position:72% 60%}
  .v-hero-f .hf-bar{grid-template-columns:1fr;text-align:center;padding:14px 14px 16px;gap:12px;width:calc(100% - 20px)}
  .v-hero-f .hf-cd{justify-content:center}
  .v-hero-f .hf-cd>div{min-width:48px}
  .v-hero-f .hf-ctas{flex-direction:column}
  .v-hero-f .hf-ctas .btn{width:100%}
}