/* Hero: neon la festival. Toate selectoarele încep cu #hero. */
#hero{
  --land:clamp(240px,36svh,330px);
  --sign-w:min(92vw,470px);
  --mh:clamp(150px,40vw,190px);
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  padding:calc(64px + env(safe-area-inset-top,0px) + clamp(12px,2.6svh,32px)) 0 0;
  display:flex;flex-direction:column;
  background:#070F15;
}

/* ---------- scena ---------- */
#hero .hero__scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#hero .hero__sky{position:absolute;inset:0;background:
  radial-gradient(90% 55% at 50% 100%,rgba(194,65,42,.34),transparent 70%),
  linear-gradient(180deg,#03070A 0%,#07121A 30%,#0F1D33 56%,#28193A 76%,#0B1820 100%)}
#hero .hero__photo{position:absolute;left:0;right:0;top:0;height:86%;will-change:transform}
#hero .hero__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  opacity:.52;filter:saturate(1.25) hue-rotate(-30deg) brightness(.72) contrast(1.12);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,#000 28%,#000 58%,transparent 94%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,#000 28%,#000 58%,transparent 94%)}
#hero .hero__veil{position:absolute;inset:0;background:
  radial-gradient(70% 60% at 50% 42%,transparent 0%,rgba(4,9,13,.55) 100%),
  linear-gradient(180deg,rgba(3,7,10,.9) 0%,rgba(7,15,21,.55) 22%,rgba(14,30,39,.28) 50%,rgba(7,15,21,0) 78%)}
#hero .hero__scene::after{content:"";position:absolute;inset:0;z-index:4;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#hero .hero__stars{position:absolute;left:0;top:0;width:100%;height:62%}
#hero .hero__stars .tw{animation:hero-twinkle 3.6s ease-in-out infinite}
#hero .hero__stars .tw:nth-child(3n){animation-duration:5.2s;animation-delay:-2s}
#hero .hero__spill{position:absolute;left:50%;top:calc(64px + 2svh);width:min(1200px,150vw);height:min(62svh,560px);transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,166,48,.20),rgba(255,46,151,.09) 55%,transparent 100%);
  opacity:1;animation:hero-spill 3.2s .3s both}

#hero .hero__land{position:absolute;left:0;right:0;bottom:0;height:var(--land)}
#hero .hero__far,#hero .hero__near{position:absolute;bottom:0;left:50%;height:100%;
  width:calc(var(--land) * 3.4286);margin-left:calc(var(--land) * -1.7143);overflow:visible;display:block;max-width:none}
#hero .hero__far{z-index:1}
#hero .hero__beams{position:absolute;inset:0;width:100%;height:100%;z-index:2;mix-blend-mode:screen;opacity:.95}
#hero .hero__near{z-index:3}
#hero .hero__sun{transform:translateY(0);animation:hero-rise 4.2s var(--ease) both}
#hero .hero__crest{stroke-dasharray:1;stroke-dashoffset:0;animation:hero-draw 3.4s .5s var(--ease) both}
#hero .hero__valley{animation:hero-breathe 6s ease-in-out infinite}

/* ---------- conținut ---------- */
#hero .hero__in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;width:100%}
#hero .hero__top{text-align:center;position:relative}
#hero .hero__kicker{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 clamp(6px,1.4svh,14px);
  font-stretch:75%;font-weight:700;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
#hero .hero__kicker i{width:5px;height:5px;border-radius:50%;background:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan)}
#hero .hero__kicker span:first-child{color:#fff}
#hero .hero__title{margin:0 auto;width:var(--sign-w);line-height:0}
#hero .hero__sign{display:block;width:100%;height:auto;overflow:visible}

/* neon: tub stins (sticlă), halou, tub colorat, miez alb */
#hero .hero__glass .y{fill:rgba(255,201,60,.07);stroke:rgba(255,226,160,.26);stroke-width:.9}
#hero .hero__glass .p{fill:rgba(255,46,151,.07);stroke:rgba(255,190,222,.24);stroke-width:.9}
#hero .hero__halo .y{fill:#FF9A1F}
#hero .hero__halo .p{fill:#FF2E97}
#hero .hero__tube .y{fill:#FFC53A}
#hero .hero__tube .p{fill:#FF4FA6}
#hero .hero__core .y{fill:#FFF6DC}
#hero .hero__core .p{fill:#FFE2F0}
#hero .hero__halo,#hero .hero__tube,#hero .hero__core{pointer-events:none}
#hero .tb{animation:hero-ignite 1.1s var(--d,0s) linear both}
#hero .t1{--d:.25s}#hero .t2{--d:.55s}#hero .t3{--d:.95s}#hero .t4{--d:.8s}#hero .t5{--d:1.05s}
#hero .t6{--d:1.3s;animation:hero-ignite 1.1s 1.3s linear both,hero-buzz 5.4s 3s linear infinite}
#hero .t7{--d:1.75s}#hero .t8{--d:2s}#hero .t9{--d:2.3s}

