/* ============================================
   RUMMY ONLINE - PREMIUM CARD ANIMATIONS
   Fluid, delightful micro-animations for cards
   ============================================ */

/* ==========================================
   BASE ANIMATION UTILITIES
   ========================================== */

/* GPU acceleration hints */
.animate-gpu {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Animation states */
.animate-paused {
    animation-play-state: paused !important;
}

/* ==========================================
   CARD DEAL ANIMATION
   Staggered cascade from deck to player hands
   ========================================== */

@keyframes dealToHand {
    0% {
        transform:
            translate(var(--deal-start-x, 0), var(--deal-start-y, 0)) rotate(0deg) scale(0.6);
        opacity: 0;
        z-index: 100;
    }

    15% {
        opacity: 1;
        transform:
            translate(calc(var(--deal-start-x, 0) * 0.7),
                calc(var(--deal-start-y, 0) * 0.7 - 40px)) rotate(calc(var(--deal-rotation, 0deg) * 0.3)) scale(0.85);
    }

    100% {
        transform:
            translate(0, 0) rotate(var(--deal-rotation, 0deg)) scale(1);
        opacity: 1;
        z-index: var(--z-cards);
    }
}

.card--dealing {
    animation: dealToHand var(--duration-deal) var(--ease-out-expo) forwards;
    animation-delay: var(--deal-delay, 0ms);
}

/* Faster deal for AI players (face down) */
.card--dealing-opponent {
    animation: dealToOpponent calc(var(--duration-deal) * 0.7) var(--ease-out-expo) forwards;
    animation-delay: var(--deal-delay, 0ms);
}

@keyframes dealToOpponent {
    0% {
        transform: translate(var(--deal-start-x, 0), var(--deal-start-y, 0)) scale(0.5);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) scale(0.7);
        opacity: 1;
    }
}

/* ==========================================
   CARD DRAW ANIMATION
   Smooth arc from pile to hand
   ========================================== */

@keyframes drawFromPile {
    0% {
        transform: translate(var(--draw-start-x, 0), var(--draw-start-y, 0)) scale(0.9);
        z-index: 100;
    }

    30% {
        transform:
            translate(calc(var(--draw-start-x, 0) * 0.5),
                calc(var(--draw-start-y, 0) * 0.5 - 60px)) scale(1.1) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        z-index: var(--z-cards);
    }
}

.card--drawing {
    animation: drawFromPile 400ms var(--ease-out-back) forwards;
}

/* Draw with flip (from face-down pile) */
@keyframes drawWithFlip {
    0% {
        transform:
            translate(var(--draw-start-x, 0), var(--draw-start-y, 0)) rotateY(180deg) scale(0.9);
        z-index: 100;
    }

    50% {
        transform:
            translate(calc(var(--draw-start-x, 0) * 0.5),
                calc(var(--draw-start-y, 0) * 0.5 - 40px)) rotateY(90deg) scale(1.05);
    }

    100% {
        transform: translate(0, 0) rotateY(0deg) scale(1);
        z-index: var(--z-cards);
    }
}

.card--drawing-flip {
    animation: drawWithFlip 500ms var(--ease-out-expo) forwards;
    transform-style: preserve-3d;
}

/* ==========================================
   CARD DISCARD ANIMATION
   Arc throw to discard pile
   ========================================== */

@keyframes discardToPile {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        z-index: 100;
    }

    40% {
        transform:
            translate(calc(var(--discard-end-x, 0) * 0.4),
                calc(var(--discard-end-y, 0) * 0.3 - 80px)) rotate(calc(var(--discard-rotation, 5deg) * 0.5)) scale(1.05);
    }

    100% {
        transform:
            translate(var(--discard-end-x, 0), var(--discard-end-y, 0)) rotate(var(--discard-rotation, 5deg)) scale(1);
        z-index: var(--z-cards);
    }
}

.card--discarding {
    animation: discardToPile 350ms var(--ease-out-expo) forwards;
    pointer-events: none;
}

/* Landing impact effect */
@keyframes discardLanding {
    0% {
        transform: scale(1);
        box-shadow: var(--shadow-card);
    }

    50% {
        transform: scale(1.03);
        box-shadow: var(--shadow-lg);
    }

    100% {
        transform: scale(1);
        box-shadow: var(--shadow-card);
    }
}

.card--landing {
    animation: discardLanding 200ms var(--ease-out-back);
}

/* ==========================================
   CARD HOVER ANIMATIONS
   Lift and glow effects
   ========================================== */

.card--hoverable {
    transition:
        transform 180ms var(--ease-out-back),
        box-shadow 180ms ease,
        z-index 0ms;
}

.card--hoverable:hover {
    transform: translateY(-14px) scale(1.06);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.2),
        0 0 0 2px rgba(255, 64, 129, 0.2);
    z-index: var(--z-card-hover);
}

/* Subtle floating animation on prolonged hover */
@keyframes cardFloat {

    0%,
    100% {
        transform: translateY(-14px) scale(1.06);
    }

    50% {
        transform: translateY(-18px) scale(1.06);
    }
}

