/**
 * 文件路径: /home/ubuntu/talktalk_backend/public/css/animations.css
 * 功能用途: 动画效果定义，包括关键帧动画、过渡效果等
 * 版本: v3.0
 * 最后修改: 2025-11-27 - 切换到可爱卡通主题
 */

/* ==================== 动画效果 ==================== */

/* 通用弹入效果 */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* 淡入上浮 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 旋转 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 脉冲 (通用) */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 语音按钮强烈脉冲 */
.voice-btn-pulse {
    animation: strong-pulse 1.5s infinite !important;
}

@keyframes strong-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 138, 101, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(255, 138, 101, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 138, 101, 0); }
}

/* 连接中动画 */
@keyframes connecting-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* 录音中动画 */
@keyframes recording-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(231, 76, 60, 0.5); }
    50% { transform: scale(1.08); box-shadow: 0 0 25px rgba(231, 76, 60, 0.8); }
}

/* 麦克风波纹 */
@keyframes pulse-microphone {
    0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7); }
    50% { box-shadow: 0 0 0 10px rgba(255, 165, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
}

/* 光标闪烁 */
@keyframes blinkCursor {
    0%, 45% { opacity: 1; }
    46%, 100% { opacity: 0.3; }
}

/* 通用闪烁 */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* 浮动动画 (云朵等) */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ==================== 麦克风语音检测动画 ==================== */

/* 语音检测脉冲动画 - 绿色表示语音被有效识别 */
@keyframes speech-detected-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 12px rgba(76, 175, 80, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* 语音检测波纹动画 - 多层波纹效果 */
@keyframes speech-ripple {
    0% {
        box-shadow: 
            0 0 0 0 rgba(76, 175, 80, 0.6),
            0 0 0 0 rgba(76, 175, 80, 0.4),
            0 0 0 0 rgba(76, 175, 80, 0.2);
    }
    100% {
        box-shadow: 
            0 0 0 8px rgba(76, 175, 80, 0),
            0 0 0 16px rgba(76, 175, 80, 0),
            0 0 0 24px rgba(76, 175, 80, 0);
    }
}

/* 麦克风图标呼吸动画 */
@keyframes mic-icon-breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}