/* Background Animations */
@keyframes backgroundMove {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

@keyframes backgroundPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-30px) rotate(180deg);
        opacity: 0.8;
    }
}

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

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframe Animations */
@keyframes faviconGlow {
    0% { 
        filter: drop-shadow(0 0 20px var(--loader-primary));
        transform: scale(1);
    }
    100% { 
        filter: drop-shadow(0 0 30px var(--loader-secondary)) drop-shadow(0 0 40px var(--loader-accent));
        transform: scale(1.1);
    }
}

@keyframes ringRotate {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

@keyframes coreGlow {
    0% { 
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 
            0 0 20px var(--loader-primary),
            0 0 40px var(--loader-secondary),
            0 0 60px var(--loader-accent);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 
            0 0 30px var(--loader-primary),
            0 0 60px var(--loader-secondary),
            0 0 90px var(--loader-accent);
    }
}

@keyframes particleOrbit {
    0% { 
        transform: rotate(0deg) translateX(100px) rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% { 
        transform: rotate(360deg) translateX(100px) rotate(-360deg);
        opacity: 1;
    }
}

@keyframes textPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes textFade {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
}

@keyframes progressFill {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Modal Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Keyframe Animations */
@keyframes faviconGlow {
    0% { 
        filter: drop-shadow(0 0 20px var(--loader-primary));
        transform: scale(1);
    }
    100% { 
        filter: drop-shadow(0 0 30px var(--loader-secondary)) drop-shadow(0 0 40px var(--loader-accent));
        transform: scale(1.1);
    }
}

@keyframes ringRotate {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

@keyframes coreGlow {
    0% { 
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 
            0 0 20px var(--loader-primary),
            0 0 40px var(--loader-secondary),
            0 0 60px var(--loader-accent);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 
            0 0 30px var(--loader-primary),
            0 0 60px var(--loader-secondary),
            0 0 90px var(--loader-accent);
    }
}

@keyframes particleOrbit {
    0% { 
        transform: rotate(0deg) translateX(100px) rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% { 
        transform: rotate(360deg) translateX(100px) rotate(-360deg);
        opacity: 1;
    }
}

@keyframes textPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes textFade {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
}

@keyframes progressFill {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Background Animations */
@keyframes backgroundMove {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

@keyframes backgroundPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-30px) rotate(180deg);
        opacity: 0.8;
    }
}

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

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Modal Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}