/* Shared native hosted-video preview. Playback stays full-size and in colour. */
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover {
  --ipp-player-preview-scale: .85;
  --ipp-player-preview-duration: 480ms;
  background: var(--ipp-uncode-dark, #080808) !important;
  overflow: hidden;
}

body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-mediaelement,
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-poster {
  background-color: var(--ipp-uncode-dark, #080808) !important;
  transform: none !important;
  transform-origin: 50% 50%;
  filter: none !important;
  transition: transform var(--ipp-player-preview-duration) cubic-bezier(.22, 1, .36, 1);
  will-change: auto;
}

/* Keep the green backing throughout hover-out while the picture expands. */
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover.ipp-player-idle {
  background: var(--ipp-uncode-accent, #69f619) !important;
}

/* Override the old image zoom without scaling native controls or hit targets. */
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-mediaelement video.wp-video-shortcode {
  transform: none !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* The green belongs behind the picture; remove the old exclusion overlay. */
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-overlay::before {
  content: none !important;
}

@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover.ipp-player-idle:not(.mejs-container-fullscreen):not(:fullscreen):hover .mejs-mediaelement,
  body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover.ipp-player-idle:not(.mejs-container-fullscreen):not(:fullscreen):hover .mejs-poster {
    transform: scale(var(--ipp-player-preview-scale)) !important;
  }
}

/* Give keyboard users the same preview without a sticky touch hover. */
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover.ipp-player-idle:not(.mejs-container-fullscreen):not(:fullscreen):has(:focus-visible) .mejs-mediaelement,
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover.ipp-player-idle:not(.mejs-container-fullscreen):not(:fullscreen):has(:focus-visible) .mejs-poster {
  transform: scale(var(--ipp-player-preview-scale)) !important;
}

/* Fullscreen and playback retain the film's original framing and colours. */
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover:not(.ipp-player-idle) .mejs-mediaelement,
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover:not(.ipp-player-idle) .mejs-poster {
  transition: none !important;
}

body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover:is(.mejs-container-fullscreen, :fullscreen) .mejs-mediaelement,
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover:is(.mejs-container-fullscreen, :fullscreen) .mejs-poster {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

@media (max-width: 959px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover {
    --ipp-player-preview-scale: 1;
    --ipp-player-preview-duration: 0ms;
  }
}

/* Scope PLAY to the native overlay so legacy Home button sizing and fill cannot win. */
body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-overlay.mejs-overlay-play > .mejs-overlay-button {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 1;
  /* Only this absolutely positioned overlay is contained, never the video. */
  container-type: size;
}

body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-overlay.mejs-overlay-play > .mejs-overlay-button::before {
  content: "PLAY" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: max-content !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #fff !important;
  font-family: var(--ipp-uncode-font-display, "fifties-vf", sans-serif) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-variation-settings: "wght" 700, "wdth" 125, "ital" 0 !important;
  font-synthesis: none;
  font-optical-sizing: none;
  font-kerning: none;
  font-size: clamp(36px, 8vw, 88px) !important;
  letter-spacing: .01em !important;
  line-height: .7 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  /* Centre the actual capitals using Fifties' cap height and side bearings. */
  transform: translate(calc(-50% - .0025em), calc(-50% - .02em)) !important;
  pointer-events: none !important;
  transition: font-size 480ms cubic-bezier(.22, 1, .36, 1), color 180ms ease !important;
}

body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-overlay.mejs-overlay-play > .mejs-overlay-button::after {
  content: none !important;
  display: none !important;
}

body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-overlay.mejs-overlay-play > .mejs-overlay-button:focus-visible {
  outline: 2px solid var(--ipp-uncode-accent, #69f619);
  outline-offset: -8px;
}

@supports (font-size: 1cqw) {
  body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-overlay.mejs-overlay-play > .mejs-overlay-button::before {
    --ipp-player-play-size: min(88px, 18cqw, 24cqh);
    font-size: var(--ipp-player-play-size) !important;
  }
}

@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover:not(.mejs-container-fullscreen):not(:fullscreen):hover .mejs-overlay.mejs-overlay-play > .mejs-overlay-button::before {
    color: var(--ipp-uncode-accent, #69f619) !important;
  }

  @supports (font-size: 1cqw) {
    body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover:not(.mejs-container-fullscreen):not(:fullscreen):hover .mejs-overlay.mejs-overlay-play > .mejs-overlay-button::before {
      /* About 94% of the player's width, capped by its height for wide films. */
      --ipp-player-play-size: min(41cqw, 128cqh);
    }
  }
}

body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover:not(.mejs-container-fullscreen):not(:fullscreen) .mejs-overlay.mejs-overlay-play > .mejs-overlay-button:focus-visible::before {
  --ipp-player-play-size: min(41cqw, 128cqh);
  color: var(--ipp-uncode-accent, #69f619) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.ipp-native-site .mejs-container.mejs-video.ipp-player-rollover .mejs-overlay.mejs-overlay-play > .mejs-overlay-button::before {
    --ipp-player-play-size: min(88px, 18cqw, 24cqh) !important;
    transition: none !important;
  }
}