/* Keep the controls in a dedicated overlay bounded by the video itself. */
.hero-scene.video-player {
  position: relative;
  inset: auto;
  z-index: auto;
  isolation: isolate;
}

.video-player .video-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.video-controls .circle-button {
  pointer-events: auto;
  background: transparent;
  border-color: transparent;
  color: #ffffff80;
  transition: color 1s, border-color 1s;
}

.video-controls .circle-button:hover,
.video-controls .circle-button:focus-visible {
  color: #fff;
}

.video-controls.controls-bright .circle-button {
  color: #fff;
}

.video-controls.controls-bright .video-pause {
  border-color: #fffffff0;
}

@media (prefers-reduced-motion: reduce) {
  .video-controls .circle-button { transition: none; }
}

.video-controls .sound-slash {
  box-shadow: none;
}

.video-controls .video-pause {
  position: relative;
  width: 56px;
  height: 56px;
  border: 1px solid #ffffff60;
  border-radius: 50%;
}

.video-controls .video-pause:hover,
.video-controls .video-pause:focus-visible {
  border-color: #ffffffcc;
}

.video-controls .video-pause .icon {
  width: 24px;
  height: 24px;
}

.video-controls .video-sound {
  position: absolute;
  top: 50%;
  left: calc(50% + 40px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
}

.video-controls .video-sound .icon {
  width: 18px;
  height: 18px;
}