/* Sits as the first layer of a hero section, under its overlays and content. */
.pi-hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pi-hero-video__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.pi-hero-video.is-playing .pi-hero-video__media,
.pi-hero-video__media[poster] {
  opacity: 1;
}

.pi-hero-video__toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  padding: 7px 12px;
  border: 1px solid oklch(0.99 0.004 140 / 0.5);
  border-radius: 2px;
  background: oklch(0.20 0.022 152 / 0.6);
  color: oklch(0.99 0.004 140);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
}

.pi-hero-video__toggle:hover,
.pi-hero-video__toggle:focus-visible {
  background: oklch(0.42 0.09 152);
  border-color: oklch(0.42 0.09 152);
}

.pi-hero-video__toggle[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pi-hero-video__media {
    transition: none;
  }
}