/**
 * card-animations.css - All card-related animations
 *
 * This file consolidates all card animation keyframes and classes:
 * - Card dealing/entry animations (cardFadeIn, cardPopIn, cardSlam)
 * - Card reveal animations (cardReveal, cardFlip3D)
 * - Card fold animations (cardsFold, cardsFoldFast)
 * - Flop stacking/spreading animations
 * - Runout glow effects
 */

/* ============ KEYFRAME ANIMATIONS ============ */

/* Card fade-in when dealt to board - maintains full opacity throughout to prevent faintness */
@keyframes cardFadeIn {
    0% {
        opacity: 1 !important;
        transform: translateX(-30px) translateY(-20px) rotate(-5deg) scale(0.9);
    }
    50% {
        opacity: 1 !important;
        transform: translateX(2px) translateY(2px) rotate(1deg) scale(1.02);
    }
    100% {
        opacity: 1 !important;
        transform: translateX(0) translateY(0) rotate(0) scale(1);
    }
}

/* Card pop-in animation for hero cards */
@keyframes cardPopIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Card slam effect for dramatic reveals */
@keyframes cardSlam {
    0% {
        transform: translateY(-20px) scale(1.02);
        opacity: 0;
        box-shadow: 0 8px 24px var(--alpha-black-40);
    }
    60% {
        transform: translateY(0) scale(1.01);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        box-shadow: 0 2px 8px var(--alpha-black-30);
    }
}

