/* Animation Styles */

/* Piece Movement Animation */
@keyframes pieceMove {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2) translateY(-10px);
    }
    100% {
        transform: scale(1);
    }
}

.piece.moving {
    animation: pieceMove 0.3s ease-in-out;
}

/* Capture Animation */
@keyframes captureFlash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: scale(1.5) rotate(180deg);
    }
}

.piece.captured {
    animation: captureFlash 0.5s ease-out forwards;
}

/* Check Animation */
@keyframes checkShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.piece.in-check-piece {
    animation: checkShake 0.5s ease-in-out;
}

/* Castling Animation */
@keyframes castle {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: translateX(0) scale(1);
    }
}

.piece.castling {
    animation: castle 0.6s ease-in-out;
}

/* Illegal Move Shake */
@keyframes illegalMove {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.square.illegal-move {
    animation: illegalMove 0.4s ease-in-out;
}

/* Piece Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.piece.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Highlight Pulse for Valid Moves */
@keyframes validMovePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

.square.valid-move::after {
    animation: validMovePulse 1.5s ease-in-out infinite;
}

/* Game Over Flash */
@keyframes gameOverFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.board-container.game-over .chessboard {
    animation: gameOverFlash 1s ease-in-out 3;
}

/* Timer Warning */
@keyframes timerWarning {
    0%, 100% {
        transform: scale(1);
        color: var(--danger-color);
    }
    50% {
        transform: scale(1.05);
        color: #ff6666;
    }
}

.player-clock.critical {
    animation: timerWarning 0.5s ease-in-out infinite;
}

/* Loading Spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 20px auto;
}

/* Thinking Indicator for AI */
@keyframes thinking {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.ai-thinking::after {
    content: '...';
    animation: thinking 1s ease-in-out infinite;
}

/* Slide In Animation for Modals */
@keyframes slideInUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal.show .modal-content {
    animation: slideInUp 0.4s ease-out;
}

/* Board Flip Animation */
@keyframes flipBoard {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

.chessboard.flipping {
    animation: flipBoard 0.6s ease-in-out;
}

/* Success Glow */
@keyframes successGlow {
    0%, 100% {
        box-shadow: 0 0 5px var(--secondary-color);
    }
    50% {
        box-shadow: 0 0 20px var(--secondary-color);
    }
}

.success-glow {
    animation: successGlow 1s ease-in-out;
}

/* Move Highlight Trail */
@keyframes moveTrail {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

.move-trail {
    position: absolute;
    pointer-events: none;
    background: radial-gradient(circle, rgba(26, 115, 232, 0.5), transparent);
    border-radius: 50%;
    animation: moveTrail 0.5s ease-out forwards;
}