/* VSL · the hero video: a framed poster that turns into the YouTube player when play is pressed.
   Shared by /wings-gala, /leadgala, /multumim, /solicitare-trimisa and /parteneri; it only adds rules. */

.vsl{position:relative;isolation:isolate;width:min(100%,760px);margin:8px auto 6px;display:grid;justify-items:center;color:inherit}

/* a warm glow behind the frame, so the video sits in the hero light instead of on top of it */
.vsl::before{content:"";position:absolute;z-index:-1;left:-8%;right:-8%;top:-10%;bottom:6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(242,96,24,.34),rgba(242,96,24,0) 72%)}

.vsl-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--ink);
  box-shadow:0 0 0 1px rgba(250,240,228,.3),0 0 0 7px rgba(242,96,24,.12),0 34px 64px -26px rgba(26,10,2,.75)}
.vsl-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .6s ease}
.vsl-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;opacity:0;transition:opacity .6s ease}
.vsl-frame.ready iframe{opacity:1}
.vsl-hit{position:absolute;inset:0;z-index:2;width:100%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:inherit}
.vsl-hit:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

/* the cue under the frame: the orange play button, its rings spreading like sound.
   The margin and gap keep the widest ring (52px x 1.45, more on hover) clear of the frame, its 7px halo and the text. */
.vsl-cue{display:inline-flex;align-items:center;gap:24px;margin-top:34px;max-height:64px;border:0;padding:0;background:none;color:inherit;font:inherit;font-size:var(--fs-body);font-weight:700;line-height:1.3;cursor:pointer;
  transition:opacity .4s ease,max-height .7s var(--ease),margin .7s var(--ease)}
.vsl-cue i{width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none}
.vsl-cue .vsl-dur{font-weight:400}
.vsl-play{position:relative;width:52px;height:52px;flex:none;border-radius:50%;background:var(--orange);color:var(--cream);display:grid;place-items:center;
  box-shadow:0 12px 26px -10px rgba(242,96,24,.9);transition:transform .5s var(--ease)}
.vsl-play svg{width:18px;height:18px;fill:currentColor;margin-left:3px}
.vsl-play::before,.vsl-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--orange);opacity:0;pointer-events:none;animation:vslRing 2.6s cubic-bezier(.22,1,.36,1) infinite}
.vsl-play::after{animation-delay:1.3s}
@keyframes vslRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}

@media (hover:hover){
  .vsl:has(.vsl-hit:hover) .vsl-frame img{transform:scale(1.035)}
  .vsl:has(.vsl-hit:hover) .vsl-play,.vsl-cue:hover .vsl-play{transform:scale(1.1)}
}

/* playing: the cue folds away, the poster gives way to the player */
.vsl.playing .vsl-cue{opacity:0;visibility:hidden;max-height:0;margin-top:0}
.vsl.playing .vsl-play::before,.vsl.playing .vsl-play::after{animation:none}
.vsl-frame.ready img{opacity:0}

@media (max-width:600px){
  .vsl-frame{border-radius:14px;box-shadow:0 0 0 1px rgba(250,240,228,.3),0 0 0 5px rgba(242,96,24,.12),0 24px 44px -20px rgba(26,10,2,.75)}
  .vsl-cue{gap:20px;margin-top:28px}
  .vsl-play{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .vsl-play::before,.vsl-play::after{animation:none}
  .vsl-frame img,.vsl-play{transition:none}
}