.floating-blob,
.floating-ring {
    position: absolute;
    display: block;
    background: rgba(255, 255, 255, 0.18);
    opacity: 0.95;
}

.floating-blob {
    border-radius: 45% 55% 48% 52% / 54% 46% 53% 47%;
    animation: blobFloat 16s ease-in-out infinite;
}

.floating-blob--xl {
    width: 400px;
    height: 400px;
    animation-duration: 20s;
}

.floating-blob--lg {
    width: 340px;
    height: 340px;
    animation-duration: 18s;
}

.floating-blob--md {
    width: 220px;
    height: 220px;
    animation-duration: 14s;
}

.floating-blob--sm {
    width: 140px;
    height: 140px;
    animation-duration: 10s;
}

.floating-ring {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: transparent;
    border: 50px solid rgba(255, 255, 255, 0.25);
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); */
    animation: ringDrift 20s linear infinite;
}

/* Ball Blur - 2 Layered Blur Effect */
.ball-2-blur {
    position: relative;
    width: 240px;
    height: 240px;
    filter: blur(150px);
    z-index: 0;
}

.ball-2-blur i {
    position: absolute;
    border-radius: 50%;
}

.ball-2-blur.md {
    width: 360px;
    height: 360px;
}

.ball-2-blur.lg {
    width: 500px;
    height: 500px;
}


.ball-2-blur i:nth-child(1) {
    width: 80%;
    height: 80%;
    bottom: 20%;
    left: 0;
    background: rgba(0, 220, 225, 1);
}

.ball-2-blur i:nth-child(2) {
    width: 80%;
    height: 80%;
    bottom: 0;
    right: 0;
    background: rgba(30, 80, 214, 1);
}

/* Ball Blur - 3 Layered Blur Effect */
.ball-3-blur {
    position: relative;
    width: 240px;
    height: 240px;
    filter: blur(150px);
    z-index: 0;
}

.ball-3-blur.md {
    width: 360px;
    height: 360px;
}

.ball-3-blur.lg {
    width: 500px;
    height: 500px;
}

.ball-3-blur i {
    position: absolute;
    border-radius: 50%;
}

/* #24EDFF - Cyan */
.ball-3-blur i:nth-child(1) {
    width: 80%;
    height: 80%;
    bottom: 20%;
    left: 0;
    background: rgba(36, 237, 255, 1);
    border-radius: 50%;
    opacity: 0.8;
}

.ball-3-blur i:nth-child(2) {
    width: 80%;
    height: 80%;
    bottom: 0;
    right: 0;
    background: rgb(22, 231, 231);
    border-radius: 50%;
    opacity: 0.85;
}


.ball-3-blur i:nth-child(3) {
    width: 80%;
    height: 80%;
    top: 0%;
    right: 0%;
    transform: translate(-50%, -50%);
    background: rgba(95, 30, 214, 1);
    border-radius: 50%;
    opacity: 0.9;
}

.japanese-pattern {
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='69.141' height='40' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffff00'/><path d='M69.212 40H46.118L34.57 20 46.118 0h23.094l11.547 20zM57.665 60H34.57L23.023 40 34.57 20h23.095l11.547 20zm0-40H34.57L23.023 0 34.57-20h23.095L69.212 0zM34.57 60H11.476L-.07 40l11.547-20h23.095l11.547 20zm0-40H11.476L-.07 0l11.547-20h23.095L46.118 0zM23.023 40H-.07l-11.547-20L-.07 0h23.094L34.57 20z'  stroke-width='0.5' stroke='%23ffffffff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    pointer-events: none;
}

@keyframes ballFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(10px, -15px) scale(1.05);
    }
    50% {
        transform: translate(-10px, 10px) scale(0.95);
    }
    75% {
        transform: translate(15px, 5px) scale(1.02);
    }
}

@keyframes blobFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    25% {
        transform: translate3d(15px, -25px, 0) scale(1.03);
    }
    50% {
        transform: translate3d(-20px, 10px, 0) scale(0.98);
    }
    75% {
        transform: translate3d(25px, 20px, 0) scale(1.04);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes ringDrift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    50% {
        transform: translate3d(20px, -10px, 0) rotate(6deg) scale(1.02);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(12deg) scale(1);
    }
}


@media (max-width: 991.98px) {
    .floating-blob--lg {
        width: 260px;
        height: 260px;
    }

    .floating-blob--md {
        width: 180px;
        height: 180px;
    }

    .floating-ring {
        width: 140px;
        height: 140px;
    }
}