/*
 * Videos in posts, Facebook's way (niguro-video.js marks Sngine's Plyr players in posts .ng-vp; reels and movies keep
 * their own). By default: the video, a thin progress line at its foot, the sound button at the bottom right and a
 * play button in the middle while paused. Plyr's full bar (play, scrubber, time, sound, settings, picture-in-picture,
 * fullscreen) comes on hover with a mouse, for a moment after a tap (.ng-vp--ui), while a control has keyboard focus
 * and while its settings menu is open. In fullscreen Plyr behaves as its own.
 * Over the video the controls are white on a dark glass (as the photo lightbox's); the line is the brand colour
 * (Plyr's --plyr-color-main, niguro.css), the same by day and night.
 */

/* Plyr's bar: hidden until wanted (its own idle hiding is not used outside fullscreen) */
.plyr.ng-vp:not(.plyr--fullscreen-active) .plyr__controls {
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.plyr.ng-vp.ng-vp--ui:not(.plyr--fullscreen-active) .plyr__controls,
.plyr.ng-vp:not(.plyr--fullscreen-active):has(:focus-visible) .plyr__controls,
.plyr.ng-vp:not(.plyr--fullscreen-active):focus-visible .plyr__controls,
.plyr.ng-vp:not(.plyr--fullscreen-active):has(.plyr__menu__container:not([hidden])) .plyr__controls {
  opacity: 1; pointer-events: auto; transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .plyr.ng-vp:not(.plyr--fullscreen-active):hover .plyr__controls { opacity: 1; pointer-events: auto; transform: none; }
}
/* the video takes focus for the keys (space / K, M, F) */
.plyr.ng-vp:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: -2px; }

/* the progress line */
.plyr.ng-vp .ng-vp__line {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden;
  background: hsl(0 0% 100% / .28); pointer-events: none; transition: opacity .2s ease;
}
.plyr.ng-vp .ng-vp__line > i { display: block; height: 100%; background: var(--plyr-color-main, var(--ng-brand)); transform: scaleX(0); transform-origin: 0 50%; }
html[dir="rtl"] .plyr.ng-vp .ng-vp__line > i { transform-origin: 100% 50%; }
.plyr.ng-vp.plyr--stopped .ng-vp__line { opacity: 0; }

/* the play button in the middle, while paused */
.plyr.ng-vp .ng-vp__big {
  position: absolute; z-index: 2; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: hsl(0 0% 0% / .5); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.plyr.ng-vp .ng-vp__big .ng-ico { width: 30px; height: 30px; margin-left: 3px; fill: currentColor; stroke: none; }
.plyr.ng-vp .ng-vp__big:hover { background: hsl(0 0% 0% / .64); }
.plyr.ng-vp .ng-vp__big:active { transform: scale(.94); }
.plyr.ng-vp.plyr--playing .ng-vp__big, .plyr.ng-vp.plyr--loading.plyr--playing .ng-vp__big { opacity: 0; pointer-events: none; }
html[dir="rtl"] .plyr.ng-vp .ng-vp__big .ng-ico { margin: 0 3px 0 0; transform: none; }

/* the sound button, always there (Plyr's own mute takes over while its bar shows) */
.plyr.ng-vp .ng-vp__snd {
  position: absolute; z-index: 2; right: 10px; bottom: 12px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: hsl(0 0% 0% / .5); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: opacity .2s ease, background-color .15s ease;
}
html[dir="rtl"] .plyr.ng-vp .ng-vp__snd { right: auto; left: 10px; }
.plyr.ng-vp .ng-vp__snd:hover { background: hsl(0 0% 0% / .64); }
.plyr.ng-vp .ng-vp__snd .ng-ico { width: 20px; height: 20px; }
.plyr.ng-vp .ng-vp__snd .ng-vp__off, .plyr.ng-vp.is-muted .ng-vp__snd .ng-vp__on { display: none; }
.plyr.ng-vp.is-muted .ng-vp__snd .ng-vp__off { display: contents; }
.plyr.ng-vp .ng-vp__big:focus-visible, .plyr.ng-vp .ng-vp__snd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* while Plyr's bar shows: its scrubber replaces the line; the sound button stays (always there, as asked), so Plyr's
   own mute / volume leaves the bar and the bar ends before the button */
.plyr.ng-vp.ng-vp--ui:not(.plyr--fullscreen-active) .ng-vp__line,
.plyr.ng-vp:not(.plyr--fullscreen-active):has(.plyr__controls :focus-visible) .ng-vp__line,
.plyr.ng-vp:not(.plyr--fullscreen-active):has(.plyr__menu__container:not([hidden])) .ng-vp__line { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .plyr.ng-vp:not(.plyr--fullscreen-active):hover .ng-vp__line { opacity: 0; }
}
.plyr.ng-vp:not(.plyr--fullscreen-active) .plyr__controls { padding-right: 54px; }
html[dir="rtl"] .plyr.ng-vp:not(.plyr--fullscreen-active) .plyr__controls { padding-right: 10px; padding-left: 54px; }
.plyr.ng-vp:not(.plyr--fullscreen-active) .plyr__controls :is(.plyr__volume, [data-plyr="mute"]) { display: none; }
/* in fullscreen: Plyr's own bar only */
.plyr.ng-vp.plyr--fullscreen-active :is(.ng-vp__line, .ng-vp__snd) { display: none; }

@media (prefers-reduced-motion: reduce) {
  .plyr.ng-vp .plyr__controls, .plyr.ng-vp .ng-vp__line, .plyr.ng-vp .ng-vp__big, .plyr.ng-vp .ng-vp__snd { transition: none; }
}