/* Advanced Card Animations and Effects */

/* Card flip animation for dealing */
@keyframes cardDeal {
    0% {
        transform: translateY(-100px) rotateY(180deg);
        opacity: 0;
    }
    50% {
        transform: translateY(0) rotateY(90deg);
        opacity: 0.5;
    }
    100% {
        transform: translateY(0) rotateY(0deg);
        opacity: 1;
    }
}

.card.dealing {
    animation: cardDeal 0.6s ease-out;
}

/* Card play animation */
@keyframes cardPlay {
    0% {
        transform: translateY(0) scale(1);
        z-index: 1;
    }
    50% {
        transform: translateY(-50px) scale(1.1);
        z-index: 10;
    }
    100% {
        transform: translateY(-200px) scale(0.8);
        opacity: 0;
        z-index: 10;
    }
}

.card.playing {
    animation: cardPlay 0.8s ease-in-out forwards;
}

/* Card draw animation */
@keyframes cardDraw {
    0% {
        transform: translateX(-100px) rotateY(180deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }
}

.card.drawing {
    animation: cardDraw 0.5s ease-out;
}

/* Glow effect for playable cards */
@keyframes cardGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.6);
    }
    50% {
        box-shadow: 0 0 30px rgba(102, 126, 234, 0.9);
    }
}

.card.playable {
    animation: cardGlow 2s ease-in-out infinite;
}

/* Shake animation for invalid moves */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.card.invalid {
    animation: shake 0.5s ease-in-out;
    border: 2px solid #dc3545;
}

/* Pulse animation for current player indicator */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.other-player.current-turn {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Card hover effects enhancement */
.card:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    z-index: 5;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Stagger animation for hand cards */
.hand-cards .card {
    animation-delay: calc(var(--card-index) * 0.1s);
}

.hand-cards .card:nth-child(1) { --card-index: 1; }
.hand-cards .card:nth-child(2) { --card-index: 2; }
.hand-cards .card:nth-child(3) { --card-index: 3; }
.hand-cards .card:nth-child(4) { --card-index: 4; }
.hand-cards .card:nth-child(5) { --card-index: 5; }
.hand-cards .card:nth-child(6) { --card-index: 6; }
.hand-cards .card:nth-child(7) { --card-index: 7; }
.hand-cards .card:nth-child(8) { --card-index: 8; }
.hand-cards .card:nth-child(9) { --card-index: 9; }
.hand-cards .card:nth-child(10) { --card-index: 10; }

/* Color chooser animation */
@keyframes colorChooserSlide {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.color-chooser:not(.hidden) {
    animation: colorChooserSlide 0.3s ease-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);
    }
}

.winner-info {
    animation: celebrate 0.6s ease-in-out 3;
}

/* Loading spinner enhancement */
@keyframes spinEnhanced {
    0% {
        transform: rotate(0deg);
        border-top-color: #667eea;
    }
    25% {
        border-top-color: #764ba2;
    }
    50% {
        transform: rotate(180deg);
        border-top-color: #667eea;
    }
    75% {
        border-top-color: #764ba2;
    }
    100% {
        transform: rotate(360deg);
        border-top-color: #667eea;
    }
}

.spinner {
    animation: spinEnhanced 2s linear infinite;
}

/* Notification slide animations */
@keyframes notificationSlideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes notificationSlideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification {
    animation: notificationSlideIn 0.3s ease-out;
}

.notification.removing {
    animation: notificationSlideOut 0.3s ease-in;
}

/* Deck pile animation */
@keyframes deckPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    50% {
        box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
    }
}

.deck-pile:hover .card-back {
    animation: deckPulse 1s ease-in-out infinite;
}

/* Screen transition animations */
@keyframes screenFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Button press effect */
.btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Enhanced card selection */
.card.selected {
    transform: translateY(-20px) scale(1.1);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    border: 3px solid #ffd700;
    z-index: 10;
}

/* Responsive animations */
@media (max-width: 768px) {
    .card:hover {
        transform: translateY(-10px) scale(1.02);
    }
    
    .card.selected {
        transform: translateY(-15px) scale(1.05);
    }
    
    @keyframes cardPlay {
        0% {
            transform: translateY(0) scale(1);
        }
        50% {
            transform: translateY(-30px) scale(1.05);
        }
        100% {
            transform: translateY(-100px) scale(0.9);
            opacity: 0;
        }
    }
}