/* ===== CARD ANIMATIONS ===== */

@keyframes dealCard {
    0% {
        transform: translateX(-200px) translateY(-200px) rotate(-20deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes flipCard {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes messageGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5),
                     0 2px 4px rgba(0, 0, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.8),
                     0 0 30px rgba(255, 215, 0, 0.6),
                     0 2px 4px rgba(0, 0, 0, 0.5);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes chipStack {
    0% {
        transform: translateY(-50px) scale(0.5);
        opacity: 0;
    }
    60% {
        transform: translateY(5px) scale(1.1);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes winPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 40px rgba(46, 204, 113, 0.8),
                    0 0 60px rgba(46, 204, 113, 0.6);
    }
}

@keyframes losePulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ===== ANIMATION CLASSES ===== */

.card.dealing {
    animation: dealCard 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.card.flipping {
    animation: flipCard 0.6s ease-in-out;
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

.slide-out {
    animation: slideOut 0.3s ease-in;
}

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

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

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

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

.bounce {
    animation: bounce 0.6s ease-in-out;
}

.chip-stacking {
    animation: chipStack 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.win-animation {
    animation: winPulse 1s ease-in-out 3;
}

.lose-animation {
    animation: losePulse 0.5s ease-in-out 2;
}

/* ===== BUTTON ANIMATIONS ===== */

.button-press {
    animation: buttonPress 0.2s ease-in-out;
}

@keyframes buttonPress {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
}

/* ===== TRANSITIONS ===== */

.smooth-transition {
    transition: all 0.3s ease;
}

.fast-transition {
    transition: all 0.15s ease;
}

.slow-transition {
    transition: all 0.6s ease;
}

/* ===== SCREEN TRANSITIONS ===== */

@keyframes screenFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes screenFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.screen-enter {
    animation: screenFadeIn 0.4s ease-out;
}

.screen-exit {
    animation: screenFadeOut 0.4s ease-in;
}

/* ===== MODAL ANIMATIONS ===== */

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
}

.modal-enter .modal-content {
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.modal-exit .modal-content {
    animation: modalSlideOut 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ===== CHIPS ANIMATION ===== */

@keyframes chipsUpdate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
        color: #2ecc71;
    }
    100% {
        transform: scale(1);
    }
}

.chips-increase {
    animation: chipsUpdate 0.5s ease-out;
}

@keyframes chipsDecrease {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
        color: #e74c3c;
    }
    100% {
        transform: scale(1);
    }
}

.chips-decrease {
    animation: chipsDecrease 0.5s ease-out;
}

/* ===== VALUE UPDATE ANIMATION ===== */

@keyframes valueUpdate {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

.value-update {
    animation: valueUpdate 0.3s ease-out;
}

/* ===== BLACKJACK SPECIAL ANIMATION ===== */

@keyframes blackjackCelebration {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(-5deg);
    }
    75% {
        transform: scale(1.2) rotate(5deg);
    }
}

.blackjack-celebration {
    animation: blackjackCelebration 0.6s ease-in-out 3;
}

/* ===== GLOW EFFECTS ===== */

@keyframes glowGold {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6),
                    0 0 30px rgba(255, 215, 0, 0.4);
    }
}

.glow-gold {
    animation: glowGold 2s ease-in-out infinite;
}

@keyframes glowGreen {
    0%, 100% {
        box-shadow: 0 0 5px rgba(46, 204, 113, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(46, 204, 113, 0.6),
                    0 0 30px rgba(46, 204, 113, 0.4);
    }
}

.glow-green {
    animation: glowGreen 2s ease-in-out infinite;
}

@keyframes glowRed {
    0%, 100% {
        box-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.6),
                    0 0 30px rgba(231, 76, 60, 0.4);
    }
}

.glow-red {
    animation: glowRed 2s ease-in-out infinite;
}