.gradient-waves-container {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.gradient-waves-container::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 8, 10, 0.08),
    rgba(7, 8, 10, 0.2) 42%,
    rgba(7, 8, 10, 0.82) 100%
  );
  content: "";
}

.gradient-waves-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.gradient-waves-container[data-webgl="unavailable"] {
  background:
    radial-gradient(ellipse at 20% 8%, rgba(128, 91, 255, 0.24), transparent 52%),
    radial-gradient(ellipse at 78% 26%, rgba(155, 130, 255, 0.16), transparent 46%);
}

@media (max-width: 760px) {
  .gradient-waves-container::after {
    background: linear-gradient(
      180deg,
      rgba(7, 8, 10, 0.12),
      rgba(7, 8, 10, 0.28) 44%,
      rgba(7, 8, 10, 0.88) 100%
    );
  }
}
