/*
 * VSL player skin.
 * Themed entirely through custom properties so the whole player can be
 * recoloured from one place (the reference funnel does the same thing via
 * --vid-colors-* variables set inline on the embed div).
 */

.vsl {
  /* Onso brand: violet primary on the deep base. */
  --vsl-primary: #7c3aed;
  --vsl-primary-transparent: rgba(124, 58, 237, 0.93);
  --vsl-secondary: #ffffff;
  --vsl-scrim: rgba(0, 0, 0, 0.55);
  --vsl-bar-height: 44px;
  --vsl-radius: 0px;

  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9, same technique as the reference embed */
  direction: ltr;
  background: #000;
  overflow: hidden;
  outline: none;
  border-radius: var(--vsl-radius);
}

/*
 * Fullscreen. The 16:9 box is built from padding-top, which would leave the
 * player as a short strip once it fills the screen, so the ratio is dropped and
 * the video letterboxes instead of cropping.
 */
.vsl:fullscreen,
.vsl:-webkit-full-screen,
.vsl.vsl--fullscreen {
  padding-top: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.vsl:fullscreen .Tech__video,
.vsl:-webkit-full-screen .Tech__video,
.vsl.vsl--fullscreen .Tech__video {
  object-fit: contain;
}

.Tech__wrapper {
  position: absolute;
  inset: 0;
}

.Tech__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}


/* ---------------------------------------------------- youtube backing */

.Tech__video--yt { position: absolute; inset: 0; }

/* pointer-events off so every click reaches our own overlays rather than
   YouTube's, which is what keeps the seek lock and unmute card in charge */
.Tech__video--yt iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

.Root__wrapper {
  position: absolute;
  inset: 0;
}

/* ---------------------------------------------------------------- poster */

.ThumbnailManager__wrapper {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.Thumbnail__wrapper,
.Thumbnail__image {
  position: absolute;
  inset: 0;
}

.Thumbnail__image {
  background-size: cover;
  background-position: center;
  background-color: #000;
}

/* ------------------------------------------------------- click-to-toggle */

.PlayToggleBoundary__wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  cursor: pointer;
  z-index: 2;
}

/*
 * Hidden overlays must stop swallowing clicks.
 *
 * `pointer-events: none` on a faded-out layer does NOT cover its children. Any
 * descendant that sets `pointer-events: auto` keeps its full hit area alive at
 * opacity 0, and three of them do: the unmute card, the big play button and
 * the settings menu. Each leaves an invisible pad over the middle of the frame
 * that eats every click meant for PlayToggleBoundary below it, so clicking the
 * picture to pause silently does nothing.
 *
 * Silencing the descendants alongside the parent is what lets a click on the
 * video itself reach the toggle at all.
 *
 * !important is load bearing here. `*` contributes nothing to specificity, so
 * `.Unmute__wrapper--hidden *` scores the same single class as `.Unmute__card`
 * and loses the tie on source order, since the card is defined further down.
 * Raising the score is the only way this wins, and a hidden layer refusing
 * clicks is an invariant rather than a preference, so it should not be
 * possible to lose it by adding a rule below.
 */
.Unmute__wrapper--hidden,
.Unmute__wrapper--hidden *,
.Resume__wrapper--hidden,
.Resume__wrapper--hidden *,
.BigControls__wrapper--hidden,
.BigControls__wrapper--hidden *,
.SettingsMenu__wrapper--hidden,
.SettingsMenu__wrapper--hidden *,
.VolumeSlider__panel--hidden,
.VolumeSlider__panel--hidden * {
  pointer-events: none !important;
}

/* ------------------------------------------------------ big centre button */

.BigControls__wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.BigControls__wrapper--hidden {
  opacity: 0;
  pointer-events: none;
}

.BigControls__button {
  position: relative;
  pointer-events: auto;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background: var(--vsl-primary-transparent);
  color: var(--vsl-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
}

/*
 * A halo that expands out of the button and fades, on a loop. It sits behind
 * the button and ignores pointer events, so it draws the eye toward play
 * without changing the hit area or costing a layout pass (transform + opacity
 * only, both compositor-driven).
 */
.BigControls__button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--vsl-primary);
  pointer-events: none;
  animation: vslPulseRing 2.1s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
}

