/* Grey behind the whole hero block (incl. the arrows strip under the video).
   Class is set by hero-video.js on blocks that contain a video slide. */
.b-hero-home.has-video-slide {
  background: #EAEAEA;
}

/* Video slide in the homepage hero slider. */
/* The whole slide is clickable, so show the pointer over it. */
/* No fixed ratio: the video is in flow, so the slide is exactly as tall as
   the video. Nothing letterboxed, nothing cropped. `!important` beats the
   theme's `.b-hero-home .image { aspect-ratio: ... !important }` rules. */
.b-hero-home .hero-video {
  position: relative;
  aspect-ratio: auto !important;
  height: auto;
  overflow: hidden;
  background: #EAEAEA;
  cursor: pointer;
}

.b-hero-home .hero-video__el,
.b-hero-home .hero-video__mobile-poster {
  display: block;
  width: 100%;
  height: auto;
}

/* Placeholder ratio until `loadedmetadata` reports the real one, so the slide
   has its height from the first paint. */
.b-hero-home .hero-video__el {
  aspect-ratio: 16 / 9;
}

.b-hero-home .hero-video__mobile-poster {
  display: none;
}

/* Controls sit in a row; the buttons themselves are in flow inside it. */
.b-hero-home .hero-video__controls {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Toggle buttons. */
.b-hero-home .hero-video__toggle,
.b-hero-home .hero-video__mute {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  color: #fff;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: background .2s ease;
}

.b-hero-home .hero-video__toggle:hover,
.b-hero-home .hero-video__mute:hover,
.b-hero-home .hero-video__toggle:focus-visible,
.b-hero-home .hero-video__mute:focus-visible {
  background: rgba(0, 0, 0, .75);
}

.b-hero-home .hero-video__toggle:focus-visible,
.b-hero-home .hero-video__mute:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Icons are centred with transforms, so they stay centred whatever size
   the button is. */

/* Pause icon: two bars. */
.b-hero-home .hero-video__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 20px;
  background: #fff;
  transform: translate(-8px, -50%);
}

.b-hero-home .hero-video__icon::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

/* Play icon: triangle, nudged right of centre so it looks centred. */
.b-hero-home .hero-video__toggle.is-paused .hero-video__icon {
  width: 0;
  height: 0;
  background: none;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #fff;
  transform: translate(-40%, -50%);
}

.b-hero-home .hero-video__toggle.is-paused .hero-video__icon::after {
  display: none;
}

/* Buffering: a ring around the button showing how much has downloaded.
   `--buffered` is set by hero-video.js; the mask cuts the disc into a ring. */
.b-hero-home .hero-video__toggle::before {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
  border-radius: 50%;
  background: conic-gradient(#fff calc(var(--buffered, 0) * 1%), rgba(255, 255, 255, .25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.b-hero-home .hero-video__toggle.is-loading::before {
  opacity: 1;
}

/* Nothing buffered yet, or stalled: spin the ring so it does not look dead. */
.b-hero-home .hero-video__toggle.is-loading.is-stalled::before {
  background: conic-gradient(transparent 0 65%, #fff 0);
  animation: hero-video-spin .8s linear infinite;
}

@keyframes hero-video-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .b-hero-home .hero-video__toggle.is-loading.is-stalled::before {
    animation-duration: 2.4s;
  }
}

/* Mute button: speaker with waves; muted swaps the waves for a cross. */
.b-hero-home .hero-video__speaker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.b-hero-home .hero-video__cross {
  display: none;
}

.b-hero-home .hero-video__mute.is-muted .hero-video__waves {
  display: none;
}

.b-hero-home .hero-video__mute.is-muted .hero-video__cross {
  display: block;
}

/* Mobile: poster image covers the video until the user taps play. */
/* 760px matches the theme's hero mobile breakpoint (b-hero-home.scss). */
@media (max-width: 760px) {
  /* The theme's <=494px band forces `aspect-ratio: 9/16 !important` on
     `.image`. Match on both classes so this wins on specificity, not order,
     and the slide stays exactly as tall as the media. */
  .b-hero-home .hero-video.image {
    aspect-ratio: auto !important;
    height: auto !important;
  }

  /* With a mobile poster the image is what sets the slide height. */
  .b-hero-home .hero-video.has-mobile-image .hero-video__mobile-poster {
    display: block;
    height: auto;
    /* Positioned, so it paints above the absolute video underneath it. */
    position: relative;
    z-index: 2;
  }

  .b-hero-home .hero-video.has-mobile-image .hero-video__el {
    position: absolute;
    top: 0;
    left: 0;
  }

  .b-hero-home .hero-video.has-mobile-image.is-playing .hero-video__mobile-poster {
    display: none;
  }

  /* Once playing, the video itself carries the height. */
  .b-hero-home .hero-video.has-mobile-image.is-playing .hero-video__el {
    position: relative;
  }

  .b-hero-home .hero-video__controls {
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }

  .b-hero-home .hero-video__toggle,
  .b-hero-home .hero-video__mute {
    width: 64px;
    height: 64px;
  }
}