.root {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 810px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 67.2%, var(--color-bg-base-light) 96%), #E2EAEE;
    padding-top: 40px;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    z-index: 0;
}

.bubble {
    position: absolute;
    border-radius: var(--border-radius-full);
    background: radial-gradient(
        circle at 50% 50%,
        var(--color-midnight-500) 0%,
        var(--color-midnight-500) 60%,
        var(--color-navy-500) 98%
    );
    box-shadow: -20px -20px 60px 0 var(--color-navy-500);
    filter: blur(6px);
    transition: top 3s ease, left 3s ease;
    will-change: transform, top, left;

    &[data-index="3"],
    &[data-index="9"],
    &[data-index="10"],
    &[data-size="sm"],
    &[data-size="xl"] {
        background: var(--color-midnight-500);
        box-shadow: none;
    }

    &[data-size="xs"] { width: 182px; height: 182px; }
    &[data-size="sm"] { width: 314px; height: 314px; }
    &[data-size="md"] { width: 364px; height: 364px; }
    &[data-size="lg"] { width: 426px; height: 426px; }
    &[data-size="xl"] { width: 480px; height: 480px; }
}

.bubble::before {
    content: '';
    position: absolute;
    inset: -3%;
    z-index: -1;
    border-radius: inherit;
    box-shadow: -20px -20px 60px 0 var(--color-navy-500);
    filter: blur(20px);
    pointer-events: none;
}

.bubble[data-index="3"]::before,
.bubble[data-index="9"]::before,
.bubble[data-index="10"]::before,
.bubble[data-size="sm"]::before,
.bubble[data-size="xl"]::before {
    display: none;
}

.bubble,
.bubbleReverse {
    &[data-index="0"]  { top: 27%;  left: 1050px; }
    &[data-index="1"]  { top: 28.4%; left: 450px; }
    &[data-index="2"]  { top: 40%; left: 112px; }
    &[data-index="3"]  { top: 55%; left: 250px; }
    &[data-index="4"]  { top: 6.3%;  left: 369px; }
    &[data-index="5"]  { top: 75.9%; left: 474px; }
    &[data-index="6"]  { top: 50%; left: 1000px; }
    &[data-index="7"]  { top: 14.8%; left: 0px; }
    &[data-index="8"] { top: 27.5%; left: 1025px; }
    &[data-index="9"] { top: 61.4%; left: 1280px; }
    &[data-index="10"] { top: 50%; left: 1250px; }
    &[data-index="11"]  { top: 86%; left: 343px; }
    &[data-index="12"]  { top: 84%; left: -150px; }
}

.bubbleFinished {
    &[data-index="0"]  { top: 68%; }
    &[data-index="1"]  { top: 63%; }
    &[data-index="2"]  { top: 60%; }
    &[data-index="3"]  { top: 87.5%; }
    &[data-index="4"]  { top: 88.4%; }
    &[data-index="5"]  { top: 95.9%; }
    &[data-index="6"]  { top: 80%; left: 850px }
    &[data-index="7"]  { top: 64.8%; }
    &[data-index="8"]  { top: 47.5%; }
    &[data-index="9"]  { top: 81.4%; }
    &[data-index="10"] { top: 45%; }
    &[data-index="11"] { top: 87%; }
    &[data-index="12"] { top: 85%; }
}


@media screen and (width < 1024px) {
    .root {
        height: 522px;
    }

    .bubble {
        transition: top 5s ease, left 5s ease;

        &[data-size="xs"] { width: 131px; height: 131px; }
        &[data-size="sm"] { width: 197px; height: 197px; }
        &[data-size="md"] { width: 222px; height: 222px; }
        &[data-size="lg"] { width: 263px; height: 263px; }
        &[data-size="xl"] { width: 280px; height: 280px; }
    }

    .bubble,
    .bubbleReverse,
    .bubbleFinished {
        &[data-index="0"]  { left: 360px; }
        &[data-index="1"]  { left: 30px; }
        &[data-index="2"]  { left: 0px; }
        &[data-index="3"]  { left: 10px; }
        &[data-index="4"]  { left: 69px; }
        &[data-index="5"]  { left: 74px; }
        &[data-index="6"]  { left: 400px; }
        &[data-index="7"]  { left: 0px; }
        &[data-index="8"]  { left: 365px; }
        &[data-index="9"]  { left: 520px; top: 75%}
        &[data-index="10"] { left: 290px; }
        &[data-index="11"] { left: 43px; }
        &[data-index="12"] { left: -150px; }
    }
}

@media screen and (width < 768px) {
    .root {
        height: 522px;
    }

    .bubble {
        transition: top 5s ease, left 5s ease;

        &[data-size="xs"] { width: 91px; height: 91px; }
        &[data-size="sm"] { width: 157px; height: 157px; }
        &[data-size="md"] { width: 182px; height: 182px; }
        &[data-size="lg"] { width: 223px; height: 223px; }
        &[data-size="xl"] { width: 240px; height: 240px; }
    }

    .bubble,
    .bubbleReverse,
    .bubbleFinished {
        &[data-index="0"]  { left: 350px; }
        &[data-index="1"]  { left: 30px; }
        &[data-index="2"]  { left: 0px; }
        &[data-index="3"]  { left: 10px; }
        &[data-index="4"]  { left: 69px; }
        &[data-index="5"]  { left: 74px; }
        &[data-index="6"]  { left: 350px; }
        &[data-index="7"]  { left: 0px; }
        &[data-index="8"]  { left: 325px; }
        &[data-index="9"]  { left: 480px; }
        &[data-index="10"] { left: 250px; }
        &[data-index="11"] { left: 43px; }
        &[data-index="12"] { left: -150px; }
    }
}