/* Converted from src/components/site/ui/BackgroundVideo.module.css (CSS Module): local classes are prefixed "ui-background-video__". */
/* Absolutely positioned: the parent must be position: relative (and usually overflow: hidden). */
.ui-background-video__wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* the poster (inline background-image), framed like the video: seen until the video has a frame on
     screen, and instead of it with prefers-reduced-motion */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ui-background-video__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--duration) var(--ease);
}

/* With JS, transparent until site--background-video sets data-ready (first frame on screen): Chromium can
   paint black between the poster and the first decoded frame. */
html[data-js] .ui-background-video__video:not([data-ready]) {
  opacity: 0;
}

/* Without scripting, browsers expose the native controls even without the `controls`
   attribute (HTML spec): hide them (Chromium / WebKit), the poster stays. Also hides the iOS
   start-playback button when autoplay is refused (Low Power Mode). */
.ui-background-video__video::-webkit-media-controls,
.ui-background-video__video::-webkit-media-controls-enclosure,
.ui-background-video__video::-webkit-media-controls-panel,
.ui-background-video__video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

.ui-background-video__overlay {
  position: absolute;
  inset: 0;
}