@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-20px) scale(1.1); }
    50% { transform: translateY(0) scale(1); }
    75% { transform: translateY(-10px) scale(1.05); }
}

@keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

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

@keyframes morph {
    0% { 
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        background: linear-gradient(45deg, var(--color1), var(--color2));
    }
    25% { 
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }
    50% { 
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
        background: linear-gradient(135deg, var(--color2), var(--color1));
    }
    75% { 
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
    100% { 
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        background: linear-gradient(225deg, var(--color1), var(--color2));
    }
}

@keyframes wave {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(10deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-10px) rotate(-10deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes particles {
    0% { 
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translate(var(--tx), var(--ty)) scale(1.2);
        opacity: 0.7;
    }
    100% { 
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}

@keyframes elastic {
    0% { transform: scale(1); }
    30% { transform: scale(1.25); }
    40% { transform: scale(0.75); }
    50% { transform: scale(1.15); }
    60% { transform: scale(0.85); }
    70% { transform: scale(1.05); }
    80% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-bounce {
    animation: bounce 0.6s infinite;
}

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

.animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom animation for bounce effect */
@keyframes customBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-20px) scale(1.1); }
    50% { transform: translateY(0) scale(1); }
    75% { transform: translateY(-10px) scale(1.05); }
}

.animate-custom-bounce {
    animation: customBounce 1s infinite;
}

/* Custom animation for rotating squares */
@keyframes rotateSquare {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}

.animate-rotate-square {
    animation: rotateSquare 2s linear infinite;
}