/**
 * Background bubbles — sits above body gradient, below noise (z-index:2) and main content (z-index:3+).
 */

.bg-bubbles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.bg-bubbles__bubble {
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.1) 38%,
    rgba(255, 255, 255, 0.04) 62%,
    transparent 72%
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  will-change: transform;
  animation-name: bg-bubble-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes bg-bubble-rise {
  0% {
    transform: translate3d(var(--bubble-drift, 0px), 0, 0);
    opacity: 0.18;
  }
  12% {
    opacity: 0.38;
  }
  88% {
    opacity: 0.26;
  }
  100% {
    transform: translate3d(var(--bubble-drift, 0px), -135vh, 0);
    opacity: 0.06;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-bubbles {
    display: none;
  }
}