:root {
    --parallax-x: 0px;
    --parallax-y: 0px
}

@keyframes float-subtle {
    0% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-25px) rotate(5deg)
    }

    100% {
        transform: translateY(0) rotate(0)
    }
}

@keyframes float-dynamic {
    0% {
        transform: translate(var(--parallax-x), var(--parallax-y)) translateY(0) scale(1)
    }

    25% {
        transform: translate(var(--parallax-x), var(--parallax-y)) translateY(-20px) scale(1.02)
    }

    50% {
        transform: translate(var(--parallax-x), var(--parallax-y)) translateY(10px) scale(.98)
    }

    75% {
        transform: translate(var(--parallax-x), var(--parallax-y)) translateY(-15px) scale(1.03)
    }

    100% {
        transform: translate(var(--parallax-x), var(--parallax-y)) translateY(0) scale(1)
    }
}

@keyframes blink-soft {

    0%,
    100% {
        box-shadow: 0 0 5px 2px rgba(118, 203, 255, .4), inset 0 0 2px rgba(118, 203, 255, .2);
        opacity: 1
    }

    50% {
        box-shadow: 0 0 15px 5px rgba(118, 203, 255, .7), inset 0 0 4px rgba(118, 203, 255, .5);
        opacity: .6
    }
}

.shape {
    position: absolute;
    border-radius: 9999px;
    opacity: .1;
    filter: blur(40px);
    transition: transform .3s ease-out;
    will-change: transform
}

.shape-1 {
    width: 250px;
    height: 250px;
    background-color: #3b82f6;
    top: 5%;
    left: 10%;
    animation: float-dynamic 12s ease-in-out infinite alternate
}

.shape-2 {
    width: 180px;
    height: 180px;
    background-color: #8b5cf6;
    top: 65%;
    right: 5%;
    animation: float-dynamic 14s ease-in-out infinite alternate;
    animation-delay: -3s
}

.shape-3 {
    width: 120px;
    height: 120px;
    background-color: #10b981;
    bottom: 15%;
    left: 20%;
    animation: float-dynamic 10s ease-in-out infinite alternate;
    animation-delay: -5s
}

.shape-4 {
    width: 160px;
    height: 160px;
    background-color: #ec4899;
    top: 20%;
    right: 20%;
    animation: float-dynamic 13s ease-in-out infinite alternate;
    animation-delay: -1s
}

@keyframes progress-bar {
    0% {
        width: 0%
    }

    100% {
        width: 100%
    }
}

.progress-bar-animated {
    animation: progress-bar 604800s linear forwards
}