/* Custom Animations */
    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes pulse-slow {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.05); opacity: 0.8; }
    }

    @keyframes fade-in-up {
        from { 
            opacity: 0; 
            transform: translateY(20px); 
        }
        to { 
            opacity: 1; 
            transform: translateY(0); 
        }
    }

    @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes bounce-delay {
        0%, 80%, 100% { 
            transform: scale(0); 
        }
        40% { 
            transform: scale(1); 
        }
    }

    @keyframes orbit-1 {
        0% { transform: rotate(0deg) translateX(48px) rotate(0deg); }
        100% { transform: rotate(360deg) translateX(48px) rotate(-360deg); }
    }

    @keyframes orbit-2 {
        0% { transform: rotate(120deg) translateX(48px) rotate(-120deg); }
        100% { transform: rotate(480deg) translateX(48px) rotate(-480deg); }
    }

    @keyframes orbit-3 {
        0% { transform: rotate(240deg) translateX(48px) rotate(-240deg); }
        100% { transform: rotate(600deg) translateX(48px) rotate(-600deg); }
    }

    @keyframes orb-float-1 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(-20px, -10px) scale(1.1); }
    }

    @keyframes orb-float-2 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(15px, -15px) scale(1.05); }
    }

    @keyframes orb-float-3 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(-15px, 10px) scale(1.08); }
    }

    @keyframes orb-float-4 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(10px, 15px) scale(1.03); }
    }

    @keyframes progress-bar {
        0% { transform: translateX(-100%); }
        50% { transform: translateX(0%); }
        100% { transform: translateX(100%); }
    }

    /* Animation Classes */
    .animate-spin-slow {
        animation: spin-slow 3s linear infinite;
    }

    .animate-pulse-slow {
        animation: pulse-slow 2s ease-in-out infinite;
    }

    .animate-fade-in-up {
        animation: fade-in-up 1s ease-out forwards;
    }

    .animate-fade-in {
        animation: fade-in 1s ease-out forwards;
    }

    .animate-bounce-delay-1 {
        animation: bounce-delay 1.4s infinite ease-in-out both;
        animation-delay: -0.32s;
    }

    .animate-bounce-delay-2 {
        animation: bounce-delay 1.4s infinite ease-in-out both;
        animation-delay: -0.16s;
    }

    .animate-bounce-delay-3 {
        animation: bounce-delay 1.4s infinite ease-in-out both;
    }

    .animate-bounce-delay-4 {
        animation: bounce-delay 1.4s infinite ease-in-out both;
        animation-delay: 0.16s;
    }

    .animate-bounce-delay-5 {
        animation: bounce-delay 1.4s infinite ease-in-out both;
        animation-delay: 0.32s;
    }

    .animate-orbit-1 {
        animation: orbit-1 3s linear infinite;
    }

    .animate-orbit-2 {
        animation: orbit-2 3s linear infinite;
    }

    .animate-orbit-3 {
        animation: orbit-3 3s linear infinite;
    }

    .animate-orb-float-1 {
        animation: orb-float-1 8s ease-in-out infinite;
    }

    .animate-orb-float-2 {
        animation: orb-float-2 6s ease-in-out infinite;
        animation-delay: 1s;
    }

    .animate-orb-float-3 {
        animation: orb-float-3 7s ease-in-out infinite;
        animation-delay: 2s;
    }

    .animate-orb-float-4 {
        animation: orb-float-4 5s ease-in-out infinite;
        animation-delay: 3s;
    }

    .animate-progress-bar {
        animation: progress-bar 2s ease-in-out infinite;
    }

    /* Preloader Exit Animation */
    #preloader.fade-out {
        opacity: 0;
        visibility: hidden;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Loading Stats Animation */
    .loading-dots::after {
        content: '';
        animation: loading-dots 1.5s steps(4, end) infinite;
    }

    @keyframes loading-dots {
        0%, 20% { content: ''; }
        40% { content: '.'; }
        60% { content: '..'; }
        80%, 100% { content: '...'; }
    }