#aurora-layer {
  position: fixed;
  inset: 0;
  background-color: #111827;
  z-index: -9999;
  pointer-events: none;
}

#aurora-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 50px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 50px
    );
}

.bubble-container {
  position: absolute;
  inset: 0;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  animation: floatBubble linear infinite;
}

@keyframes floatBubble {
  0%   { transform: translateY(100vh); opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { transform: translate(var(--x-move), 50vh); opacity: 0.8; }
  100% { transform: translate(var(--x-move), -50vh); opacity: 0; }
}