/* ==========================================================================
   ANIMATIONS CSS - TIBIA CHESS ENGINE
   ========================================================================== */

/* Selected Square Highlight (Medieval Golden Rune Glow) */
.square.selected {
    box-shadow: inset 0 0 0 2px #ffd700, inset 0 0 10px rgba(255, 215, 0, 0.85);
    filter: brightness(1.3);
}

.square.selected::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 215, 0, 0.28);
    pointer-events: none;
    z-index: 1;
}

/* Last Move Highlight */
.square.last-move {
    box-shadow: inset 0 0 0 2px #d4af37;
}

.square.last-move::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(212, 175, 55, 0.22);
    pointer-events: none;
    z-index: 1;
}

/* Legal Move Dot Indicator (Ember Gold Dot) */
.square.available-move::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(244, 207, 102, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.9);
    pointer-events: none;
    z-index: 3;
    animation: pulseMove 1.5s infinite alternate ease-in-out;
}

/* Available Capture Highlight (Crimson Flame Square) */
.square.available-capture {
    box-shadow: inset 0 0 0 2px #ff4444 !important;
}

.square.available-capture::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 68, 68, 0.38);
    pointer-events: none;
    z-index: 1;
    animation: flashCapture 1s infinite alternate;
}


/* King In Check Warning */
.square.in-check {
    box-shadow: inset 0 0 0 3px #ff003c, inset 0 0 12px #ff003c !important;
    animation: checkGlow 0.8s infinite alternate ease-in-out;
}

.square.in-check::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 0, 60, 0.4);
    pointer-events: none;
    z-index: 1;
}

/* Keyframe Animations */
@keyframes pulseMove {
    0% {
        transform: scale(0.85);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes flashCapture {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.7;
    }
}

@keyframes checkGlow {
    0% {
        filter: brightness(1);
    }
    100% {
        filter: brightness(1.4);
    }
}

/* Piece Spawn / Move Transition */
@keyframes pieceAppear {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.square .piece.anim-appear {
    animation: pieceAppear 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}