/* ==================== 动画样式 ==================== */

/* 星星弹出动画 */
@keyframes starPop {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(180deg); opacity: 1; }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

.star-pop {
    animation: starPop 0.5s ease-out forwards;
}

/* 答对闪烁 */
@keyframes correctFlash {
    0%, 100% { background-color: #E8F5E9; }
    50% { background-color: #C8E6C9; }
}

.correct-flash {
    animation: correctFlash 0.3s ease 2;
}

/* 答错抖动 */
@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.wrong-shake {
    animation: wrongShake 0.3s ease;
}

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

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* 弹跳动画 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

.bounce {
    animation: bounce 1s ease infinite;
}

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

.pulse {
    animation: pulse 2s ease infinite;
}

/* 旋转动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* 成就解锁动画 */
@keyframes achievementUnlock {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.achievement-unlock {
    animation: achievementUnlock 0.8s ease-out forwards;
}

/* 打卡成功动画 */
@keyframes checkinSuccess {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.checkin-success {
    animation: checkinSuccess 0.6s ease-out forwards;
}

/* 计时器跳动 */
@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

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

/* 答案输入框聚焦 */
@keyframes inputFocus {
    0% { box-shadow: 0 0 0 0 rgba(78, 205, 196, 0.4); }
    100% { box-shadow: 0 0 0 10px rgba(78, 205, 196, 0); }
}

.input-focus {
    animation: inputFocus 1s ease infinite;
}

/* 卡片悬浮效果 */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* 按钮点击效果 */
.btn-click {
    transition: transform 0.1s ease;
}

.btn-click:active {
    transform: scale(0.95);
}

/* 进度条动画 */
@keyframes progressFill {
    from { width: 0; }
    to { width: var(--progress); }
}

.progress-fill {
    animation: progressFill 1s ease forwards;
}

/* 数字滚动 */
@keyframes numberRoll {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.number-roll {
    animation: numberRoll 0.5s ease forwards;
}

/* 烟花效果（答对连续题目） */
@keyframes firework {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

.firework {
    position: fixed;
    pointer-events: none;
    animation: firework 1s ease-out forwards;
}

/* 加载动画 */
@keyframes loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading {
    width: 40px;
    height: 40px;
    border: 4px solid #E0E0E0;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: loading 1s linear infinite;
}