/* ───────────── Small drifting bubbles ───────────── */
.bubble{
  position: absolute;
  border-radius:50%;
  background: oklch(78.024% 0.11966 160.075 / 1); /* бирюзовый 60 % α */
  opacity:0;
  /* индивидуальная длительность и сдвиг берутся из custom‑props */
  animation: bubbleDrift var(--dur, 2s) ease-in-out infinite;
  pointer-events:none;
  z-index: 10;
  animation-delay: 1s
}

@keyframes bubbleDrift{
  0%   { 
        opacity:0;
        transform: translateX(0); 
    }
  40%  { 
        opacity:1; 
    }
  60%  { 
        opacity:1;   
    }
  100% { 
    opacity:0;   
    transform:translateX(var(--dx, 25px));
    } 
}