@keyframes float {
    0% {
        top: calc(110vh + var(--bubble-size, 35px)); /* Запас снизу */
        transform: translateX(0px) var(--initial-scale, scale(1));
        opacity: 0.6;
        visibility: hidden; /* Не рендерится до старта */
    }
    3% {
        visibility: visible; /* Включаем рендер */
        top: 100vh;
        transform: translateX(0px) var(--initial-scale, scale(1));
        opacity: 0.6;
    }
    10% {
        top: 90vh;
        transform: translateX(5px);
        opacity: 0.6;
    }
    20% {
        top: 80vh;
        transform: translateX(-10px);
        opacity: 0.6;
    }
    30% {
        top: 70vh;
        transform: translateX(10px);
        opacity: 0.6;
    }
    40% {
        top: 60vh;
        transform: translateX(-5px);
        opacity: 0.6;
    }
    50% {
        top: 50vh;
        transform: translateX(8px);
        opacity: 0.6;
    }
    60% {
        top: 40vh;
        transform: translateX(-8px);
        opacity: 0.6;
    }
    70% {
        top: 30vh;
        transform: translateX(5px);
        opacity: 0.6;
    }
    80% {
        top: 20vh;
        transform: translateX(-10px);
        opacity: 0.6;
    }
    90% {
        top: 10vh;
        transform: translateX(8px);
        opacity: 0.6;
    }
    100% {
        top: calc(-20vh - var(--bubble-size, 35px)); /* Запас сверху */
        transform: translateX(0px);
        opacity: 0.6;
    }
}

.bubble {
    position: absolute;
    left: 0;
    border-radius: 50%;
    box-shadow: 0 0 150px var(--bubble-color, red), 0 0 30px rgba(255, 0, 0, 0.3);
    opacity: 0.6;
    cursor: pointer;
    pointer-events: auto !important; /* Жёстко для кликов */
    z-index: 1; /* Над контентом, под nav */
    animation-timing-function: linear;
    will-change: transform, opacity;
    transform: var(--initial-scale, scale(1));
    visibility: hidden; /* Initial hidden */
}

.bubbles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bubbles-under {
    z-index: -1;
}

.bubbles-over {
    z-index: 1000;
}

.bubbles-middle {
    z-index: 5;
}

.bubble-under {
    z-index: -1;
}

.bubble-over {
    z-index: 1001;
}

.bubble-middle {
    z-index: 6;
}

/* Для JS-эффекта: шарики "лопнули" (анимация) */
.bubble.popped {
    animation: pop 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important; /* cubic-bezier для более плавного ease-out (bounce-like) */
}

@keyframes pop {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1; /* Предполагаем полную видимость во время движения */
    }
    40% {
        transform: scale(1.4) rotate(180deg); /* Лёгкое вращение для реализма лопанья */
        opacity: 1;
    }
    100% {
        transform: scale(0) rotate(360deg); /* Полный поворот и сжатие к нулю */
        opacity: 0;
    }
}

/* Частицы для лопанья шариков */
.particle {
    position: absolute;
    pointer-events: none;
    z-index: 2; /* Относительно контейнера (эффективно 17, над лопнувшим шариком) */
    animation: explode linear forwards;
    opacity: 1;
}

@keyframes explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--vx), var(--vy)) scale(0);
        opacity: 0;
    }
}
/* ================================
   Мобильная адаптация пузырей
   ================================ */
@media (max-width: 768px) {

    /* Уменьшаем "вилянья" влево-вправо */
    @keyframes float {
        0% {
            top: calc(110vh + var(--bubble-size, 20px));
            transform: translateX(0px) scale(0.7);
            opacity: 0.5;
            visibility: hidden;
        }
        3% {
            visibility: visible;
            top: 100vh;
            transform: translateX(0px) scale(0.7);
            opacity: 0.5;
        }
        20% { top: 85vh; transform: translateX(3px); }
        40% { top: 65vh; transform: translateX(-3px); }
        60% { top: 45vh; transform: translateX(3px); }
        80% { top: 25vh; transform: translateX(-3px); }
        100% {
            top: calc(-20vh - var(--bubble-size, 20px));
            transform: translateX(0px) scale(0.7);
            opacity: 0.5;
        }
    }

    .bubble {
        --bubble-size: 20px;
        opacity: 0.5;
        box-shadow: 0 0 60px var(--bubble-color, red), 0 0 15px rgba(255, 0, 0, 0.25);
        animation-duration: calc(var(--duration, 14s) * 1.3); /* Чуть медленнее для мобил */
    }

    .particle {
        transform: scale(0.7);
    }
}