/* refined_bubbles.css */

.bubble-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0.9;
    /* Higher opacity for the new style */
    animation: float-bubble 12s infinite ease-in-out;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
    /* Inner glow */
    backdrop-filter: blur(2px);
    /* Glassy effect */
}

/* The Cartoon "Shine" / Reflection */
.bubble::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 18%;
    width: 25%;
    height: 12%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    transform: rotate(-45deg);
    filter: blur(0.5px);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

/* Optional: Secondary smaller shine dot */
.bubble::before {
    content: '';
    position: absolute;
    bottom: 18%;
    right: 18%;
    width: 8%;
    height: 8%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

/* --- Colors matched to the cartoon style --- */

/* Pink/Red Bubble */
.bubble.red {
    border: 2px solid #FF9CAC;
    /* Soft Pink Outline */
    background: radial-gradient(135deg, rgba(255, 235, 238, 0.4) 0%, rgba(255, 156, 172, 0.1) 100%);
}

/* Blue Bubble */
.bubble.blue {
    border: 2px solid #74F2F2;
    /* Cyan/Blue Outline */
    background: radial-gradient(135deg, rgba(224, 255, 255, 0.4) 0%, rgba(116, 242, 242, 0.1) 100%);
}

/* Yellow Bubble */
.bubble.yellow {
    border: 2px solid #FFEAA7;
    /* Soft Yellow Outline */
    background: radial-gradient(135deg, rgba(255, 252, 235, 0.5) 0%, rgba(255, 234, 167, 0.1) 100%);
}

/* Purple Bubble */
.bubble.purple {
    border: 2px solid #A29BFE;
    background: radial-gradient(135deg, rgba(240, 238, 255, 0.4) 0%, rgba(162, 155, 254, 0.1) 100%);
}

/* Green Bubble */
.bubble.green {
    border: 2px solid #55EFC4;
    background: radial-gradient(135deg, rgba(230, 255, 248, 0.4) 0%, rgba(85, 239, 196, 0.1) 100%);
}

/* --- Sizes --- */
.bubble.small {
    width: 40px;
    height: 40px;
}

.bubble.medium {
    width: 80px;
    height: 80px;
}

.bubble.large {
    width: 140px;
    height: 140px;
}

/* --- Positioning & Delays --- */
.bubble-1 {
    top: 10%;
    left: 5%;
    animation-duration: 14s;
}

.bubble-2 {
    top: 60%;
    left: 10%;
    animation-duration: 16s;
    animation-delay: 1s;
}

.bubble-3 {
    top: 20%;
    right: 8%;
    animation-duration: 18s;
    animation-delay: 2s;
}

.bubble-4 {
    bottom: 15%;
    right: 12%;
    animation-duration: 15s;
    animation-delay: 0.5s;
}

.bubble-5 {
    top: 40%;
    left: 15%;
    animation-duration: 20s;
    animation-delay: 3s;
}

.bubble-6 {
    bottom: 25%;
    left: 8%;
    animation-duration: 17s;
    animation-delay: 4s;
}

/* --- Complex Floating Animation --- */
@keyframes float-bubble {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(20px, -40px) rotate(10deg);
    }

    66% {
        transform: translate(-15px, -80px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .bubble.large {
        display: none;
    }

    .bubble.medium {
        width: 60px;
        height: 60px;
    }
}