.hero-media { container-type: size; }
.hs-scena { position: absolute; inset: 0; pointer-events: none; overflow: hidden; --k: max(100cqw / 1920, 100cqh / 1080); }
.hs-cadru { position: absolute; left: calc((100% - 1920 * var(--k)) * 0.6987); top: 50%; width: calc(1920 * var(--k)); height: calc(1080 * var(--k)); transform: translateY(-50%); }


.hs-grup { position: absolute; isolation: isolate; background: url('/media/deco/D2-grup-v3.webp') bottom left / contain no-repeat; aspect-ratio: 760 / 660; } 
.hs-grup-dreapta { left: calc(1478 * var(--k)); top: calc((935 - 356) * var(--k)); width: calc(410 * var(--k)); } 

.hs-grup::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 10%; z-index: -1; opacity: 0.5;
  background: radial-gradient(ellipse at center, rgb(70 45 25 / 0.32) 0%, rgb(70 45 25 / 0.12) 45%, rgb(70 45 25 / 0) 72%); }

.hs-lumina { position: absolute; left: 29.6%; top: 58.2%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(255 170 60 / 0.55) 0%, rgb(255 120 20 / 0.22) 35%, rgb(255 120 20 / 0) 70%); mix-blend-mode: screen; }


.hs-seara { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 88% 92%, rgb(255 150 50 / 0.16), rgb(255 150 50 / 0) 70%),
    radial-gradient(ellipse 120% 95% at 55% 45%, rgb(0 0 0 / 0) 55%, rgb(60 32 12 / 0.20) 100%); }


.hs-frunze { position: absolute; inset: 0; }
.hs-frunza { position: absolute; left: var(--x); top: 0; width: var(--m); aspect-ratio: 1; opacity: 0; }
.hs-frunza-i { width: 100%; height: 100%; background: center / contain no-repeat; }

@media (prefers-reduced-motion: no-preference) {
  html.intro-on .hs-grup { opacity: 0; transform: translateY(18px); }
  .hs-grup { transition: opacity 0.9s ease 0.15s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
  .hs-lumina { animation: hs-palpaie 2.6s 23 steps(1, end); } 
  html.intro-on .hs-seara { opacity: 0; }
  .hs-seara { transition: opacity 1.6s ease 0.3s; }
  .hs-frunze.cad .hs-frunza { animation: hs-cade var(--d) linear var(--w) 1 forwards; }
  .hs-frunze.cad .hs-frunza-i { animation: hs-legana calc(var(--d) / 3) ease-in-out var(--w) 3 alternate; }
}
@media (prefers-reduced-motion: reduce) { .hs-frunze { display: none; } }
@keyframes hs-palpaie {
  0% { opacity: 1; } 12% { opacity: 0.82; } 19% { opacity: 1; } 37% { opacity: 0.9; } 44% { opacity: 0.7; }
  52% { opacity: 0.95; } 71% { opacity: 0.85; } 83% { opacity: 1; } 91% { opacity: 0.78; }
}
@keyframes hs-cade {
  0% { opacity: 0; transform: translate(0, -60px) rotate(0deg); }
  8% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(var(--dx), calc(100cqh + 20px)) rotate(var(--r)); }
}
@keyframes hs-legana { from { transform: translateX(-18px) rotate(-14deg); } to { transform: translateX(18px) rotate(14deg); } }


@media (max-width: 63.999rem) {
  .hs-grup-dreapta { left: calc(830 * var(--k)); top: calc((935 - 322) * var(--k)); width: calc(370 * var(--k)); transform: scaleX(-1); }
  html.intro-on .hs-grup-dreapta { transform: scaleX(-1) translateY(18px); }
  .hs-frunza { width: calc(var(--m) * 0.7); }
  .hs-frunza:nth-child(n+5) { display: none; }
}








.hs-nota { position: absolute; right: 12px; bottom: 8px; margin: 0; font-size: 0.75rem; color: #555; z-index: 2; pointer-events: none; }



html.fara-miscare .hs-frunze { display: none !important; }



.psl { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.psl.vizibil { opacity: 1; }
.psl p { margin: 0; position: absolute; color: #1a1a1a; line-height: 1.2; white-space: nowrap; }
.psl-titlu { left: calc(1341 * var(--k)); top: calc(178 * var(--k)); transform: translateX(-50%);
  font-size: max(15px, calc(40 * var(--k))); font-weight: 600; letter-spacing: 0.01em; }
.psl-titlu::after { content: ''; display: block; height: 2px; width: 40%; margin: calc(10 * var(--k)) auto 0; background: var(--gold); }
.psl-et { right: calc((1920 - 1190) * var(--k)); top: calc(var(--y) * var(--k)); transform: translateY(-50%);
  font-size: max(12px, calc(21 * var(--k))); text-align: right; }
.psl-et span { color: #333; }
.psl-et b { font-weight: 600; color: #1a1a1a; }
.psl-et::after { content: ''; position: absolute; top: 50%; left: calc(100% + 10 * var(--k)); width: calc(28 * var(--k)); height: 1.5px; background: var(--gold); }
.psl-et::before { content: ''; position: absolute; top: calc(50% - 3px); left: calc(100% + 38 * var(--k)); width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .psl { transition: none; } }
@media (max-width: 63.999rem) { .psl { display: none; } } 


@media (min-width: 64rem) {
  .hero-copy::before { right: -2rem !important; background: linear-gradient(90deg, rgb(245 240 230 / 0.92) calc(100% - 2rem), rgb(245 240 230 / 0)) !important; }
}


.hs-scena .hs-seara, .hs-scena .hs-grup, .hs-scena .hs-frunze { transition: opacity 0.9s ease; }
.hs-scena:not(.bautura) .hs-seara, .hs-scena:not(.bautura) .hs-grup, .hs-scena:not(.bautura) .hs-frunze { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .hs-scena .hs-seara, .hs-scena .hs-grup { transition: none; } }