/*
 * Shared media controls
 *
 * Primitive -> semantic -> component tokens keep the same control language
 * across Home, Artists, and Agencies. Work's full player intentionally keeps
 * its white-on-dark treatment while sharing the same icon geometry.
 */
:root {
  /* Primitive tokens */
  --mp-media-white: #fff;
  --mp-media-black: #050505;
  --mp-media-red: #e50914;
  --mp-media-control-size: 40px;
  --mp-media-icon-size: 18px;
  --mp-media-desktop-control-size: 40px;
  --mp-media-desktop-control-gap: 6px;
  --mp-media-mobile-control-size: 40px;
  --mp-media-mobile-control-gap: 6px;

  /* Semantic tokens */
  --mp-media-control-background: rgba(255, 255, 255, 0.96);
  --mp-media-control-foreground: var(--mp-media-black);
  --mp-media-control-border: rgba(5, 5, 5, 0.1);
  --mp-media-control-focus: rgba(255, 255, 255, 0.96);
  --mp-media-transparent-control-size: 43px;
  --mp-media-transparent-border: rgba(255, 255, 255, 0.58);
  --mp-media-transparent-border-active: rgba(255, 255, 255, 0.82);
  --mp-media-transparent-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);

  /* Component tokens: exact geometry used by the Work player */
  --mp-media-play-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Cpath%20fill='black'%20d='M14.75%2012.5Q14.75%2010.2%2016.75%2011.4L35.75%2022.7Q37.95%2024%2035.75%2025.3L16.75%2036.6Q14.75%2037.8%2014.75%2035.5Z'/%3E%3C/svg%3E");
  --mp-media-pause-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Crect%20x='15'%20y='12'%20width='7'%20height='24'%20rx='1.4'%20fill='black'/%3E%3Crect%20x='26'%20y='12'%20width='7'%20height='24'%20rx='1.4'%20fill='black'/%3E%3C/svg%3E");
}

.mp-media-control.mp-media-control.mp-media-control {
  display: grid;
  width: var(--mp-media-control-size);
  min-width: var(--mp-media-control-size);
  height: var(--mp-media-control-size);
  min-height: var(--mp-media-control-size);
  padding: 0;
  border: 1px solid var(--mp-media-control-border);
  border-radius: 999px;
  place-items: center;
  background: var(--mp-media-control-background);
  color: var(--mp-media-control-foreground);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.72, 0.18, 1);
}

.mp-media-control.mp-media-control.mp-media-control:hover,
.mp-media-control.mp-media-control.mp-media-control:focus-visible {
  border-color: rgba(5, 5, 5, 0.18);
  background: var(--mp-media-white);
  color: var(--mp-media-black);
  transform: scale(1.045);
}

.mp-media-control.mp-media-control.mp-media-control:focus-visible {
  outline: 2px solid var(--mp-media-control-focus);
  outline-offset: 3px;
}

.mp-media-control.mp-media-control.mp-media-control:disabled {
  cursor: default;
}

.mp-media-control.mp-media-control.mp-media-control > svg {
  display: none;
}

.mp-media-control.mp-media-control.mp-media-control::before {
  content: none;
}

.mp-media-control.mp-media-control.mp-media-control::after {
  content: "";
  display: block;
  width: var(--mp-media-icon-size);
  height: var(--mp-media-icon-size);
  background: currentColor;
}

.mp-media-control--play::after {
  -webkit-mask: var(--mp-media-pause-mask) center / contain no-repeat;
  mask: var(--mp-media-pause-mask) center / contain no-repeat;
}

.mp-media-control--play.is-paused::after {
  -webkit-mask: var(--mp-media-play-mask) center / contain no-repeat;
  mask: var(--mp-media-play-mask) center / contain no-repeat;
}

.mp-media-control--sound {
  order: -1;
}

.mp-media-control.mp-media-control.mp-media-control.mp-media-control--sound::after {
  content: none;
  display: none;
}

