/* ============================================
   Bubble Animation Styles
   ============================================ */

.bubble {
    border-radius: var(--radius-round);
    background: rgb(230, 245, 255);
    background: radial-gradient(circle,
        var(--color-bubble-light) 18%,
        var(--color-bubble-mid) 46%,
        var(--color-bubble-mid) 100%);
    background-position: -10px -10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    z-index: var(--z-bubbles);
}

.bubble_particle {
    position: fixed;
    border-radius: var(--radius-round);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: float 2s ease-out forwards;
    will-change: transform, opacity;
    z-index: -1;
    background: rgb(230, 245, 255);
    background: radial-gradient(circle,
        var(--color-bubble-light) 18%,
        var(--color-bubble-mid) 46%,
        var(--color-bubble-mid) 100%);
    background-position: -10px -10px;
    box-shadow:
        0 0 10px rgba(180, 220, 255, 0.4),
        inset 0 0 8px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes float {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, calc(-50% - 150px)) scale(1.1);
        opacity: 0;
    }
}