:root {
    --color-bg1: rgb(108, 0, 162);
    --color-bg2: rgb(42, 0, 82);
    --color1: 18, 113, 255;
    --color2: 221, 74, 255;
    --color3: 100, 220, 255;
    --color4: 163, 50, 200;
    --color5: 180, 50, 163;
    --color-interactive: 140, 100, 255;
    --circle-size: 80%;
    --blending: hard-light;
}
.bubble {
    position: relative;
    /*height: 100vh;*/

    .text-container {
        z-index: 100;
        width: 100vw;
        height: 100vh;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        font-size: 96px;
        color: white;
        opacity: 0.8;
        user-select: none;
        text-shadow: 1px 1px rgba(0,0,0,0.1);
    }

    .gradient-bg {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background: linear-gradient(-135deg, rgba(17, 0, 59, 0.7) 25%,rgba(105,0,243,.7) 100%);
        top: 0;
        left: 0;
    }

    .gradient-bg svg {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }

    .gradients-container {
        filter: blur(40px);
        width: 100%;
        height: 100%;
    }

    .g1, .g2, .g3, .g4, .g5, .interactive {
        position: absolute;
        mix-blend-mode: var(--blending);
        opacity: 0.3;
    }

    .g1 {
        background: radial-gradient(circle at center, rgba(var(--color1), 0.6) 0, rgba(var(--color1), 0) 50%);
        width: 100%;
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: center center;
        animation: moveVertical 30s ease infinite;
    }

    .g2 {
        background: radial-gradient(circle at center, rgba(var(--color2), 0.6) 0, rgba(var(--color2), 0) 50%);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 400px);
        animation: moveInCircle 20s reverse infinite;
    }

    .g3 {
        background: radial-gradient(circle at center, rgba(var(--color3), 0.6) 0, rgba(var(--color3), 0) 50%);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2 + 200px);
        left: calc(50% - var(--circle-size) / 2 - 500px);
        transform-origin: calc(50% + 400px);
        animation: moveInCircle 40s linear infinite;
    }

    .g4 {
        background: radial-gradient(circle at center, rgba(var(--color4), 0.6) 0, rgba(var(--color4), 0) 50%);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 200px);
        animation: moveHorizontal 40s ease infinite;
    }

    .g5 {
        background: radial-gradient(circle at center, rgba(var(--color5), 0.6) 0, rgba(var(--color5), 0) 50%);
        width: calc(var(--circle-size) * 2);
        height: calc(var(--circle-size) * 2);
        top: calc(50% - var(--circle-size));
        left: calc(50% - var(--circle-size));
        transform-origin: calc(50% - 800px) calc(50% + 200px);
        animation: moveInCircle 20s ease infinite;
    }

    .interactive {
        background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.6) 0, rgba(var(--color-interactive), 0) 50%);
        width: 100%;
        height: 100%;
        top: -50%;
        left: -50%;
        opacity: 0.4;
    }

}
@keyframes moveInCircle {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

@keyframes moveVertical {
    0% { transform: translateY(-50%); }
    50% { transform: translateY(50%); }
    100% { transform: translateY(-50%); }
}

@keyframes moveHorizontal {
    0% { transform: translateX(-50%) translateY(-10%); }
    50% { transform: translateX(50%) translateY(10%); }
    100% { transform: translateX(-50%) translateY(-10%); }
}

.bf_bubble {
    position: absolute;
    width: 150vw;
    height: 150vw;
    transform-origin: center center;
    &.b1 {
        background: radial-gradient(circle at center, rgba(188, 0, 255, 0.4) 0, transparent 50%);
        transform: translate(-40%, -40%);
    }
    &.b2 {
        background: radial-gradient(circle at center, rgba(139, 0, 255, 0.4) 0, transparent 50%);
        transform: translate(40%, -50%);
        width: 160vw;
        height: 160vw;
    }
    &.b3 {
        background: radial-gradient(circle at center, rgba(36, 80, 255, 0.4) 0, transparent 50%);
        transform: translate(40%, 10%);
        width: 160vw;
        height: 160vw;
    }
    &.b4 {
        background: radial-gradient(circle at center, rgba(201, 107, 255, 0.4) 0, transparent 50%);
        transform: translate(-40%, 10%);
        width: 160vw;
        height: 160vw;
    }
    &.b5 {
        background: radial-gradient(circle at center, rgba(132, 48, 255, 0.4) 0, transparent 50%);
        transform: translate(40%, 30%);
        width: 160vw;
        height: 160vw;
    }
    &.b6 {
        background: radial-gradient(circle at center, rgba(53, 0, 117, 0.4) 0, transparent 50%);
        transform: translate(-10%, 40%);
        width: 160vw;
        height: 160vw;
    }
}
@media (max-width: 1450px) {
    .bf_bubble {
        width: 300vw !important;
        height: 300vw !important;
        opacity: 1;
        &.b1 {
            transform: translate(-20%, -80%);
        }
        &.b2 {
            transform: translate(20%, -50%);
        }
        &.b3 {
            transform: translate(20%, -10%);
        }
        &.b4 {
            transform: translate(-25%, 10%);
        }
        &.b5 {
            transform: translate(25%, 50%);
        }
        &.b6 {
            transform: translate(-25%, 75%);
        }
    }
}


.big-shadow {
    box-shadow: 0 0 120px rgba(154, 124, 255, 0.3),
    0 8px 80px rgba(14, 10, 162, 0.1);
}

.big-shadow:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    content: "";
    background:
            radial-gradient(141.53% 114.68% at 87.46% 55.27%, #ffffff 36.75%, rgba(14, 10, 162, 0) 100%);
    filter: blur(42px);
    border-radius:
            inherit;
    opacity: .5;
    transform: scale(1.05);
    mix-blend-mode: hard-light;
}