.sbf-floating-shape-wrapper {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
}

.sbf-floating-shape-wrapper.shape-circle {
    border-radius: 50%;
}

.sbf-floating-shape-wrapper.shape-square {
    border-radius: 18px;
}

.sbf-floating-shape-wrapper.shape-blob {
    border-radius: 58% 42% 37% 63% / 43% 39% 61% 57%;
}

.sbf-floating-shape-wrapper.shape-ring {
    border-radius: 50%;
    background: transparent !important;
    border: 12px solid;
}

.sbf-floating-shape-wrapper.shape-triangle {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    filter: none !important;
}

.sbf-floating-shape-wrapper.shape-triangle .sbf-triangle-shape {
    display: block;
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 120px solid;
}

.sbf-floating-shape-wrapper.anim-float {
    animation: sbfShapeFloat 6s ease-in-out infinite;
}

.sbf-floating-shape-wrapper.anim-rotate {
    animation: sbfShapeRotate 14s linear infinite;
}

.sbf-floating-shape-wrapper.anim-drift {
    animation: sbfShapeDrift 8s ease-in-out infinite;
}

.sbf-floating-shape-wrapper.anim-pulse {
    animation: sbfShapePulse 4s ease-in-out infinite;
}

@keyframes sbfShapeFloat {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -22px, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes sbfShapeRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes sbfShapeDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(25px, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes sbfShapePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}