/* Animation Styles for WebGammon */

/* Dice Rolling Animation */
@keyframes diceRoll {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1.2); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

.die.rolling {
    animation: diceRoll 0.8s ease-in-out;
}

/* Checker Movement Animation */
@keyframes checkerMove {
    0% {
        transform: scale(1);
        z-index: 100;
    }
    50% {
        transform: scale(1.2) translateY(-20px);
        z-index: 100;
    }
    100% {
        transform: scale(1);
        z-index: 10;
    }
}

.checker.animating {
    animation: checkerMove 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Checker Hit Animation */
@keyframes checkerHit {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.3) rotate(10deg); }
    50% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.checker.hit {
    animation: checkerHit 0.8s ease-in-out;
}

/* Checker Bear-off Animation */
@keyframes checkerBearOff {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.3) translateY(-30px);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.8) translateY(0);
        opacity: 1;
    }
}

.checker.bearing-off {
    animation: checkerBearOff 1s ease-in-out;
}

/* Point Highlight Pulse */
@keyframes pointPulse {
    0% { box-shadow: inset 0 0 5px rgba(39, 174, 96, 0.3); }
    50% { box-shadow: inset 0 0 15px rgba(39, 174, 96, 0.7); }
    100% { box-shadow: inset 0 0 5px rgba(39, 174, 96, 0.3); }
}

.point.valid-destination {
    animation: pointPulse 2s ease-in-out infinite;
}

/* Selected Checker Glow */
@keyframes checkerGlow {
    0% { box-shadow: 0 0 10px #e74c3c; }
    50% { box-shadow: 0 0 20px #e74c3c, 0 0 30px #e74c3c; }
    100% { box-shadow: 0 0 10px #e74c3c; }
}

.checker.selected {
    animation: checkerGlow 1.5s ease-in-out infinite;
}

/* Game Start Animation */
@keyframes gameStart {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.board.game-starting {
    animation: gameStart 1s ease-out;
}

/* Turn Change Animation */
@keyframes turnChange {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.turn-indicator.changing {
    animation: turnChange 0.5s ease-in-out;
}

/* Win Celebration Animation */
@keyframes celebrate {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(5deg); }
    75% { transform: scale(1.1) rotate(-5deg); }
}

.game-header.celebrating {
    animation: celebrate 0.6s ease-in-out 3;
}

/* Modal Fade In */
@keyframes modalFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.modal.show .modal-content {
    animation: modalFadeIn 0.3s ease-out;
}

/* Button Press Animation */
@keyframes buttonPress {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.btn.pressed {
    animation: buttonPress 0.2s ease-in-out;
}

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

.loading-spinner {
    animation: spin 1s linear infinite;
}

/* Checker Stack Animation */
@keyframes stackBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.checker-stack.bouncing .checker {
    animation: stackBounce 0.4s ease-in-out;
}

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

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

/* Success Flash Animation */
@keyframes successFlash {
    0% { background-color: transparent; }
    50% { background-color: rgba(39, 174, 96, 0.3); }
    100% { background-color: transparent; }
}

.success-flash {
    animation: successFlash 0.6s ease-in-out;
}

/* Fade In/Out Utilities */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

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

.fade-out {
    animation: fadeOut 0.5s ease-in-out;
}

/* Slide Animations */
@keyframes slideInFromTop {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideInFromBottom {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.slide-in-top {
    animation: slideInFromTop 0.5s ease-out;
}

.slide-in-bottom {
    animation: slideInFromBottom 0.5s ease-out;
}

/* Hover Effects */
.checker:hover {
    transition: all 0.2s ease-in-out;
    transform: scale(1.05);
    filter: brightness(1.1);
}

.point:hover {
    transition: all 0.2s ease-in-out;
    filter: brightness(1.1);
}

.btn:hover {
    transition: all 0.2s ease-in-out;
    transform: translateY(-2px);
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Performance optimizations */
.checker,
.point,
.die {
    will-change: auto; /* Only set will-change when actually animating */
}

.checker.animating,
.die.rolling {
    will-change: transform, opacity;
    backface-visibility: hidden; /* Prevents sub-pixel rendering issues */
    transform-style: preserve-3d; /* Ensures consistent rendering */
}

/* Optimize checker rendering during animations */
.checker.animating {
    contain: layout style paint; /* Isolate layout changes */
    isolation: isolate; /* Create new stacking context */
}

/* Smooth transitions for interactive elements */
.checker,
.point,
.btn {
    transition: all 0.2s ease-in-out;
}

/* Ensure animations don't interfere with layout */
.animating {
    pointer-events: none;
    position: relative; /* Ensure element stays in document flow */
}

/* Prevent layout shifts during animations */
.checker-stack {
    contain: layout; /* Isolate layout calculations to this container */
}

.point {
    contain: layout style; /* Prevent point changes from affecting other elements */
}

/* Z-index management for animations */
.checker.selected,
.checker.dragging,
.checker.animating {
    z-index: 1000;
}

/* Custom easing functions */
.smooth-bounce {
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.smooth-ease {
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.quick-snap {
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}