/* Interactive Bubbles CSS */
.bubble-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through, JS will handle specific bubble clicks */
    z-index: 9998;
    /* On top of content but below modals (lightbox is 9999) */
    overflow: hidden;
}

.bubble {
    position: absolute;
    bottom: -100px;
    /* Use dynamic color variable, fallback to white-ish blue */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(var(--bubble-color, 255, 255, 255), 0.4) 60%, rgba(var(--bubble-color, 255, 255, 255), 0.2) 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(var(--bubble-color, 255, 255, 255), 0.3);
    cursor: pointer;
    pointer-events: auto;
    /* Enable clicking on bubbles */
    will-change: transform, opacity;
    animation: floatUp linear forwards;
    transition: transform 0.2s, opacity 0.2s;
}

.bubble::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 25%;
    height: 12%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    transform: rotate(-45deg);
}

.bubble:hover {
    filter: brightness(1.2);
}

@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-120vh) translateX(20px) rotate(360deg);
        opacity: 0;
    }
}

/* Burst animation class */
.bubble-burst {
    animation: burst 0.3s ease-out forwards !important;
    pointer-events: none;
}

@keyframes burst {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}