/* Card reveal with 3D flip for showdown */
/* Note: Always use opacity: 1 to prevent faint cards if animation is interrupted */
@keyframes cardReveal {
    0% {
        transform: perspective(600px) rotateY(180deg) scale(0.9);
        opacity: 1;
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    50% {
        transform: perspective(600px) rotateY(90deg) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: perspective(600px) rotateY(0deg) scale(1);
        opacity: 1;
        box-shadow: 0 4px 12px var(--alpha-black-40), 0 0 8px rgba(255, 255, 255, 0.06);
    }
}

/* Dramatic 3D flip with golden glow */
/* Note: Always use opacity: 1 to prevent faint cards if animation is interrupted */
@keyframes cardFlip3D {
    0% {
        transform: perspective(800px) rotateY(180deg) translateZ(-50px);
        opacity: 1;
    }
    30% {
        transform: perspective(800px) rotateY(120deg) translateZ(20px);
        opacity: 1;
    }
    60% {
        transform: perspective(800px) rotateY(40deg) translateZ(30px);
        opacity: 1;
        box-shadow: -15px 10px 30px rgba(0,0,0,0.3), 0 0 30px rgba(74, 157, 122, 0.3);
    }
    100% {
        transform: perspective(800px) rotateY(0deg) translateZ(0);
        opacity: 1;
        box-shadow: 0 2px 6px var(--alpha-black-30);
    }
}

/* Card fold animation - GPU-accelerated (opacity + transform only) */
@keyframes cardsFold {
    0% {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
    30% {
        opacity: 0.7;
        transform: translateY(-3px) translateZ(0);
    }
    100% {
        opacity: 0.35;
        transform: translateY(0) translateZ(0);
    }
}

/* Fast fold animation - GPU-accelerated */
@keyframes cardsFoldFast {
    0% {
        opacity: 1;
        transform: translateZ(0);
    }
    100% {
        opacity: 0.35;
        transform: translateZ(0);
    }
}

/* Fold animation classes (fallback when FoldAnimationSystem unavailable) */
.cards-container.folding .card {
    animation: cardsFold 0.8s ease-out forwards;
}

.cards-container.folding-fast .card {
    animation: cardsFoldFast 0.25s ease-out forwards;
}

/* Deal card from deck animation - GPU-accelerated (no filter: blur) */
@keyframes cardDealFromDeck {
    0% {
        transform: translateX(-120px) translateY(-80px) rotate(-15deg) scale(0.7);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    70% {
        transform: translateX(5px) translateY(2px) rotate(2deg) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0) scale(1);
        opacity: 1;
    }
}

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

/* Runout card glow during all-in */
@keyframes runoutCardGlow {
    0% {
        box-shadow: 0 0 30px rgba(74, 157, 122, 0.8), 0 0 60px rgba(74, 157, 122, 0.4);
        transform: scale(1.1);
    }
    100% {
        box-shadow: 0 2px 6px var(--alpha-black-30), 0 4px 10px var(--alpha-black-20);
        transform: scale(1);
    }
}

/* Flop reveal glow */
@keyframes flopRevealGlow {
    0% {
        box-shadow: 0 0 40px rgba(74, 157, 122, 0.9), 0 0 80px rgba(74, 157, 122, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(74, 157, 122, 0.6), 0 0 50px rgba(74, 157, 122, 0.3);
    }
    100% {
        box-shadow: 0 2px 6px var(--alpha-black-30), 0 4px 10px var(--alpha-black-20);
    }
}

/* LTR flop reveal glow (same as regular) */
@keyframes flopRevealGlowLtr {
    0% {
        box-shadow: 0 0 40px rgba(74, 157, 122, 0.9), 0 0 80px rgba(74, 157, 122, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(74, 157, 122, 0.6), 0 0 50px rgba(74, 157, 122, 0.3);
    }
    100% {
        box-shadow: 0 2px 6px var(--alpha-black-30), 0 4px 10px var(--alpha-black-20);
    }
}

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

/* Card fade-in animation class - CRITICAL: maintain full opacity throughout */
.card.animate-in {
    opacity: 1 !important;
    animation: cardFadeIn 0.4s ease forwards;
    transition: none; /* prevent base .card transition from fighting keyframe */
}

/* Card reveal animation class */
.card.animate-reveal {
    opacity: 1 !important;
    animation: cardReveal 0.5s ease forwards;
    transition: none;
}

/* 3D flip animation class */
.card.flip-3d {
    opacity: 1 !important;
    animation: cardFlip3D 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: none;
}

/* Slam animation class */
.card.slam {
    animation: cardSlam 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    transition: none;
}

/* Revealing from deck */
.card.revealing {
    animation: cardDealFromDeck 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
    transition: none;
}

/* Board card glow during runout */
.board-cards .card.runout-glow {
    animation: runoutCardGlow 0.6s ease-out;
    transition: none;
}

/* Flop reveal glow effects */
.board-cards .card.flop-reveal-glow {
    animation: flopRevealGlow 0.8s ease-out;
    transition: none;
}

.board-cards .card.flop-reveal-glow-ltr {
    animation: flopRevealGlowLtr 0.6s ease-out;
    transition: none;
}

/* ============ FLOP STACKING/SPREADING ANIMATIONS ============ */

/* Classic center-stack spread (cards stack in center, spread outward) */

/* When stacked: all cards move to center position (card 2's spot) */
.board-cards.flop-stacked .flop-group .card:nth-child(1) {
    transform: translateX(66px) rotate(-3deg);
    z-index: 3;
}
.board-cards.flop-stacked .flop-group .card:nth-child(2) {
    transform: translateX(0px) rotate(0deg);
    z-index: 2;
}
.board-cards.flop-stacked .flop-group .card:nth-child(3) {
    transform: translateX(-66px) rotate(3deg);
    z-index: 1;
}

/* When spreading: cards animate back to normal positions with staggered timing */
.board-cards.flop-spreading .flop-group .card:nth-child(1) {
    transform: translateX(0) rotate(0deg);
    z-index: 1;
    transition: transform 0.6s var(--ease-bounce);
}
.board-cards.flop-spreading .flop-group .card:nth-child(2) {
    transform: translateX(0) rotate(0deg);
    z-index: 1;
    transition: transform 0.6s var(--ease-bounce) 0.08s;
}
.board-cards.flop-spreading .flop-group .card:nth-child(3) {
    transform: translateX(0) rotate(0deg);
    z-index: 1;
    transition: transform 0.6s var(--ease-bounce) 0.16s;
}

/* ============ LEFT-TO-RIGHT FLOP SPREAD ============ */
/* Cards start stacked on the left, then fan out smoothly left-to-right */

/* Stacked state: all cards positioned at left card's spot */
.board-cards.flop-stacked-ltr .flop-group .card:nth-child(1) {
    transform: translateX(0) rotate(0deg) scale(1);
    z-index: 3;
    opacity: 1;
}
.board-cards.flop-stacked-ltr .flop-group .card:nth-child(2) {
    transform: translateX(-66px) rotate(-2deg) scale(0.98);
    z-index: 2;
    opacity: 0.95;
}
.board-cards.flop-stacked-ltr .flop-group .card:nth-child(3) {
    transform: translateX(-132px) rotate(-4deg) scale(0.96);
    z-index: 1;
    opacity: 0.9;
}

/* Spreading state: cards slide out sequentially left-to-right with smooth easing */
.board-cards.flop-spreading-ltr .flop-group .card:nth-child(1) {
    transform: translateX(0) rotate(0deg) scale(1);
    z-index: 1;
    opacity: 1;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity var(--duration-slow) var(--ease-out),
                scale 0.4s ease-out;
}
.board-cards.flop-spreading-ltr .flop-group .card:nth-child(2) {
    transform: translateX(0) rotate(0deg) scale(1);
    z-index: 1;
    opacity: 1;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
                opacity var(--duration-slow) var(--ease-out) 0.12s,
                scale 0.4s ease-out 0.12s;
}
.board-cards.flop-spreading-ltr .flop-group .card:nth-child(3) {
    transform: translateX(0) rotate(0deg) scale(1);
    z-index: 1;
    opacity: 1;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.24s,
                opacity var(--duration-slow) var(--ease-out) 0.24s,
                scale 0.4s ease-out 0.24s;
}

/* ============ HERO FOLD FLIP ============ */
/* Card-back face injected during hero fold flip animation.
   Starts rotated 180deg so it's hidden behind the card face,
   then becomes visible when the parent .card rotates past 90deg. */

.card .hero-fold-back {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background-image: var(--card-back-image);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 1px 0 var(--alpha-white-10);
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}