/* ============================================================
   lh-video — reusable branded video player (LovelyHair).
   Autoplay-in-view, muted-by-default, no native controls, custom
   overlay (centre play/pause, mute toggle, circular progress).
   No loading spinner by design: sources are warmed in the background
   (see lh-video.js) so a player is buffered before it gets focus.
   Tokens only. Behaviour in assets/lh-video.js.
   ============================================================ */
/* Fills its container by absolute inset so its height never depends on
   percentage-height resolving through an aspect-ratio parent (which is
   unreliable). Every host (.lh-pdp__slide, .lh-pdp-lightbox__slide,
   .lh-sia__media) is a positioned box with a definite height, so inset:0
   fills it edge-to-edge. */
.lh-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface-inverse);
  isolation: isolate;
}
.lh-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--surface-inverse);
}
/* Edge-to-edge fill for purpose-built portrait cards (See It in Action). */
.lh-video--cover .lh-video__el { object-fit: cover; }

/* ---- Centre play/pause tap target ---- */
.lh-video__toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.lh-video__toggle-dot {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-white-rgb), 0.92);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateZ(0) scale(1);
  transition: transform var(--duration-fast) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}
.lh-video__toggle:hover .lh-video__toggle-dot { transform: scale(1.06); }
.lh-video__i { display: none; }
.lh-video__i--play { display: block; margin-left: 3px; } /* optical centring of the triangle */

/* Paused (or not yet started): dim veil + play glyph. */
.lh-video:not(.is-playing) .lh-video__toggle { background: rgba(var(--lh-stone-900-rgb), 0.16); }

/* Playing: hide the veil + dot, show pause on hover/focus only. */
.lh-video.is-playing .lh-video__toggle-dot { opacity: 0; }
.lh-video.is-playing .lh-video__i--play { display: none; }
.lh-video.is-playing .lh-video__i--pause { display: block; }
@media (hover: hover) and (pointer: fine) {
  .lh-video.is-playing:hover .lh-video__toggle-dot { opacity: 1; }
}
/* Keyboard focus only, and deliberately OUTSIDE the pointer query — a keyboard
   user on a touch-first or hybrid device still needs the affordance.
   :focus-within is not usable here: it also matches the focus a mouse click
   leaves on the toggle, which pinned the pause dot over the video until the
   user clicked elsewhere. Its own rule, so browsers without :has() drop this
   one alone rather than the :hover rule above. */
.lh-video.is-playing:has(.lh-video__toggle:focus-visible) .lh-video__toggle-dot { opacity: 1; }

/* ---- Circular playback progress — top-right corner ---- */
.lh-video__progress {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 4;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-stone-900-rgb), 0.4);
  pointer-events: none; /* indicator only */
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
/* Visible once playback has started (or on hover / keyboard focus). */
.lh-video.is-playing .lh-video__progress,
.lh-video:hover .lh-video__progress { opacity: 1; }
.lh-video:has(:focus-visible) .lh-video__progress { opacity: 1; }
.lh-video__ring { display: block; transform: rotate(-90deg); } /* start the fill at 12 o'clock */
.lh-video__ring-track {
  stroke: rgba(var(--lh-white-rgb), 0.35);
  stroke-width: 3;
}
.lh-video__ring-fill {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;   /* pathLength=100 → dashoffset is the played remainder */
  stroke-dashoffset: 100;  /* empty until timeupdate */
}

/* ---- Mute toggle — bottom-left ---- */
.lh-video__mute {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: rgba(var(--lh-stone-900-rgb), 0.45);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: background var(--duration-fast) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}
.lh-video.is-playing .lh-video__mute,
.lh-video:hover .lh-video__mute { opacity: 1; }
.lh-video:has(:focus-visible) .lh-video__mute { opacity: 1; }
.lh-video__mute:hover { background: rgba(var(--lh-stone-900-rgb), 0.7); }
/* Muted is the default state, so the muted icon shows unless .is-muted is absent. */
.lh-video__i--muted { display: block; }
.lh-video:not(.is-muted) .lh-video__i--muted { display: none; }
.lh-video:not(.is-muted) .lh-video__i--unmuted { display: block; }

/* ---- Reduced motion: no autoplay, keep the play affordance ---- */
@media (prefers-reduced-motion: reduce) {
  .lh-video__toggle-dot { transition: none; }
}