/* 页面过渡动画 */
.screen {
    transition: opacity 0.5s ease;
}

.screen.active {
    opacity: 1;
    pointer-events: auto;
}

/* 元素淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* 元素上移淡入动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

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

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

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

.shake {
    animation: shake 0.8s ease-in-out;
}

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

.rotate {
    animation: rotate 2s linear infinite;
}

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

.bounce {
    animation: bounce 2s infinite;
}

/* 花园元素生长动画 */
@keyframes grow {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.grow {
    animation: grow 1s ease forwards;
}

/* 成就解锁动画 */
@keyframes unlock {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.unlock {
    animation: unlock 0.8s ease forwards;
}

/* 模态框动画 */
.modal {
    transition: opacity 0.3s ease;
    opacity: 0;
}

.modal.active {
    opacity: 1;
}

.modal-content {
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal.active .modal-content {
    transform: scale(1);
}

/* 呼吸练习动画 */
@keyframes breatheIn {
    from { transform: scale(1); background-color: var(--primary-light); }
    to { transform: scale(1.3); background-color: var(--primary-color); }
}

@keyframes breatheOut {
    from { transform: scale(1.3); background-color: var(--primary-color); }
    to { transform: scale(1); background-color: var(--primary-light); }
}

@keyframes breatheHold {
    from { transform: scale(1.3); }
    to { transform: scale(1.3); }
}

.breathe-in {
    animation: breatheIn 4s ease-in forwards;
}

.breathe-out {
    animation: breatheOut 6s ease-out forwards;
}

.breathe-hold {
    animation: breatheHold 2s linear forwards;
}

/* 时间线进度动画 */
@keyframes progress {
    from { width: 0; }
    to { width: 100%; }
}

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

/* 冥想动画 */
@keyframes meditateInhale {
    from { transform: scale(1); background-color: var(--primary-light); }
    to { transform: scale(1.3); background-color: var(--primary-color); }
}

@keyframes meditateExhale {
    from { transform: scale(1.3); background-color: var(--primary-color); }
    to { transform: scale(1); background-color: var(--primary-light); }
}

.meditate-inhale {
    animation: meditateInhale 4s ease-in forwards;
}

.meditate-exhale {
    animation: meditateExhale 4s ease-out forwards;
}

@keyframes meditationProgress {
    from { width: 0; }
    to { width: 100%; }
}

.meditation-progress-animation {
    animation: meditationProgress 300s linear forwards;
}

/* 按钮点击动画 */
@keyframes buttonClick {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.button-click {
    animation: buttonClick 0.3s ease;
}

/* 花园背景变化动画 */
@keyframes gardenGrow {
    0% { background-color: #E8F5E9; }
    50% { background-color: #C8E6C9; }
    100% { background-color: #A5D6A7; }
}

.garden-grow {
    animation: gardenGrow 2s ease forwards;
}

/* 益智游戏动画 */
@keyframes cardFlip {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(180deg); }
}

@keyframes cardMatch {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.card-match {
    animation: cardMatch 0.5s ease;
}

@keyframes cardShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}

.card-shake {
    animation: cardShake 0.5s ease;
}

@keyframes scoreIncrease {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: var(--success-color); }
    100% { transform: scale(1); }
}

.score-increase {
    animation: scoreIncrease 0.5s ease;
}

@keyframes timerWarning {
    0%, 100% { color: var(--text-color); }
    50% { color: var(--danger-color); }
}

.timer-warning {
    animation: timerWarning 1s infinite;
}