/**
 * AlienEcho - effects.css
 * Animations and visual effects
 */

/* Title pulse animation */
@keyframes pulse-glow {
    0%, 100% { 
        text-shadow: 0 0 20px var(--color-primary); 
    }
    50% { 
        text-shadow: 0 0 30px var(--color-primary), 
                     0 0 40px var(--color-primary); 
    }
}

.app-title {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Alien listening pulse rings */
.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: pulse-ring 3s ease-out infinite;
}

.pulse-ring:nth-child(2) {
    animation-delay: 1s;
}

.pulse-ring:nth-child(3) {
    animation-delay: 2s;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Listening active button animation */
#alien-panel .main-action-btn.listening-active {
    border-color: var(--color-success);
    color: var(--color-success);
    background: rgba(0, 255, 0, 0.04);
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.08), 
                0 0 15px rgba(0, 255, 0, 0.15);
    animation: pulseBorder 2s ease-in-out infinite;
}

@keyframes pulseBorder {
    0%, 100% { 
        box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.08), 
                    0 0 15px rgba(0, 255, 0, 0.15);
    }
    50% { 
        box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.12), 
                    0 0 25px rgba(0, 255, 0, 0.25);
    }
}