.angie-soap-bubbles-eb707fb3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 999;
}

.bubbles-container {
    position: relative;
    width: 100%;
    height: 100vh;
}

.soap-bubble-eb707fb3 {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 
                inset 10px 0 20px rgba(255, 0, 255, 0.2), 
                inset -10px 0 20px rgba(0, 255, 255, 0.2), 
                0 0 5px rgba(255, 255, 255, 0.3);
    /* Transition is now set dynamically via JS based on size */
    opacity: 0.8;
}

.soap-bubble-eb707fb3.floating {
    /* Transition applied above, just triggers the move */
}

/* Ensure the widget wrapper doesn't take up space */
.elementor-widget-soap_bubbles_eb707fb3 {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}