:root {
  --wave-time: 0;
  --wave-dot-size: 4.5;
  --wave-cell-size: 110;
  --wave-shift: 0.045;
  --wave-debug: 0;
  --wave-dot-color: #a9a3e8;
}

.wave-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 28% 30%, rgba(108,96,182,.18), transparent 38%),
    radial-gradient(circle at 76% 68%, rgba(25,91,160,.12), transparent 42%),
    linear-gradient(135deg, #080613 0%, #151126 48%, #080613 100%);
  background-image:
    paint(wave),
    radial-gradient(circle at 28% 30%, rgba(108,96,182,.18), transparent 38%),
    radial-gradient(circle at 76% 68%, rgba(25,91,160,.12), transparent 42%),
    linear-gradient(135deg, #080613 0%, #151126 48%, #080613 100%);
  background-blend-mode: screen, normal, normal, normal;
}

/* Keep the wave visual subtle behind the interface. */
.wave-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(5,4,14,.28) 100%);
}
