.immersive-background {
  --background-pad-x: 24px;
  --background-pad-y: 18px;
  --background-position: 60% 50%;
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #160d10;
  pointer-events: none;
  user-select: none;
}
.immersive-background__media {
  position: absolute;
  inset: calc(-1 * var(--background-pad-y)) calc(-1 * var(--background-pad-x));
  transform: translate3d(0, 0, 0);
}
.immersive-background[data-motion="on"] .immersive-background__media { will-change: transform; }
.immersive-background__poster,
.immersive-background__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--background-position);
}
/* The actual cover remains under the video, including when decoding or autoplay fails. */
.immersive-background__video { opacity: 0; transition: opacity .7s ease; }
.immersive-background[data-state="playing"] .immersive-background__video { opacity: 1; }
.immersive-background[data-state="error"] .immersive-background__video,
.immersive-background[data-state="blocked"] .immersive-background__video,
.immersive-background[data-state="static"] .immersive-background__video { transition: none; }
.immersive-background__particles { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (orientation: portrait) {
  .immersive-background { --background-position: 61% 40%; }
}
@media (min-aspect-ratio: 21/10) {
  .immersive-background { --background-position: 60% 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .immersive-background__video { transition: none; }
}