.ambient-background {
  --ambient-tint-base: var(--page-bg, #fff);
  --ambient-haze-opacity: calc(1 - var(--theme-mix, 0) * .92);
  --ambient-frost-opacity: calc(1 - var(--theme-mix, 0) * .82);
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--page-bg, #fff);
  pointer-events: none;
}

.ambient-haze {
  position: absolute;
  inset: 0;
  opacity: var(--ambient-haze-opacity);
  background:
    radial-gradient(ellipse 65% 80% at 24% 51%,
      rgb(255 255 255 / .65) 0%, rgb(255 255 255 / 0) 72%),
    radial-gradient(ellipse 50% 110% at 75% 72%,
      rgb(255 255 255 / .45) 0%, rgb(255 255 255 / 0) 76%);
}

.ambient-haze::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 52% 32% at 50% 7%,
      rgb(255 255 255 / .62) 0%, rgb(255 255 255 / 0) 85%),
    radial-gradient(ellipse 60% 75% at 95% 55%,
      rgb(255 255 255 / .22) 0%, rgb(255 255 255 / 0) 80%);
}

.ambient-veils {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.ambient-veil {
  position: absolute;
  left: var(--veil-x, 0%);
  top: var(--veil-y, 51%);
  width: var(--veil-width, 78vw);
  height: var(--veil-height, 82vh);
  opacity: var(--veil-opacity, .72);
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
}

.ambient-wisp {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  backface-visibility: hidden;
}

.ambient-tint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgb(126 174 236 / .94) 0%,
    rgb(151 191 243 / .82) 30%,
    rgb(190 216 249 / .58) 54%,
    rgb(224 239 255 / .24) 76%,
    rgb(224 239 255 / 0) 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,
    #000 0%, #000 62%, rgb(0 0 0 / .65) 82%, transparent 100%);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
}
.ambient-tint:first-child { opacity: 1; }

.ambient-background::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: var(--ambient-frost-opacity);
  background:
    repeating-linear-gradient(90deg,
      rgb(255 255 255 / 0) 0, rgb(255 255 255 / 0) 1.5vw,
      rgb(255 255 255 / .12) 1.85vw, rgb(255 255 255 / .44) 2.3vw,
      rgb(255 255 255 / .3) 2.7vw, rgb(255 255 255 / 0) 3.3vw,
      rgb(255 255 255 / 0) 4.9vw),
    repeating-linear-gradient(90deg,
      rgb(255 255 255 / 0) 0, rgb(255 255 255 / 0) 4.1vw,
      rgb(255 255 255 / .1) 4.5vw, rgb(255 255 255 / .25) 5vw,
      rgb(255 255 255 / .13) 5.6vw, rgb(255 255 255 / 0) 6.1vw,
      rgb(255 255 255 / 0) 8.7vw);
}

.ambient-background::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(180deg,
    var(--ambient-tint-base) 0%,
    color-mix(in srgb, var(--ambient-tint-base) 94%, transparent) 8%,
    color-mix(in srgb, var(--ambient-tint-base) 42%, transparent) 20%,
    color-mix(in srgb, var(--ambient-tint-base) 0%, transparent) 34%,
    color-mix(in srgb, var(--ambient-tint-base) 0%, transparent) 68%,
    color-mix(in srgb, var(--ambient-tint-base) 48%, transparent) 82%,
    color-mix(in srgb, var(--ambient-tint-base) 96%, transparent) 94%,
    var(--ambient-tint-base) 100%);
}

.is-interacting .ambient-veil { will-change: transform; }
.is-animated .ambient-wisp {
  will-change: transform;
}
.is-tinting .ambient-tint { will-change: opacity; }

@media (prefers-reduced-motion: reduce), (pointer: coarse), (hover: none) {
  .ambient-veil {
    transform: translate3d(-50%, -50%, 0) !important;
    will-change: auto !important;
  }
  .ambient-wisp {
    transform: translate3d(0, 0, 0) !important;
    will-change: auto !important;
  }
  .ambient-tint { will-change: auto !important; }
}