/* ============================================================
   animations.css — Animations and transitions
   ============================================================ */

/* ---------- Deal Card Animation ---------- */
@keyframes deal-card {
    0% {
        opacity: 0;
        transform: translate(-15em, -10em) rotate(-15deg) scale(0.5);
    }
    60% {
        opacity: 1;
        transform: translate(0.3em, -0.3em) rotate(1deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

.card.dealt {
    animation: deal-card 0.35s ease-out forwards;
}

/* Stagger delays applied via JS, but provide CSS fallbacks for up to 10 cards */
.card.dealt:nth-child(1) { animation-delay: 0ms; }
.card.dealt:nth-child(2) { animation-delay: 150ms; }
.card.dealt:nth-child(3) { animation-delay: 300ms; }
.card.dealt:nth-child(4) { animation-delay: 450ms; }
.card.dealt:nth-child(5) { animation-delay: 600ms; }
.card.dealt:nth-child(6) { animation-delay: 750ms; }
.card.dealt:nth-child(7) { animation-delay: 900ms; }
.card.dealt:nth-child(8) { animation-delay: 1050ms; }
.card.dealt:nth-child(9) { animation-delay: 1200ms; }
.card.dealt:nth-child(10) { animation-delay: 1350ms; }

/* ---------- Result Badge Fade-In ---------- */
@keyframes badge-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.result-badge {
    animation: badge-appear 0.4s ease-out forwards;
}

/* ---------- Button Show/Hide Transitions ---------- */
#action-bar {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#action-bar.fade-in {
    opacity: 1;
    transform: translateY(0);
}

#action-bar.fade-out {
    opacity: 0;
    transform: translateY(0.5em);
}

.action-btn {
    transition: all 0.2s ease, opacity 0.2s ease;
}

/* ---------- Betting Tray Transition ---------- */
#betting-tray {
    transition: opacity 0.3s ease;
}

/* ---------- Message Transition ---------- */
#game-message {
    transition: opacity 0.2s ease;
}

/* ---------- Insurance Modal Transition ---------- */
.modal-overlay {
    transition: opacity 0.3s ease;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Override display:none for the modal so transitions work */
.modal-overlay.hidden {
    display: flex !important;
    visibility: hidden;
}

.modal-overlay:not(.hidden) {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    transition: transform 0.3s ease;
}

.modal-overlay.hidden .modal-content {
    transform: scale(0.9);
}

.modal-overlay:not(.hidden) .modal-content {
    transform: scale(1);
}

/* ---------- Pulse for active hand ---------- */
@keyframes active-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.35), 0 0 30px rgba(212, 175, 55, 0.15);
    }
    50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.5), 0 0 40px rgba(212, 175, 55, 0.25);
    }
}

.hand-slot.active-hand {
    animation: active-pulse 2s ease-in-out infinite;
}

/* ---------- Balance change flash ---------- */
@keyframes balance-flash {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.balance-amount.flash {
    animation: balance-flash 0.4s ease-out;
}