main {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

main > *:not(.bubble) {
  position: relative;
  z-index: 1;
}

main .bubble {
  position: absolute;
  bottom: -10px; /* começa fora da tela */
  border-radius: 50%;
  opacity: 0.6;
  z-index: -100;
  filter: drop-shadow(0 0 4px #9EFE8B) drop-shadow(0 0 6px aqua);
  animation-name: rise, glow;
  animation-iteration-count: infinite;
  animation-timing-function: linear, ease-in-out;
  animation-fill-mode: forwards;
}

/* Cores alternadas */
main .bubble:nth-child(2n) { background: rgba(0,255,255,0.9); }
main .bubble:nth-child(2n+1) { background: rgba(158,254,139,0.9); }

/* Posições, tamanhos e deslocamentos laterais com delay escalonado */
main .bubble:nth-child(1)  { left:2%;  width:6px; height:6px;   --dx:120px; animation-duration:28s; animation-delay:0s; }
main .bubble:nth-child(2)  { left:6%;  width:5px; height:5px;   --dx:-140px; animation-duration:30s; animation-delay:1s; }
main .bubble:nth-child(3)  { left:10%; width:7px; height:7px;   --dx:130px; animation-duration:29s; animation-delay:2s; }
main .bubble:nth-child(4)  { left:14%; width:5px; height:5px;   --dx:-120px; animation-duration:31s; animation-delay:3s; }
main .bubble:nth-child(5)  { left:18%; width:6px; height:6px;   --dx:140px; animation-duration:28s; animation-delay:4s; }
main .bubble:nth-child(6)  { left:22%; width:5px; height:5px;   --dx:-130px; animation-duration:30s; animation-delay:5s; }
main .bubble:nth-child(7)  { left:26%; width:6px; height:6px;   --dx:120px; animation-duration:29s; animation-delay:6s; }
main .bubble:nth-child(8)  { left:30%; width:5px; height:5px;   --dx:-150px; animation-duration:31s; animation-delay:7s; }
main .bubble:nth-child(9)  { left:34%; width:6px; height:6px;   --dx:130px; animation-duration:28s; animation-delay:8s; }
main .bubble:nth-child(10) { left:38%; width:5px; height:5px;   --dx:-140px; animation-duration:30s; animation-delay:9s; }
main .bubble:nth-child(11) { left:42%; width:7px; height:7px;   --dx:150px; animation-duration:29s; animation-delay:10s; }
main .bubble:nth-child(12) { left:46%; width:5px; height:5px;   --dx:-130px; animation-duration:31s; animation-delay:11s; }
main .bubble:nth-child(13) { left:50%; width:6px; height:6px;   --dx:140px; animation-duration:28s; animation-delay:12s; }
main .bubble:nth-child(14) { left:54%; width:5px; height:5px;   --dx:-120px; animation-duration:30s; animation-delay:13s; }
main .bubble:nth-child(15) { left:58%; width:6px; height:6px;   --dx:150px; animation-duration:29s; animation-delay:14s; }
main .bubble:nth-child(16) { left:62%; width:5px; height:5px;   --dx:-140px; animation-duration:31s; animation-delay:15s; }
main .bubble:nth-child(17) { left:66%; width:6px; height:6px;   --dx:130px; animation-duration:28s; animation-delay:16s; }
main .bubble:nth-child(18) { left:70%; width:5px; height:5px;   --dx:-150px; animation-duration:30s; animation-delay:17s; }
main .bubble:nth-child(19) { left:74%; width:6px; height:6px;   --dx:140px; animation-duration:29s; animation-delay:18s; }
main .bubble:nth-child(20) { left:78%; width:5px; height:5px;   --dx:-130px; animation-duration:31s; animation-delay:19s; }
main .bubble:nth-child(21) { left:82%; width:6px; height:6px;   --dx:150px; animation-duration:28s; animation-delay:20s; }
main .bubble:nth-child(22) { left:86%; width:5px; height:5px;   --dx:-140px; animation-duration:30s; animation-delay:21s; }
main .bubble:nth-child(23) { left:90%; width:6px; height:6px;   --dx:130px; animation-duration:29s; animation-delay:22s; }
main .bubble:nth-child(24) { left:94%; width:5px; height:5px;   --dx:-150px; animation-duration:31s; animation-delay:23s; }
main .bubble:nth-child(25) { left:2%;  width:6px; height:6px;   --dx:140px; animation-duration:28s; animation-delay:24s; }
main .bubble:nth-child(26) { left:6%;  width:5px; height:5px;   --dx:-130px; animation-duration:30s; animation-delay:25s; }
main .bubble:nth-child(27) { left:10%; width:6px; height:6px;  --dx:150px; animation-duration:29s; animation-delay:26s; }
main .bubble:nth-child(28) { left:14%; width:5px; height:5px;  --dx:-140px; animation-duration:31s; animation-delay:27s; }
main .bubble:nth-child(29) { left:18%; width:6px; height:6px;  --dx:130px; animation-duration:28s; animation-delay:28s; }
main .bubble:nth-child(30) { left:22%; width:5px; height:5px;  --dx:-150px; animation-duration:30s; animation-delay:29s; }

@keyframes rise {
  0%   { transform: translateX(0) translateY(0); }
  50%  { transform: translateX(var(--dx)) translateY(-60vh); }
  100% { transform: translateX(calc(var(--dx)*1.3)) translateY(-120vh); }
}

/* Brilho pulsante */
@keyframes glow {
  0%   { filter: drop-shadow(0 0 4px #9EFE8B) drop-shadow(0 0 6px aqua); }
  50%  { filter: drop-shadow(0 0 7px #9EFE8B) drop-shadow(0 0 9px aqua); }
  100% { filter: drop-shadow(0 0 4px #9EFE8B) drop-shadow(0 0 6px aqua); }
}