.mp-media-control.mp-media-control--sound
  > svg.mp-media-control__sound-asset {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.mp-media-control--sound
  [data-sound-asset-state] {
  display: none;
}

.mp-media-control--sound:not(.is-unmuted):not([aria-pressed="true"])
  [data-sound-asset-state="muted"] {
  display: block;
}

.mp-media-control--sound.is-unmuted
  [data-sound-asset-state="unmuted"],
.mp-media-control--sound[aria-pressed="true"]
  [data-sound-asset-state="unmuted"] {
  display: block;
}

.mp-media-control.mp-media-control.mp-media-control.mp-media-control--transparent {
  --mp-media-control-size: var(--mp-media-transparent-control-size);
  --mp-media-icon-size: calc(var(--mp-media-control-size) * 0.52);
  border: 1px solid var(--mp-media-transparent-border);
  background: transparent;
  color: var(--mp-media-white);
  box-shadow: var(--mp-media-transparent-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.mp-media-control.mp-media-control.mp-media-control.mp-media-control--transparent:hover,
.mp-media-control.mp-media-control.mp-media-control.mp-media-control--transparent:focus-visible {
  border-color: var(--mp-media-transparent-border-active);
  background: transparent;
  color: var(--mp-media-white);
  transform: none;
}

.mp-media-control.mp-media-control.mp-media-control.mp-media-control--sound.mp-media-control--transparent,
.mp-media-control.mp-media-control.mp-media-control.mp-media-control--sound.mp-media-control--transparent:hover,
.mp-media-control.mp-media-control.mp-media-control.mp-media-control--sound.mp-media-control--transparent:focus-visible {
  border: 0;
}

@media (max-width: 720px) {
  .mp-media-control.mp-media-control.mp-media-control.mp-media-control--transparent {
    --mp-media-control-size: var(--mp-media-mobile-control-size);
    --mp-media-icon-size: calc(var(--mp-media-control-size) * 0.52);
  }
}

.mp-media-rail.mp-media-rail.mp-media-rail {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 999px;
  place-items: center;
  background: #fff;
  color: #050505;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.72, 0.18, 1);
}

.mp-media-rail.mp-media-rail.mp-media-rail:hover,
.mp-media-rail.mp-media-rail.mp-media-rail:focus-visible {
  border-color: rgba(5, 5, 5, 0.2);
  background: #fff;
  color: #050505;
  opacity: 1;
  transform: scale(1.04);
}

.mp-media-rail.mp-media-rail.mp-media-rail:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.94);
  outline-offset: 3px;
}

.mp-media-rail.mp-media-rail.mp-media-rail:disabled {
  opacity: 0.38;
  cursor: default;
  transform: none;
}

.mp-media-rail.mp-media-rail.mp-media-rail img,
.mp-media-rail.mp-media-rail.mp-media-rail svg {
  width: 18px;
  height: 18px;
  filter: none;
}

@media (pointer: coarse) {
  :root {
    --mp-media-control-size: 44px;
    --mp-media-icon-size: 18px;
  }
}

/* Keep every shared desktop speaker and play/pause control equally compact. */
@media (min-width: 721px) {
  html
    body
    .mp-media-control.mp-media-control.mp-media-control.mp-media-control {
    --mp-media-control-size: var(--mp-media-desktop-control-size) !important;
    --mp-media-transparent-control-size: var(--mp-media-desktop-control-size) !important;
    --mp-media-icon-size: calc(var(--mp-media-desktop-control-size) * 0.52) !important;
    width: var(--mp-media-desktop-control-size) !important;
    min-width: var(--mp-media-desktop-control-size) !important;
    height: var(--mp-media-desktop-control-size) !important;
    min-height: var(--mp-media-desktop-control-size) !important;
    flex-basis: var(--mp-media-desktop-control-size) !important;
  }

  html body .site-shell .hero-slider__playback.hero-slider__playback,
  html body .site-shell .work-feature__controls.work-feature__controls,
  html body .site-shell .artists-cinema__controls.artists-cinema__controls {
    gap: var(--mp-media-desktop-control-gap) !important;
  }

  html
    body
    .site-shell--agencies
    .agency-cinema__sound.mp-media-control {
    right: calc(
      clamp(20px, 2.5vw, 40px) +
      var(--mp-media-desktop-control-size) +
      var(--mp-media-desktop-control-gap)
    ) !important;
  }

  html
    body
    .site-shell--agencies
    .agency-cinema--pair
    .agency-cinema__sound.mp-media-control {
    right: calc(
      14px +
      var(--mp-media-desktop-control-size) +
      var(--mp-media-desktop-control-gap)
    ) !important;
  }

  html
    body
    .site-shell--agencies:not(.site-shell--service-detail)
    .agency-campaign-wall__sound.mp-media-control {
    right: calc(
      22px +
      var(--mp-media-desktop-control-size) +
      var(--mp-media-desktop-control-gap)
    ) !important;
  }
}

/* One mobile geometry for every shared speaker and play/pause control. */
@media (max-width: 720px) {
  html
    body
    .mp-media-control.mp-media-control.mp-media-control.mp-media-control {
    --mp-media-control-size: var(--mp-media-mobile-control-size) !important;
    --mp-media-transparent-control-size: var(--mp-media-mobile-control-size) !important;
    --mp-media-icon-size: calc(var(--mp-media-mobile-control-size) * 0.52) !important;
    width: var(--mp-media-mobile-control-size) !important;
    min-width: var(--mp-media-mobile-control-size) !important;
    height: var(--mp-media-mobile-control-size) !important;
    min-height: var(--mp-media-mobile-control-size) !important;
    flex-basis: var(--mp-media-mobile-control-size) !important;
  }

  html
    body
    .mp-media-control.mp-media-control.mp-media-control.mp-media-control--sound
    > svg.mp-media-control__sound-asset {
    width: 100% !important;
    height: 100% !important;
  }

  html
    body
    .site-shell
    .hero-slider__playback.hero-slider__playback,
  html
    body
    .site-shell
    .work-feature__controls.work-feature__controls,
  html
    body
    .site-shell
    .artists-cinema__mobile-actions.artists-cinema__mobile-actions,
  html
    body
    .site-shell
    .agency-cinema__mobile-actions.agency-cinema__mobile-actions {
    gap: var(--mp-media-mobile-control-gap) !important;
  }

  html
    body
    .site-shell--agencies
    .agency-campaign-wall__play.mp-media-control {
    right: 20px !important;
  }

  html
    body
    .site-shell--agencies
    .agency-campaign-wall__sound.mp-media-control {
    right: calc(
      20px + var(--mp-media-mobile-control-size) + var(--mp-media-mobile-control-gap)
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-media-control.mp-media-control,
  .mp-media-rail.mp-media-rail {
    transition: none;
  }
}