/*
 * Film player look (Cinema pop-up on the homepage + the film pages).
 * The player is Mux Player (Media Chrome); its code can't be edited, so it is styled
 * from outside with its CSS variables and exported ::part()s.
 */

mux-player.film-watch__player,
mux-player.cinema-dialog__mux-player {
  /* The site's CSS sets --controls: auto, which Media Chrome turns into an invalid
     `display` on every control: the bar loses its flex row and the per-control
     hide switches below stop working. `initial` clears it. */
  --controls: initial;

  /* Cream on dark, matching the site — replaces Mux's default pink. */
  --media-accent-color: #fdfdfb;
  --media-primary-color: #fdfdfb;

  --media-font-family: var(--sans);
  --media-font-weight: 500;
  --media-font-size: 13px;
  --media-button-icon-width: 22px;
  --media-button-icon-height: 22px;

  /* Fewer controls: play, time, volume, fullscreen (AirPlay/Cast still appear where available). */
  --seek-backward-button: none;
  --seek-forward-button: none;
  --playback-rate-button: none;
  --playback-rate-menu-button: none;
  --pip-button: none;
  --rendition-menu-button: none;

  /* Tooltips duplicate what the icons already say. */
  --media-tooltip-display: none;
}

/* Bottom bar: no grey boxes (the site's secondary colour is applied inside the player,
   so it is overridden on the bar and on each control directly), more room at the edges. */
mux-player.film-watch__player::part(control-bar bottom),
mux-player.cinema-dialog__mux-player::part(control-bar bottom) {
  --media-control-background: transparent;
  align-items: center;
  padding: 8px 14px 10px;
  gap: 2px;
}
mux-player.film-watch__player::part(bottom),
mux-player.cinema-dialog__mux-player::part(bottom) {
  --media-control-background: transparent;
  --media-control-hover-background: rgb(253 253 251 / 0.1);
}

/* Buttons: round, quiet hover, a small press. */
mux-player.film-watch__player::part(button),
mux-player.cinema-dialog__mux-player::part(button) {
  border-radius: 999px;
  transition: background-color 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
mux-player.film-watch__player::part(button):active,
mux-player.cinema-dialog__mux-player::part(button):active {
  transform: scale(0.94);
}

/* Progress line: thin and cream; thicker with a handle on hover. */
mux-player.film-watch__player::part(time range),
mux-player.cinema-dialog__mux-player::part(time range) {
  --media-range-track-height: 2px;
  --media-range-track-border-radius: 999px;
  --media-range-track-background: rgb(253 253 251 / 0.22);
  --media-time-range-buffered-color: rgb(253 253 251 / 0.4);
  --media-range-bar-color: #fdfdfb;
  --media-range-thumb-width: 12px;
  --media-range-thumb-height: 12px;
  --media-range-thumb-border-radius: 50%;
  --media-range-thumb-background: #fdfdfb;
  --media-range-thumb-box-shadow: 0 0 0 4px rgb(23 23 22 / 0.25);
  --media-range-thumb-opacity: 0;
  --media-range-thumb-transition: opacity 150ms ease, transform 150ms ease;
  --media-range-track-transition: height 150ms ease;
  --media-preview-time-background: rgb(23 23 22 / 0.75);
  --media-preview-time-border-radius: 999px;
  --media-preview-time-padding: 3px 8px;
}
@media (hover: hover) and (pointer: fine) {
  mux-player.film-watch__player::part(time range):hover,
  mux-player.cinema-dialog__mux-player::part(time range):hover {
    --media-range-track-height: 4px;
    --media-range-thumb-opacity: 1;
  }
}
/* No hover on touch screens: keep the handle visible so it can be grabbed. */
@media (hover: none) {
  mux-player.film-watch__player::part(time range),
  mux-player.cinema-dialog__mux-player::part(time range) {
    --media-range-thumb-opacity: 1;
  }
}

/* Volume: same language as the progress line. */
mux-player.film-watch__player::part(volume range),
mux-player.cinema-dialog__mux-player::part(volume range) {
  --media-range-track-height: 2px;
  --media-range-track-border-radius: 999px;
  --media-range-track-background: rgb(253 253 251 / 0.25);
  --media-range-bar-color: #fdfdfb;
  --media-range-thumb-width: 10px;
  --media-range-thumb-height: 10px;
  --media-range-thumb-border-radius: 50%;
  --media-range-thumb-background: #fdfdfb;
}

/* Time: steady-width digits so it doesn't jitter while playing. */
mux-player.film-watch__player::part(time display),
mux-player.cinema-dialog__mux-player::part(time display) {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  mux-player.film-watch__player::part(button),
  mux-player.cinema-dialog__mux-player::part(button) {
    transition: background-color 150ms ease;
  }
  mux-player.film-watch__player::part(button):active,
  mux-player.cinema-dialog__mux-player::part(button):active {
    transform: none;
  }
}