/* 动画效果样式 */

/* 樱花飘落动画 */
@keyframes cherryBlossomFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.cherry-petal {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffb6c1;
    border-radius: 50% 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

.cherry-petal.active {
    animation-name: cherryBlossomFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* 单元格点击动画 */
@keyframes cellClick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.game-cell.clicked {
    animation: cellClick 0.3s ease;
}

.character-cell.clicked {
    animation: cellClick 0.3s ease;
}

/* 字符移动动画 */
@keyframes characterMove {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(var(--move-x), var(--move-y)) scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: translate(var(--target-x), var(--target-y)) scale(1);
        opacity: 1;
    }
}

.character-moving {
    animation: characterMove 0.5s ease-in-out;
    z-index: 10;
}

/* 成功匹配动画 */
@keyframes matchSuccess {
    0% {
        transform: scale(1);
        background-color: var(--original-color);
    }
    50% {
        transform: scale(1.2);
        background-color: #4CAF50;
    }
    100% {
        transform: scale(1);
        background-color: var(--original-color);
    }
}

.cell-matched {
    animation: matchSuccess 0.6s ease;
}

/* 错误提示动画 */
@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

.cell-error {
    animation: errorShake 0.5s ease;
    background-color: #ff6b6b !important;
}

/* 关卡完成动画 */
@keyframes levelComplete {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.level-complete {
    animation: levelComplete 1s ease;
}

/* 加载动画 */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

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

/* 提示区域闪烁动画 */
@keyframes hintBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.hint-area.blinking {
    animation: hintBlink 2s ease-in-out infinite;
}

/* 眼睛跟随动画 */
@keyframes eyeFollow {
    0% {
        transform: translate(-50%, -50%);
    }
    25% {
        transform: translate(-40%, -50%);
    }
    50% {
        transform: translate(-50%, -40%);
    }
    75% {
        transform: translate(-60%, -50%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

.eye-icon.animated .iris {
    animation: eyeFollow 3s ease-in-out infinite;
}

/* 网格出现动画 */
@keyframes gridAppear {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.game-grid.appearing {
    animation: gridAppear 0.8s ease-out;
}

.character-pool.appearing {
    animation: gridAppear 0.8s ease-out 0.2s both;
}

/* 分数增加动画 */
@keyframes scoreIncrease {
    0% {
        transform: scale(1);
        color: inherit;
    }
    50% {
        transform: scale(1.3);
        color: #4CAF50;
    }
    100% {
        transform: scale(1);
        color: inherit;
    }
}

.score-increasing {
    animation: scoreIncrease 0.6s ease;
}

/* 用户信息淡入动画 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-info.fade-in {
    animation: fadeIn 0.8s ease-out;
}

/* 游戏状态更新动画 */
@keyframes statusUpdate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.game-status.updating {
    animation: statusUpdate 0.4s ease;
}

/* 响应式动画调整 */
@media (max-width: 480px) {
    .cherry-petal {
        width: 6px;
        height: 6px;
    }
    
    @keyframes cellClick {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            transform: scale(1);
        }
    }
}