/* Shared viewport background. Apply has-site-background to the page body. */
.has-site-background {
  isolation: isolate;
  background: #000;
  color: #fff;
}

.site-background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  background: #000;
}

.site-background__scene {
  position: absolute;
  inset: 0;
  background: url("../assets/bg-DfHGm9qg.jpg") no-repeat center / cover;
}

.site-background video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.site-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--background-tint, rgb(0 0 0 / 25%));
}

.site-background--frosted {
  --background-blur: 32px;
  --background-tint: rgb(18 23 29 / 66%);
}

.site-background--frosted .site-background__scene {
  /* Three blur radii of overscan keep translucent filter edges off screen. */
  inset: calc(var(--background-blur) * -3);
  filter: blur(var(--background-blur)) saturate(.65);
}

/* A viewport-sized sibling: video cropping and blur cannot resize this layer. */
.site-vignette {
  --corner-size: clamp(320px, 70vw, 960px);
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 0 120px rgb(0 0 0 / 75%);
  background-image:
    radial-gradient(circle at left top, rgb(0 0 0 / 20.25%), transparent 68%),
    radial-gradient(circle at right top, rgb(0 0 0 / 20.25%), transparent 68%),
    radial-gradient(circle at left bottom, rgb(0 0 0 / 20.25%), transparent 68%),
    radial-gradient(circle at right bottom, rgb(0 0 0 / 20.25%), transparent 68%);
  background-size: var(--corner-size) var(--corner-size);
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
}

.site-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, #0003 0 1px, #0000 3px 4px);
  opacity: .25;
  z-index: 5;
}

@media (max-width: 667px) {
  .site-vignette {
    background: none;
    box-shadow: inset 0 0 120px rgb(0 0 0 / 50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-background video {
    display: none;
  }
}