@keyframes vslPulseRing {
  0%   { transform: scale(1);    opacity: 0.5; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

.BigControls__button:hover { transform: scale(1.06); }

.BigControls__button svg {
  width: 42px;
  height: 42px;
  fill: currentColor;
}

/* the halo is an attention cue, not information: drop it if motion is reduced */
@media (prefers-reduced-motion: reduce) {
  .BigControls__button::before { animation: none; opacity: 0; }
}

/* -------------------------------------------------------- unmute overlay */

/*
 * The unmute prompt is a large centred card, not a small pill. It is the only
 * sound control the player exposes, so it has to read as the primary action on
 * the frame rather than as a minor affordance.
 */
.Unmute__wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6% 6% calc(var(--vsl-bar-height) + 6%);
  z-index: 5;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.Unmute__wrapper--hidden {
  opacity: 0;
  pointer-events: none;
}

.Unmute__card {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 460px;
  min-height: 62%;
  padding: 26px 30px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  background: var(--vsl-primary-transparent);
  color: var(--vsl-secondary);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
  animation: vslPulse 2.6s ease-in-out infinite;
  transition: background 0.15s ease;
}

.Unmute__card:hover { background: var(--vsl-primary); }

.Unmute__icon {
  margin-bottom: 14px;
}

.Unmute__icon svg {
  width: 58px;
  height: 58px;
  fill: currentColor;
  display: block;
}

.Unmute__title {
  font-size: clamp(18px, 2.6vw, 27px);
  font-weight: 700;
  line-height: 1.25;
}

.Unmute__sub {
  font-size: clamp(18px, 2.6vw, 27px);
  font-weight: 700;
  line-height: 1.25;
}

@keyframes vslPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .Unmute__card { animation: none; }
}

/* -------------------------------------------------------- resume overlay */

.Resume__wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  background: var(--vsl-scrim);
  opacity: 1;
  transition: opacity 0.25s ease;
}

.Resume__wrapper--hidden {
  opacity: 0;
  pointer-events: none;
}

.Resume__card {
  text-align: center;
  color: #fff;
  padding: 0 24px;
  font-family: Inter, "Open Sans", Helvetica, Arial, sans-serif;
}

.Resume__title { font-size: 20px; font-weight: 700; }
.Resume__body  { font-size: 15px; opacity: 0.85; margin-top: 4px; }

.Resume__actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.Resume__button {
  border: 0;
  cursor: pointer;
  padding: 11px 20px;
  border-radius: 8px;
  font: 600 15px/1 Inter, sans-serif;
}

.Resume__button--primary { background: var(--vsl-primary); color: #fff; }

.Resume__button--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------- bottom-edge progress */

.ProgressLine__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.28);
  z-index: 3;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.ProgressLine__rail--hidden { opacity: 0; }

.ProgressLine__track {
  height: 100%;
  width: 0;
  background: var(--vsl-primary);
}

/* ------------------------------------------------------------ control bar */

.ControlBar__wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--vsl-bar-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  background: var(--vsl-primary);
  color: var(--vsl-secondary);
  z-index: 7;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.ControlBar__wrapper--hidden {
  opacity: 0;
  pointer-events: none;
}

.ControlBarBlockClassic__wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ControlBarBlockClassic__wrapper--full-width { flex: 1 1 auto; min-width: 0; }

.Control__wrapper { position: relative; }

.Control__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
}

.Control__button:hover { background: rgba(255, 255, 255, 0.16); }

/* Each icon sets its own fill/stroke so filled and stroked glyphs can mix in
   one bar. Colour still comes from the button via currentColor. */
.Control__button svg {
  width: 21px;
  height: 21px;
  display: block;
}

.Control__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  white-space: nowrap;
}

.Control__wrapper:hover .Control__tooltip { opacity: 1; }

.Control__tooltip-inner {
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font: 500 12px/1 Inter, sans-serif;
  padding: 6px 8px;
  border-radius: 4px;
}