#hero .hero__eras{display:flex;justify-content:center;align-items:baseline;gap:.55em;margin:clamp(4px,1svh,12px) 0 0;
  font-family:var(--f-deco);font-size:clamp(26px,3.3vw,46px);line-height:1.1;letter-spacing:.02em}
#hero .hero__eras .neon{animation:hero-era .9s both}
#hero .hero__eras .neon:nth-of-type(2){animation-delay:2.6s}
#hero .hero__eras .neon:nth-of-type(3){animation-delay:2.85s}
#hero .hero__eras .neon:nth-of-type(4){animation-delay:3.1s}

/* bandă informații: stă pe „buza scenei” (linia de orizont neon) */
#hero .hero__info{position:relative;margin-top:auto;padding:22px 0 calc(110px + var(--mh));display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
#hero .hero__info::after{content:"";position:absolute;top:-40px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,15,21,0),rgba(7,15,21,.5) 45%,rgba(7,15,21,.2))}
#hero .hero__when{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
#hero .hero__when strong{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#fff}
#hero .hero__when span{font-stretch:75%;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
#hero .hero__when b{color:var(--neon-yellow);font-weight:700;padding:0 .3em}
#hero .hero__when em{display:none;font-style:normal;font-size:14px;color:var(--ink-3);margin-top:8px}
#hero .hero__when em b{color:var(--ink-2);padding:0}

/* countdown: afișaj VFD cu segmente fantomă */
#hero .hero__count{margin:0;padding:10px 16px 8px;border-radius:14px;background:rgba(3,8,11,.72);
  box-shadow:inset 0 0 0 1px rgba(41,243,255,.22),inset 0 0 24px rgba(41,243,255,.06),0 10px 30px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#hero .hero__count-label{margin:0 0 6px;font-stretch:75%;font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--neon-cyan)}
#hero .hero__digits{display:flex;align-items:flex-start;justify-content:center;gap:6px;min-height:calc(var(--dh) + 18px);--dh:clamp(34px,3.6vw,48px)}
#hero .hero__unit{display:flex;flex-direction:column;align-items:center;gap:3px}
#hero .hero__unit span{font-stretch:75%;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
#hero .hero__dg{display:flex;gap:3px;height:var(--dh)}
#hero .hero__dg svg{height:100%;width:auto;overflow:visible}
#hero .hero__dg polygon{fill:rgba(41,243,255,.07);transition:fill .12s linear}
#hero .hero__dg polygon.on{fill:#9FFBFF}
#hero .hero__dg svg{filter:drop-shadow(0 0 2px rgba(41,243,255,.95)) drop-shadow(0 0 7px rgba(41,243,255,.55))}
#hero .hero__colon{position:relative;width:5px;height:var(--dh);flex:none;font-style:normal}
#hero .hero__colon::before,#hero .hero__colon::after{content:"";position:absolute;left:0;width:5px;height:5px;border-radius:1px;background:#9FFBFF;box-shadow:0 0 6px var(--neon-cyan);transform:skewX(-8deg)}
#hero .hero__colon::before{top:30%}#hero .hero__colon::after{top:62%}
#hero .hero__colon{animation:hero-blink 1s steps(1) infinite}

#hero .hero__act{display:flex;flex-direction:column;align-items:center;gap:14px}
#hero .hero__offer{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
#hero .hero__offer .hf-pill{min-height:32px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 22px rgba(194,65,42,.45)}
#hero .hero__offer .hf-pill i{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:hero-live 1.8s ease-out infinite}
#hero .hero__offer-sub{font-size:13px;color:var(--ink-2)}
#hero .hero__offer-sub b{color:#fff}
#hero .hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
#hero .hero__ctas .hf-btn{min-height:50px;padding:0 22px}
#hero .hero__ctas .hf-btn--primary{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 26px rgba(237,164,35,.35)}

