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

.bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  animation: float 14s infinite ease-in-out;
}

.bubble:nth-child(1) { width: 140px; height: 140px; left: 8%; top: 15%; }
.bubble:nth-child(2) { width: 220px; height: 220px; right: 10%; top: 10%; }
.bubble:nth-child(3) { width: 120px; height: 120px; left: 18%; bottom: 12%; }
.bubble:nth-child(4) { width: 180px; height: 180px; right: 18%; bottom: 8%; }
.bubble:nth-child(5) { width: 90px; height: 90px; left: 50%; top: 8%; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}