@keyframes modernFloat {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-10px, -15px) rotate(0.2deg);
    }

    66% {
        transform: translate(-20px, -5px) rotate(-0.1deg);
    }

    100% {
        transform: translate(-30px, -20px) rotate(0deg);
    }
}

@keyframes modernFade {
    0%, 100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes modernPulse {
    0%, 100% {
        transform: scale(1) translateY(0px);
        opacity: 0.15;
    }

    33% {
        transform: scale(1.1) translateY(-10px);
        opacity: 0.25;
    }

    66% {
        transform: scale(0.9) translateY(5px);
        opacity: 0.2;
    }
}

/* BEFORE element utility */
.left-before {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><pattern id='bitwise-pattern' width='20' height='20' patternUnits='userSpaceOnUse'><rect x='1' y='1' width='4' height='4' fill='rgba(255, 255, 255, 0.08)' rx='0.5'/><rect x='8' y='8' width='6' height='6' fill='rgba(255, 255, 255, 0.06)' rx='0.5'/><rect x='12' y='2' width='3' height='3' fill='rgba(255, 255, 255, 0.05)' rx='0.3'/><rect x='3' y='12' width='5' height='2' fill='rgba(255, 255, 255, 0.07)' rx='0.3'/><rect x='16' y='6' width='2' height='4' fill='rgba(255, 255, 255, 0.06)' rx='0.3'/><rect x='6' y='16' width='4' height='3' fill='rgba(255, 255, 255, 0.08)' rx='0.3'/></pattern></defs><rect width='80' height='80' fill='url(%23bitwise-pattern)'/></svg>");
    animation: modernFloat 45s linear infinite, modernFade 12s ease-in-out infinite;
}

/* AFTER element utility */
.left-after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100% );
    filter: blur(60px);
    animation: modernPulse 10s ease-in-out infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fadeIn {
    animation: fadeIn .6s ease-out;
}

    /*Error & Success message Animations*/
    @keyframes spin {
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes slide-in {
        from {
            opacity: 0;
            transform: translateY(15px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slide-out {
        from {
            opacity: 1;
            transform: translateY(0);
        }

        to {
            opacity: 0;
            transform: translateY(-15px);
        }
    }

    @keyframes progressBar {
        from {
            width: 100%;
        }

        to {
            width: 0%;
        }
    }

    @keyframes shake {
        0%, 100% {
            transform: translateX(0);
        }

        25% {
            transform: translateX(-4px);
        }

        75% {
            transform: translateX(4px);
        }
    }

    .animate-shake {
        animation: shake 0.3s ease-in-out;
    }

/* Loader bars */
@keyframes bar1 {
    0%,40% {
        height: 20%
    }

    50%,90% {
        height: 100%
    }
}

@keyframes bar2 {
    0%,40% {
        height: 40%
    }

    50%,90% {
        height: 80%
    }
}

@keyframes bar3 {
    0% {
        height: 60%
    }

    100% {
        height: 60%
    }
}

@keyframes bar4 {
    0%,40% {
        height: 80%
    }

    50%,90% {
        height: 40%
    }
}

@keyframes bar5 {
    0%,40% {
        height: 100%
    }

    50%,90% {
        height: 20%
    }
}

.animate-bar1 {
    animation: bar1 2s infinite;
}

.animate-bar2 {
    animation: bar2 2s infinite;
}

.animate-bar3 {
    animation: bar3 2s infinite;
}

.animate-bar4 {
    animation: bar4 2s infinite;
}

.animate-bar5 {
    animation: bar5 2s infinite;
}

@keyframes ball {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(32px);
    }

    100% {
        transform: translateX(0);
    }
}

.animate-ball {
    animation: ball 2s infinite;
}