/* ======================================
   OCEAN BUBBLE ANIMATION
======================================*/

.bubble {

    position: fixed;

    bottom: -120px;

    border-radius: 50%;

    background:

        radial-gradient(circle at 30% 30%,

            rgba(255, 255, 255, .75),

            rgba(255, 255, 255, .18));

    border: 1px solid rgba(255, 255, 255, .35);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    box-shadow:

        0 0 25px rgba(0, 212, 255, .25),

        0 0 60px rgba(56, 200, 255, .15),

        inset 0 0 18px rgba(255, 255, 255, .45);

    animation: bubbleUp linear infinite;

    pointer-events: none;

    z-index: 0;

}

.bubble::before {
    content: "";
    position: absolute;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    top: 18%;
    left: 22%;
}

/* Bubble 1 */

.bubble1 {

    width: 70px;
    height: 70px;

    left: 5%;

    animation-duration: 8s;
    animation-delay: 0s;

}

/* Bubble 2 */

.bubble2 {

    width: 120px;
    height: 120px;

    left: 18%;

    animation-duration: 9s;
    animation-delay: 3s;

}

/* Bubble 3 */

.bubble3 {

    width: 45px;
    height: 45px;

    left: 33%;

    animation-duration: 7s;
    animation-delay: 1s;

}

/* Bubble 4 */

.bubble4 {

    width: 90px;
    height: 90px;

    left: 48%;

    animation-duration: 10s;
    animation-delay: 2s;

}

/* Bubble 5 */

.bubble5 {

    width: 55px;
    height: 55px;

    left: 63%;

    animation-duration: 11s;
    animation-delay: 2s;

}

/* Bubble 6 */

.bubble6 {

    width: 130px;
    height: 130px;

    left: 74%;

    animation-duration: 9s;
    animation-delay: 2s;

}

/* Bubble 7 */

.bubble7 {

    width: 80px;
    height: 80px;

    left: 87%;

    animation-duration: 8s;
    animation-delay: 1s;

}

/* Bubble 8 */

.bubble8 {

    width: 35px;
    height: 35px;

    left: 95%;

    animation-duration: 11s;
    animation-delay: 1s;

}

/* Bubble 9 */

.bubble9 {

    width: 35px;
    height: 35px;

    left: 55%;

    animation-duration: 7s;
    animation-delay: 0s;

}

@keyframes bubbleUp {

    0% {

        transform: translateY(0) scale(.8);

        opacity: 0;

    }

    15% {

        opacity: 1;

    }

    80% {

        opacity: .7;

    }

    100% {

        transform:

            translateY(-140vh) translateX(60px) scale(1.25) rotate(15deg);

        opacity: 0;

    }

}


/* Bubble dari tengah bawah */
.bubble-center {
    left: 50%;
    bottom: -100px;
    transform: translateX(-50%);
}

/* Lurus */
.center1 {
    width: 40px;
    height: 40px;
    animation: bubbleStraight 5s linear infinite;
}

/* Ke kiri */
.center2 {
    width: 55px;
    height: 55px;
    animation: bubbleLeft 4s linear infinite;
    animation-delay: 1s;
}

/* Ke kanan */
.center3 {
    width: 45px;
    height: 45px;
    animation: bubbleRight 5s linear infinite;
    animation-delay: 2s;
}

/* Lurus */
@keyframes bubbleStraight {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-130vh);
        opacity: 0;
    }
}

/* Lengkung kiri ±10° */
@keyframes bubbleLeft {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    25% {
        transform: translateX(calc(-50% - 15px)) translateY(-30vh);
    }

    50% {
        transform: translateX(calc(-50% - 35px)) translateY(-60vh);
    }

    75% {
        transform: translateX(calc(-50% - 60px)) translateY(-95vh);
    }

    100% {
        transform: translateX(calc(-50% - 90px)) translateY(-130vh);
        opacity: 0;
    }
}

/* Lengkung kanan ±10° */
@keyframes bubbleRight {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    25% {
        transform: translateX(calc(-50% + 15px)) translateY(-30vh);
    }

    50% {
        transform: translateX(calc(-50% + 35px)) translateY(-60vh);
    }

    75% {
        transform: translateX(calc(-50% + 60px)) translateY(-95vh);
    }

    100% {
        transform: translateX(calc(-50% + 90px)) translateY(-130vh);
        opacity: 0;
    }
}

/* ======================================
   ANIMASI MATI / TURUN KE BAWAH
======================================*/
@keyframes bubbleFallDown {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translateY(110vh) scale(0.6);
        opacity: 0;
    }
}

body.bubble-falling .bubble {
    animation: bubbleFallDown 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

body.bubble-off .bubble {
    display: none !important;
}