body.variant-sparse .hero-cacophony::before {
  background: radial-gradient(circle at 50% 48%, rgba(245,243,238,.78) 0 20rem, rgba(245,243,238,.5) 38rem, rgba(245,243,238,.88) 72rem);
}

body.variant-sparse .hero-cacophony::after {
  background: linear-gradient(90deg, rgba(245,243,238,.92), transparent 26%, transparent 74%, rgba(245,243,238,.92));
}

body.variant-sparse .noise-field {
  perspective: 1320px;
}

body.variant-sparse .noise-item {
  animation-duration: calc(var(--d) * 1.18);
}

body.variant-sparse .hero-copy h1 {
  font-size: clamp(3rem, 6.2vw, 6.2rem);
}

body.variant-heavy .hero-cacophony {
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.72), transparent 24rem),
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--tw-info-bg) 56%, transparent), transparent 40rem),
    radial-gradient(color-mix(in oklch, var(--fg) 7%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--tw-bone);
}

body.variant-heavy .hero-cacophony::before {
  background: radial-gradient(circle at 50% 49%, rgba(245,243,238,.62) 0 17rem, rgba(245,243,238,.18) 28rem, rgba(245,243,238,.76) 68rem);
}

body.variant-heavy .hero-cacophony::after {
  background:
    linear-gradient(90deg, rgba(245,243,238,.76), transparent 20%, transparent 80%, rgba(245,243,238,.76)),
    radial-gradient(ellipse at 50% 50%, transparent 0 24rem, rgba(245,243,238,.22) 48rem);
}

body.variant-heavy .noise-field {
  perspective: 650px;
  -webkit-mask-image: radial-gradient(ellipse 34rem 24rem at 50% 51%, transparent 0 62%, rgba(0,0,0,.38) 80%, #000 100%);
  mask-image: radial-gradient(ellipse 34rem 24rem at 50% 51%, transparent 0 62%, rgba(0,0,0,.38) 80%, #000 100%);
}

body.variant-heavy .noise-card,
body.variant-heavy .chat-bubble {
  box-shadow: 0 1px 2px rgba(28,25,23,.05), 0 18px 34px -24px rgba(28,25,23,.36);
}

body.variant-heavy .noise-item {
  animation-name: depthDriftCentered;
  transform:
    translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), var(--z))
    rotate(var(--r))
    scale(var(--s));
}

body.variant-heavy .hero-copy h1 {
  font-size: clamp(3rem, 6.9vw, 6.9rem);
}

body.variant-deep .hero-cacophony {
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.76), transparent 24rem),
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--tw-info-bg) 54%, transparent), transparent 40rem),
    radial-gradient(color-mix(in oklch, var(--fg) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--tw-bone);
}

body.variant-deep .hero-cacophony::before {
  background: radial-gradient(circle at 50% 49%, rgba(245,243,238,.7) 0 17rem, rgba(245,243,238,.24) 28rem, rgba(245,243,238,.86) 68rem);
}

body.variant-deep .hero-cacophony::after {
  background:
    linear-gradient(90deg, rgba(245,243,238,.9), transparent 21%, transparent 79%, rgba(245,243,238,.9)),
    radial-gradient(ellipse at 50% 50%, transparent 0 24rem, rgba(245,243,238,.28) 48rem);
}

body.variant-deep .noise-field {
  perspective: 650px;
}

body.variant-deep .noise-item {
  animation-duration: calc(var(--d) * 1.08);
}

@keyframes depthDriftCentered {
  0% {
    opacity: min(.82, calc(var(--o) * var(--noise-opacity-boost) * .82));
    transform:
      translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), var(--z))
      rotate(var(--r))
      scale(calc(var(--s) * .96));
  }

  50% {
    opacity: min(.9, calc(var(--o) * var(--noise-opacity-boost)));
  }

  100% {
    opacity: min(.68, calc(var(--o) * var(--noise-opacity-boost) * .62));
    transform:
      translate3d(calc(var(--x) + var(--dx) - 50%), calc(var(--y) + var(--dy) - 50%), calc(var(--z) + 120px))
      rotate(calc(var(--r) * -1))
      scale(calc(var(--s) * 1.05));
  }
}

@media (max-width: 760px) {
  body.variant-sparse .hero-copy h1,
  body.variant-heavy .hero-copy h1,
  body.variant-deep .hero-copy h1 {
    max-width: 20rem;
    font-size: 2.25rem;
    line-height: 1.02;
  }

  body.variant-heavy .noise-field {
    -webkit-mask-image: radial-gradient(ellipse 15rem 20rem at 50% 73%, transparent 0 70%, rgba(0,0,0,.34) 86%, #000 100%);
    mask-image: radial-gradient(ellipse 15rem 20rem at 50% 73%, transparent 0 70%, rgba(0,0,0,.34) 86%, #000 100%);
  }
}