/* 动画效果 */

/* 弹跳动画 - 答对时 */
@keyframes bounce {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(0.9);
    }
    75% {
        transform: scale(1.1);
    }
}

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

/* 摇晃动画 - 答错时 */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

.animate-shake {
    animation: shake 0.5s ease;
}

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease;
}

/* 淡出动画 */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.animate-fadeOut {
    animation: fadeOut 0.3s ease;
}

/* 脉冲动画 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.animate-pulse {
    animation: pulse 1s ease infinite;
}

/* 按钮按下效果 */
@keyframes buttonPress {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.animate-press {
    animation: buttonPress 0.2s ease;
}

/* 数字滚动动画 */
@keyframes numberRoll {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-roll {
    animation: numberRoll 0.4s ease;
}

/* 闪烁动画 - 连续答对提示 */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-blink {
    animation: blink 0.5s ease 3;
}

/* 彩虹文字动画 */
@keyframes rainbow {
    0% {
        color: #FF6B6B;
    }
    20% {
        color: #FFD700;
    }
    40% {
        color: #5CB85C;
    }
    60% {
        color: #4A90E2;
    }
    80% {
        color: #9B59B6;
    }
    100% {
        color: #FF6B6B;
    }
}

.animate-rainbow {
    animation: rainbow 2s linear infinite;
}

/* 星星闪烁 */
@keyframes starTwinkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.7;
    }
}

.animate-star {
    animation: starTwinkle 1s ease infinite;
}

/* 从右侧滑入 */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slideInRight {
    animation: slideInRight 0.5s ease;
}

/* 从右侧滑出 */
@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.animate-slideOutRight {
    animation: slideOutRight 0.5s ease;
}