/* the elapsed/duration readout was removed on purpose, see vsl-player.js */

/* ------------------------------------------------------ volume control */

.VolumeControl__wrapper { position: relative; }

/*
 * The panel sits flush against the button (bottom: 100%) and creates its visual
 * gap with padding instead. An offset gap left a dead strip between button and
 * panel: moving the cursor across it fired mouseleave on the wrapper and the
 * slider vanished before it could be grabbed.
 */
.VolumeSlider__panel {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 9px 20px;   /* the bottom padding IS the gap, and stays hoverable */
  border-radius: 10px 10px 0 0;
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* only the upper block is painted, so the hover bridge stays invisible */
.VolumeSlider__panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 12px;
  border-radius: 10px;
  background: var(--vsl-primary);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.VolumeSlider__panel--hidden { opacity: 0; pointer-events: none; }

/* vertical: full at the top, silent at the bottom */
.VolumeSlider__track {
  position: relative;
  z-index: 1;          /* above the painted panel block */
  width: 5px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  touch-action: none;
}

.VolumeSlider__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--vsl-secondary);
}

.VolumeSlider__knob {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vsl-secondary);
  transform: translate(-50%, 50%);
  pointer-events: none;
}

/* ---------------------------------------------------------------- seekbar */

.SeekBar__wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.SeekBar__focus-wrapper { width: 100%; }

.SeekBar__slider {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

/*
 * The reference player ships this exact modifier: the bar still renders and
 * still fills, but it takes no pointer input, so the viewer cannot skip ahead.
 */
.SeekBar__slider--disabled { cursor: default; pointer-events: none; }

.SeekBar__buffer,
.SeekBar__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
}

.SeekBar__buffer { background: rgba(255, 255, 255, 0.25); width: 0; }
.SeekBar__fill   { background: var(--vsl-secondary); width: 0; }

.SeekBar__knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vsl-secondary);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.SeekBar__slider:not(.SeekBar__slider--disabled):hover .SeekBar__knob { opacity: 1; }

/* --------------------------------------------------------- settings menu */

.SettingsControl__wrapper { position: relative; }
.SettingsControl__menuAnchor { position: relative; }

.SettingsMenu__wrapper {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 132px;
  background: rgba(20, 20, 20, 0.96);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 1;
  transition: opacity 0.15s ease;
}

.SettingsMenu__wrapper--hidden { opacity: 0; pointer-events: none; }

.SettingsMenu__title {
  font: 600 11px/1 Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  padding: 8px 10px 6px;
}

.SettingsMenu__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #fff;
  font: 500 13px/1 Inter, sans-serif;
  padding: 9px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.SettingsMenu__item:hover { background: rgba(255, 255, 255, 0.12); }

.SettingsMenu__item--active { color: var(--vsl-primary); font-weight: 700; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 640px) {
  .vsl { --vsl-bar-height: 40px; }
  .BigControls__button { width: 66px; height: 66px; }
  .BigControls__button svg { width: 32px; height: 32px; }
  .VolumeSlider__track { height: 64px; }

  /*
   * The 460px max-width gives the card its side gaps on desktop, but on a
   * phone the viewport is narrower than that, so the card ran nearly edge to
   * edge. The side padding here is what creates the breathing room instead.
   * min-height also drops: a percentage of a 16:9 box is very tall on mobile.
   */
  .Unmute__wrapper { padding: 7% 11% calc(var(--vsl-bar-height) + 7%); }
  .Unmute__card {
    min-height: 0;
    padding: 15px 14px;
    border-radius: 11px;
    border-width: 1.5px;
  }
  .Unmute__icon { margin-bottom: 7px; }
  .Unmute__icon svg { width: 30px; height: 30px; }
  .Unmute__title, .Unmute__sub { font-size: 15px; line-height: 1.3; }

  /* "Click" is wrong on a touch screen */
  .Unmute__sub { font-size: 0; }
  .Unmute__sub::after {
    content: "Tap To Turn On The Volume";
    font-size: 16px;
  }
}