/* Footer Bubble Animation Styles */

/* Bubbles container */
.bubbles {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Individual bubble */
.bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(232, 242, 76, 0.1);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    box-shadow: inset 0 0 10px rgba(232, 242, 76, 0.2), 
                0 0 20px rgba(232, 242, 76, 0.1);
    animation: rise linear forwards;
    opacity: 0;
}

/* Bubble rise animation */
@keyframes rise {
    0% {
        bottom: -10%;
        opacity: 0;
        transform: translateX(0) scale(0.2);
    }
    5% {
        opacity: 0.8;
    }
    95% {
        opacity: 0.6;
    }
    100% {
        bottom: 120%;
        opacity: 0;
        transform: translateX(calc(20px - (var(--i, 0) * 40px))) scale(0.8);
    }
}