.card--hoverable:hover {
    animation: cardFloat 2s ease-in-out infinite;
    animation-delay: 300ms;
}

/* ==========================================
   CARD SELECTION ANIMATION
   Pop and glow when selected
   ========================================== */

@keyframes cardSelect {
    0% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-30px) scale(1.08);
    }

    100% {
        transform: translateY(-24px) scale(1.04);
    }
}

.card--selecting {
    animation: cardSelect 300ms var(--ease-out-back) forwards;
}

@keyframes cardDeselect {
    0% {
        transform: translateY(-24px) scale(1.04);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.card--deselecting {
    animation: cardDeselect 200ms ease-out forwards;
}

/* Selection glow pulse */
@keyframes selectionGlow {

    0%,
    100% {
        box-shadow:
            var(--shadow-card-selected),
            0 0 20px rgba(255, 64, 129, 0.4);
    }

    50% {
        box-shadow:
            var(--shadow-card-selected),
            0 0 35px rgba(255, 64, 129, 0.6);
    }
}

.card--selected {
    animation: selectionGlow 1.5s ease-in-out infinite;
}

/* ==========================================
   CARD SORTING / REARRANGING
   Smooth position swap animation
   ========================================== */

@keyframes cardSlide {
    0% {
        transform: translate(var(--slide-from-x, 0), var(--slide-from-y, 0));
    }

    100% {
        transform: translate(0, 0);
    }
}

.card--sliding {
    animation: cardSlide 300ms var(--ease-out-expo);
}

/* Swap animation (two cards switching places) */
@keyframes cardSwapOut {
    0% {
        transform: translate(0, 0) scale(1);
        z-index: 50;
    }

    50% {
        transform: translate(0, -30px) scale(0.95);
    }

    100% {
        transform: translate(var(--swap-x, 0), 0) scale(1);
        z-index: var(--z-cards);
    }
}

.card--swapping {
    animation: cardSwapOut 400ms var(--ease-in-out-cubic);
}

/* ==========================================
   MELD LAYING ANIMATION
   Cards slide to table with flourish
   ========================================== */

@keyframes layMeld {
    0% {
        transform: translate(var(--meld-start-x, 0), var(--meld-start-y, 0)) scale(1);
        opacity: 1;
        z-index: 100;
    }

    30% {
        transform:
            translate(calc(var(--meld-start-x, 0) * 0.5),
                calc(var(--meld-start-y, 0) * 0.5 - 50px)) scale(1.1);
    }

    100% {
        transform: translate(0, 0) scale(0.85);
        opacity: 1;
        z-index: var(--z-cards);
    }
}

.card--melding {
    animation: layMeld 500ms var(--ease-out-expo) forwards;
    animation-delay: var(--meld-delay, 0ms);
}

/* Meld success flash */
@keyframes meldSuccess {
    0% {
        box-shadow: var(--shadow-card);
    }

    30% {
        box-shadow:
            var(--shadow-card),
            0 0 30px rgba(76, 175, 80, 0.8);
    }

    100% {
        box-shadow: var(--shadow-card);
    }
}

.meld--success .card {
    animation: meldSuccess 600ms ease-out;
}

/* ==========================================
   SHUFFLE ANIMATION
   Deck riffle effect
   ========================================== */

@keyframes shuffleRiffle {
    0% {
        transform: translateX(0) rotateY(0deg);
    }

    25% {
        transform: translateX(-20px) rotateY(-15deg);
    }

    50% {
        transform: translateX(0) rotateY(0deg);
    }

    75% {
        transform: translateX(20px) rotateY(15deg);
    }

    100% {
        transform: translateX(0) rotateY(0deg);
    }
}

.pile--shuffling .card {
    animation: shuffleRiffle 300ms ease-in-out;
    animation-iteration-count: 3;
}

/* Individual card flutter during shuffle */
@keyframes shuffleFlutter {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-3px, -2px) rotate(-2deg);
    }

    75% {
        transform: translate(3px, -2px) rotate(2deg);
    }
}

.pile--shuffling .card:nth-child(odd) {
    animation: shuffleFlutter 150ms ease-in-out infinite;
}

.pile--shuffling .card:nth-child(even) {
    animation: shuffleFlutter 150ms ease-in-out infinite;
    animation-delay: 75ms;
}

/* ==========================================
   WIN CELEBRATION ANIMATION
   Cards explode outward triumphantly
   ========================================== */

@keyframes winExplode {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

    20% {
        transform: translate(0, -20px) scale(1.2);
    }

    100% {
        transform:
            translate(var(--explode-x, 0),
                var(--explode-y, 0)) rotate(var(--explode-rotation, 720deg)) scale(0);
        opacity: 0;
    }
}

.card--exploding {
    animation: winExplode 1000ms var(--ease-out-expo) forwards;
    animation-delay: var(--explode-delay, 0ms);
    pointer-events: none;
}

