:root {
  --pearl-fallback-ink: #08080a;
  --pearl-fallback-aqua: rgba(110, 222, 220, 0.12);
  --pearl-fallback-violet: rgba(182, 132, 219, 0.1);
  --pearl-fallback-signal: rgba(240, 68, 50, 0.13);
}

.pearl-sand-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--pearl-fallback-ink);
}

.pearl-sand-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pearl-sand-canvas[data-fallback="true"] {
  background:
    radial-gradient(ellipse at 84% 76%, var(--pearl-fallback-aqua), transparent 30%),
    radial-gradient(ellipse at 91% 20%, var(--pearl-fallback-violet), transparent 28%),
    radial-gradient(ellipse at 8% 58%, var(--pearl-fallback-signal), transparent 34%),
    var(--pearl-fallback-ink);
}

.pearl-sand-content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pearl-sand-host {
    scroll-behavior: auto;
  }
}