/* The <video> is attached early so a tap plays immediately, but hls.js paints
   frame 0 as soon as it buffers — which would replace the designed poster
   (headline, branding) with a random first frame. Keep it invisible until
   playback actually starts; opacity (not display) so decoding continues. */
.vsl-video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;object-fit:contain;display:block;opacity:0;transition:opacity .2s ease}
.vsl-started .vsl-video{opacity:1}
.bnposter,.vsl-poster{transition:opacity .25s ease}
/* vsl-started is set on first play and never removed: once someone has started
   watching, pausing leaves the frame they paused on, not the thumbnail. */
.vsl-started .bnposter,.vsl-started .vsl-poster,.vsl-started>picture{opacity:0;pointer-events:none}
.vsl-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(64px,16%,104px);aspect-ratio:1;
  border:0;border-radius:50%;background:rgba(0,0,0,.55);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:opacity .25s ease,transform .15s ease,background .15s ease;padding:0;z-index:2}
.vsl-play:hover{background:rgba(0,0,0,.72);transform:translate(-50%,-50%) scale(1.06)}
.vsl-play svg{width:42%;height:42%;margin-left:8%;fill:#fff}
.vsl-playing .vsl-play{opacity:0;pointer-events:none}
.vsl-starting .vsl-play svg{display:none}
.vsl-starting .vsl-play::after{content:"";width:46%;aspect-ratio:1;border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:vsl-spin .8s linear infinite}
@keyframes vsl-spin{to{transform:rotate(360deg)}}

/* Mute + fullscreen. No native controls anywhere, so there is no seek bar: a
   VSL must not be scrubbable. The pair fades in once playback has started. */
.vsl-ctrls{position:absolute;right:.6rem;bottom:.6rem;display:flex;gap:.4rem;opacity:0;
  transition:opacity .2s ease;pointer-events:none;z-index:3}
.vsl-started .vsl-ctrls{opacity:.75;pointer-events:auto}
.vsl-started:hover .vsl-ctrls,.vsl-ctrls:focus-within{opacity:1}
.vsl-ctrl{width:2.3rem;height:2.3rem;border:0;border-radius:50%;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.vsl-ctrl:hover{background:rgba(0,0,0,.75)}
.vsl-ctrl svg{width:60%;height:60%;fill:#fff}
/* Fullscreen: the aspect box becomes the screen, so drop its padding trick. */
.bunny_responsive_padding:fullscreen,#vsl-code:fullscreen,.tsales-frame:fullscreen,
.video-wrapper:fullscreen,.video-full:fullscreen{width:100vw;height:100vh;padding-top:0!important;background:#000}
:fullscreen .vsl-video{object-fit:contain;height:100%}
:fullscreen .bnposter,:fullscreen picture,:fullscreen .vsl-play{display:none}