/* mascota: stă pe buza scenei */
#hero .hero__mascot{position:absolute;right:max(2px,4vw);bottom:48px;width:calc(var(--mh) * .9565);pointer-events:none}
#hero .hero__vid{position:relative;display:block;width:100%;height:auto;aspect-ratio:440/460;object-fit:contain;background:transparent;z-index:2}
#hero .hero__pool{position:absolute;left:8%;right:8%;bottom:-10px;height:26px;border-radius:50%;z-index:1;
  background:radial-gradient(closest-side,rgba(164,92,255,.75),rgba(255,46,151,.25) 60%,transparent);
  box-shadow:0 0 0 1.5px rgba(200,160,255,.55),0 0 18px rgba(164,92,255,.6)}
#hero .hero__spot{position:absolute;left:-30%;right:-30%;bottom:-20px;height:90%;z-index:0;
  background:radial-gradient(50% 60% at 50% 100%,rgba(164,92,255,.35),rgba(255,46,151,.12) 55%,transparent 100%)}
#hero .hero__credit{position:absolute;z-index:2;left:0;right:0;bottom:10px;margin:0;text-align:center;font-size:11px;letter-spacing:.04em;color:var(--ink-3)}

/* ---------- desktop ---------- */
@media (min-width:900px){
  #hero{--land:clamp(300px,56svh,560px);--sign-w:min(clamp(560px,48vw,820px),calc((100svh - 400px) * 1.94))}
  #hero .hero__title{min-width:420px}
  #hero .hero__info{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:28px;padding:26px 0 clamp(34px,5.5svh,60px);text-align:left}
  #hero .hero__when{align-items:flex-start;padding-bottom:4px}
  #hero .hero__when em{display:block}
  #hero .hero__count{justify-self:center}
  #hero .hero__act{align-items:flex-end}
  #hero .hero__offer{align-items:flex-end}
  #hero .hero__ctas{flex-direction:column;align-items:stretch;gap:12px;min-width:250px}
  #hero .hero__mascot{right:-8px;bottom:100%;width:clamp(190px,18vw,270px);margin-bottom:-2px}
  #hero .hero__credit{left:auto;right:var(--gutter);bottom:8px;text-align:right}
}
@media (min-width:900px) and (max-height:760px){
  #hero .hero__mascot{width:clamp(170px,15vw,220px)}
}

/* ---------- animații ---------- */
@keyframes hero-ignite{
  0%{opacity:0}6%{opacity:.85}9%{opacity:.05}17%{opacity:.05}20%{opacity:1}23%{opacity:.25}31%{opacity:.25}
  34%{opacity:.95}37%{opacity:.55}40%{opacity:1}100%{opacity:1}}
@keyframes hero-buzz{
  0%,61%{opacity:1}61.5%{opacity:.2}62.4%{opacity:1}63%{opacity:.35}63.6%{opacity:.9}64.2%{opacity:.15}65.5%{opacity:1}
  84%{opacity:1}84.4%{opacity:.55}84.9%{opacity:1}100%{opacity:1}}
@keyframes hero-era{0%{opacity:.18;text-shadow:none}30%{opacity:1}36%{opacity:.3}46%{opacity:1}100%{opacity:1}}
@keyframes hero-spill{0%{opacity:0}40%{opacity:.4}100%{opacity:1}}
@keyframes hero-rise{0%{transform:translateY(96px)}100%{transform:translateY(0)}}
@keyframes hero-draw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes hero-breathe{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes hero-twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes hero-blink{0%{opacity:1}50%{opacity:.25}}
@keyframes hero-live{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}

/* oprire animații: finalul static (semn aprins, soare sus, creastă desenată) */
html.hf-paused #hero .tb,html.hf-paused #hero .hero__sun,html.hf-paused #hero .hero__crest,
html.hf-paused #hero .hero__spill,html.hf-paused #hero .hero__eras .neon{animation:none}
html.hf-paused #hero .hero__valley,html.hf-paused #hero .hero__stars .tw,html.hf-paused #hero .hero__colon,
html.hf-paused #hero .hero__offer .hf-pill i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  #hero .tb,#hero .hero__sun,#hero .hero__crest,#hero .hero__spill,#hero .hero__eras .neon,
  #hero .hero__valley,#hero .hero__stars .tw,#hero .hero__colon,#hero .hero__offer .hf-pill i{animation:none}
}