/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes glow {
    from {
        text-shadow: 0 0 10px var(--color-primary);
    }
    to {
        text-shadow: 0 0 20px var(--color-primary), 0 0 30px var(--color-primary);
    }
}

@keyframes rainbow-glow {
    0% { color: #ff0000; text-shadow: 0 0 5px #ff0000; }
    14% { color: #ff7f00; text-shadow: 0 0 5px #ff7f00; }
    28% { color: #ffff00; text-shadow: 0 0 5px #ffff00; }
    42% { color: #00ff00; text-shadow: 0 0 5px #00ff00; }
    57% { color: #0000ff; text-shadow: 0 0 5px #0000ff; }
    71% { color: #4b0082; text-shadow: 0 0 5px #4b0082; }
    85% { color: #8f00ff; text-shadow: 0 0 5px #8f00ff; }
    100% { color: #ff0000; text-shadow: 0 0 5px #ff0000; }
}

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

@keyframes dot-flashing {
    0% {
        background-color: var(--color-text-secondary);
    }
    50%, 100% {
        background-color: #4f545c;
    }
}