/* Базовый контейнер для пузырей (добавить в блок) */
.bubbles-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1; /* Пузыри под текстом, но над фоном */
}

/* Стили пузырей */
.bubble {
  position: absolute;
  bottom: -50px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.8) 0%, 
    rgba(100, 200, 255, 0.6) 50%, 
    rgba(0, 100, 200, 0.3) 100%);
  opacity: 0;
  animation: float-up 8s infinite ease-in;
}

/* Разные размеры пузырей */
.bubble.size-small {
  width: 10px;
  height: 10px;
}
.bubble.size-medium {
  width: 25px;
  height: 25px;
}
.bubble.size-large {
  width: 40px;
  height: 40px;
}

/* Анимация всплытия */
@keyframes float-up {
  0% { 
    transform: translateY(0) translateX(0) scale(0.5);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.4; }
  100% { 
    transform: translateY(-100vh) translateX(calc(var(--random-x) * 50px)) scale(1.2);
    opacity: 0;
  }
}

/* Генерация случайных параметров через CSS-переменные */
.bubble:nth-child(1) {
  --random-x: 0.2;
  --random-speed: 8;
  left: 15%;
  animation-delay: 0s;
  animation-duration: calc(var(--random-speed) * 1s);
}
.bubble:nth-child(2) {
  --random-x: -0.5;
  --random-speed: 10;
  left: 30%;
  animation-delay: 1.5s;
  animation-duration: calc(var(--random-speed) * 1s);
}
.bubble:nth-child(3) {
  --random-x: 0.8;
  --random-speed: 12;
  left: 55%;
  animation-delay: 3s;
  animation-duration: calc(var(--random-speed) * 1s);
}
.bubble:nth-child(4) {
  --random-x: -0.3;
  --random-speed: 9;
  left: 70%;
  animation-delay: 0.5s;
  animation-duration: calc(var(--random-speed) * 1s);
}
.bubble:nth-child(5) {
  --random-x: 0.6;
  --random-speed: 7;
  left: 85%;
  animation-delay: 2s;
  animation-duration: calc(var(--random-speed) * 1s);
}