.background-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

.liquid-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

.liquid-layer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.overlay-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(2, 6, 23, 0.1), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(15, 23, 42, 0.18), transparent 45%),
    linear-gradient(160deg, rgba(2, 6, 23, 0.2), rgba(15, 23, 42, 0.35));
}

.ui-layer {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .liquid-layer {
    background: linear-gradient(160deg, #231655 0%, #3c1b7a 40%, #2a1538 100%);
  }

  .liquid-layer canvas {
    display: none;
  }
}