/* Fundal imersiv în bannerul de sus (hero) — 30.09.2026.
   Scenele din oraș stau semi-transparent în spatele textului
   „Comunitatea ta. RolePlay-ul tău.": imaginea se apropie lent și alunecă
   puțin, iar între scene trece un fum cald. Valorile animate vin din
   imersiv.js (--o, --s, --x pe fiecare scenă, --smoke pe cutie). */

.hero-imx{--hx-alpha:.62}
.hero-imx .hx-scenes{position:absolute;inset:0;opacity:var(--hx-alpha)}
.hero-imx .hx-scene{position:absolute;inset:0;opacity:var(--o,0);transform:translate3d(var(--x,0),0,0) scale(var(--s,1.15));transform-origin:55% 50%;will-change:opacity,transform}
/* bannerul vechi ascundea orice <img> din .hero-bg până primea .is-active */
.hero-imx .hx-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:none;user-select:none;-webkit-user-drag:none}

/* fum cald: acoperă tot la intrare, apoi apare doar între scene */
.hero-imx .hx-smoke{position:absolute;inset:-15%;pointer-events:none;opacity:var(--smoke,1);background:
  radial-gradient(ellipse 55% 45% at 68% 42%,rgba(255,150,70,.22),transparent 70%),
  radial-gradient(ellipse 70% 60% at 40% 60%,rgba(60,38,24,.85),transparent 75%),
  radial-gradient(ellipse 100% 80% at 50% 50%,rgba(22,15,11,.92) 35%,rgba(12,9,7,.96) 100%)}
.hero-imx .hx-smoke::before,.hero-imx .hx-smoke::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 38% 30% at 50% 50%,rgba(255,170,100,.18),transparent 70%);animation:hx-drift 16s ease-in-out infinite alternate}
.hero-imx .hx-smoke::after{background:radial-gradient(ellipse 30% 26% at 50% 50%,rgba(120,80,50,.35),transparent 70%);animation-duration:22s;animation-direction:alternate-reverse}
@keyframes hx-drift{from{transform:translate(-18%,-6%) scale(1)}to{transform:translate(16%,8%) scale(1.25)}}

.hero-imx .hx-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.06;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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:hx-grain 1.2s steps(4) infinite}
@keyframes hx-grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

@media (max-width:700px){.hero-imx{--hx-alpha:.5}}

@media (prefers-reduced-motion:reduce){
  .hero-imx .hx-scene{transform:none!important}
  .hero-imx .hx-smoke::before,.hero-imx .hx-smoke::after,.hero-imx .hx-grain{animation:none}
}

/* Buton mare „Deschide un tichet" în caseta din bannerul de sus (01.10.2026) */
.hero-ticket-cta{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,138,31,.55);background:linear-gradient(135deg,rgba(255,138,31,.22),rgba(255,138,31,.06));color:#fff;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease;box-shadow:0 10px 26px rgba(255,138,31,.14)}
.hero-ticket-cta:hover{transform:translateY(-2px);border-color:var(--orange,#ff8a1f);background:linear-gradient(135deg,rgba(255,138,31,.32),rgba(255,138,31,.1))}
.hero-ticket-cta:focus-visible{outline:2px solid var(--orange,#ff8a1f);outline-offset:3px}
.hero-ticket-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--orange,#ff8a1f);font-size:22px;flex:none}
.hero-ticket-cta strong{display:block;font-size:15px;line-height:1.2}
.hero-ticket-cta small{display:block;margin-top:3px;color:#c8ccd0;font-size:11px;line-height:1.35}
.hero-ticket-arrow{margin-left:auto;font-size:20px;font-weight:900;color:var(--orange,#ff8a1f)}

/* Buton mare „VIP Shop", deasupra celui de tichete (03.10.2026) — auriu, cu
   un luciu care trece peste el din când în când, ca să iasă în evidență. */
.hero-vip-cta{position:relative;overflow:hidden;padding:17px 16px;border-color:rgba(255,201,60,.65);background:linear-gradient(135deg,rgba(255,201,60,.26),rgba(255,138,31,.12) 55%,rgba(255,201,60,.06));box-shadow:0 12px 30px rgba(255,190,60,.18)}
.hero-vip-cta:hover{border-color:#ffc93c;background:linear-gradient(135deg,rgba(255,201,60,.36),rgba(255,138,31,.18) 55%,rgba(255,201,60,.1))}
.hero-vip-cta:focus-visible{outline-color:#ffc93c}
.hero-vip-cta .hero-ticket-icon{width:48px;height:48px;font-size:25px;background:linear-gradient(145deg,#ffd76a,#ff9d1f);box-shadow:0 6px 16px rgba(255,180,50,.35)}
.hero-vip-cta strong{font-size:18px;letter-spacing:.01em}
.hero-vip-cta small{color:#e3d6b8}
.hero-vip-cta .hero-ticket-arrow{color:#ffc93c}
.hero-vip-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);background-size:260% 100%;background-position:140% 0;animation:hero-vip-shine 4.5s ease-in-out 1.2s infinite;pointer-events:none}
@keyframes hero-vip-shine{0%,55%{background-position:140% 0}100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.hero-vip-cta::after{animation:none}}