.bubble-bg {
    /* Change this to adjust the base blue used behind the bubbles. */
    --bubble-bg-color: #2c5f8d;
    /* Increase these values to make the soft repeated background texture brighter. */
    --bubble-texture: rgba(255, 255, 255, 0.14);
    --bubble-texture-faint: rgba(255, 255, 255, 0.06);
    /* Use the variables below to control the generated random bubbles. */
    --bubble-count: 52;
    --bubble-min-size: 0.35;
    --bubble-size-range: 1.15;
    --bubble-min-alpha: 0.16;
    --bubble-alpha-range: 0.22;

    position: relative;
    overflow: hidden;
    background: var(--bubble-bg-color);
}

/* Use "bubble-bg bubble-bg--subtle" for a lighter, quieter version. */
.bubble-bg--subtle {
    --bubble-texture: rgba(255, 255, 255, 0.1);
    --bubble-texture-faint: rgba(255, 255, 255, 0.04);
    --bubble-count: 36;
    --bubble-min-size: 0.3;
    --bubble-size-range: 0.9;
    --bubble-min-alpha: 0.1;
    --bubble-alpha-range: 0.14;
}

/* Use "bubble-bg bubble-bg--dense" for more bubbles and stronger visibility. */
.bubble-bg--dense {
    --bubble-texture: rgba(255, 255, 255, 0.18);
    --bubble-texture-faint: rgba(255, 255, 255, 0.08);
    --bubble-count: 72;
    --bubble-min-size: 0.4;
    --bubble-size-range: 1.3;
    --bubble-min-alpha: 0.18;
    --bubble-alpha-range: 0.26;
}

.bubble-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle, var(--bubble-texture) 0 10%, transparent 12%) 7% 11% / 220px 200px,
        radial-gradient(circle, var(--bubble-texture-faint) 0 9%, transparent 11%) 19% 76% / 260px 220px,
        radial-gradient(circle, rgba(255, 255, 255, 0.11) 0 11%, transparent 13%) 59% 18% / 230px 210px,
        radial-gradient(circle, rgba(255, 255, 255, 0.09) 0 10%, transparent 12%) 87% 71% / 210px 220px,
        radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 8%, transparent 10%) 42% 88% / 260px 220px;
    background-repeat: repeat;
    filter: blur(8px);
    opacity: 0.3;
    mix-blend-mode: screen;
    animation: bubble-bg-drift 26s linear infinite alternate;
}

.bubble-bg__bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.bubble-bg > :not(.bubble-bg__bubbles) {
    position: relative;
    z-index: 2;
}

.bubble-bg__bubble {
    position: absolute;
    width: var(--size);
    height: var(--size);
    left: var(--x);
    top: var(--y);
    border-radius: 50%;
    /* Increase the alpha values below to make individual bubbles more prominent. */
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12) 48%, transparent 64%);
    filter: blur(0.05px);
    opacity: var(--alpha);
    animation: bubble-bg-shimmer var(--duration) ease-in-out infinite;
}

@keyframes bubble-bg-drift {
    from {
        transform: translate3d(-1.5%, -1%, 0) scale(1.02);
    }
    to {
        transform: translate3d(1.5%, 1%, 0) scale(1.06);
    }
}

@keyframes bubble-bg-shimmer {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: var(--alpha);
    }
    50% {
        transform: translate3d(0, -4px, 0) scale(1.05);
        opacity: calc(var(--alpha) + 0.05);
    }
}