/* Confetti burst effect */
@keyframes confettiBurst {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }

    100% {
        transform:
            translate(var(--confetti-x, 0),
                var(--confetti-y, 0)) rotate(var(--confetti-rotation, 360deg)) scale(1);
        opacity: 0;
    }
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: confettiBurst 1s var(--ease-out-expo) forwards;
    animation-delay: var(--confetti-delay, 0ms);
    pointer-events: none;
}

/* ==========================================
   IDLE / AMBIENT ANIMATIONS
   Subtle breathing effect for cards
   ========================================== */

@keyframes cardBreathing {

    0%,
    100% {
        transform: scale(1);
        box-shadow: var(--shadow-card);
    }

    50% {
        transform: scale(1.005);
        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.18);
    }
}

.card--idle {
    animation: cardBreathing 4s ease-in-out infinite;
}

/* Stagger breathing for natural feel */
.card--idle:nth-child(1) {
    animation-delay: 0s;
}

.card--idle:nth-child(2) {
    animation-delay: 0.4s;
}

.card--idle:nth-child(3) {
    animation-delay: 0.8s;
}

.card--idle:nth-child(4) {
    animation-delay: 1.2s;
}

.card--idle:nth-child(5) {
    animation-delay: 1.6s;
}

.card--idle:nth-child(6) {
    animation-delay: 2s;
}

.card--idle:nth-child(7) {
    animation-delay: 2.4s;
}

.card--idle:nth-child(8) {
    animation-delay: 2.8s;
}

.card--idle:nth-child(9) {
    animation-delay: 3.2s;
}

.card--idle:nth-child(10) {
    animation-delay: 3.6s;
}

/* ==========================================
   AI OPPONENT CARD ANIMATIONS
   Mysterious, slightly quicker animations
   ========================================== */

@keyframes aiThinking {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.opponent-hand--thinking .card {
    animation: aiThinking 800ms ease-in-out infinite;
}

.opponent-hand--thinking .card:nth-child(odd) {
    animation-delay: 100ms;
}

@keyframes aiDraw {
    0% {
        transform: translate(var(--draw-start-x, 0), var(--draw-start-y, 0)) scale(0.8);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) scale(0.7);
        opacity: 1;
    }
}

.card--ai-drawing {
    animation: aiDraw 350ms var(--ease-out-expo);
}

@keyframes aiDiscard {
    0% {
        transform: translate(0, 0) scale(0.7);
        opacity: 1;
    }

    100% {
        transform: translate(var(--discard-end-x, 0), var(--discard-end-y, 0)) scale(1);
        opacity: 1;
    }
}

.card--ai-discarding {
    animation: aiDiscard 300ms var(--ease-out-expo);
}

/* ==========================================
   TURN INDICATOR ANIMATIONS
   ========================================== */

@keyframes turnPulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        box-shadow: var(--shadow-md);
    }

    50% {
        transform: translateX(-50%) scale(1.05);
        box-shadow: var(--shadow-lg);
    }
}

.turn-indicator--active {
    animation: turnPulse 1.5s ease-in-out infinite;
}

@keyframes turnSlideIn {
    0% {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.turn-indicator--entering {
    animation: turnSlideIn 300ms var(--ease-out-back);
}

/* ==========================================
   DECK ANIMATIONS
   ========================================== */

/* Deck tap feedback */
@keyframes deckTap {
    0% {
        transform: translate(2px, -2px) scale(1);
    }

    50% {
        transform: translate(2px, -2px) scale(0.95);
    }

    100% {
        transform: translate(2px, -2px) scale(1);
    }
}

.pile--draw:active .card:last-child {
    animation: deckTap 150ms ease-out;
}

/* Deck replenish (reshuffle discard) */
@keyframes deckReplenish {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    30% {
        transform: translateY(-30px) scale(1.1);
    }

    60% {
        transform: translateY(-30px) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.pile--replenishing .card {
    animation: deckReplenish 600ms var(--ease-out-expo);
}

/* ==========================================
   SPECIAL EFFECTS
   ========================================== */

/* Card flip 3D */
@keyframes cardFlip {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(180deg);
    }
}

.card--flipping {
    animation: cardFlip 400ms var(--ease-in-out-cubic);
    transform-style: preserve-3d;
}

/* Shake for invalid action */
@keyframes cardShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-6px);
    }

    80% {
        transform: translateX(6px);
    }
}

.card--invalid {
    animation: cardShake 400ms ease-out;
}

/* Glow pulse for valid target */
@keyframes validTargetPulse {

    0%,
    100% {
        box-shadow:
            var(--shadow-card),
            0 0 0 0 rgba(76, 175, 80, 0.4);
    }

    50% {
        box-shadow:
            var(--shadow-card),
            0 0 0 8px rgba(76, 175, 80, 0);
    }
}

.card--valid-target,
.pile--valid-target {
    animation: validTargetPulse 1s ease-out infinite;
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* Reduce animations for battery/performance */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .card--idle,
    .card--hoverable:hover,
    .turn-indicator--active {
        animation: none;
    }
}

/* Pause animations when not visible */
.game-table:not(:focus-within) .card--idle {
    animation-play-state: paused;
}