/* animations.css - Card animations, transitions, particles */

/* === SUMMON: card flips from face-down, lands on field with impact === */
@keyframes cardSummon {
    0% { transform: translateY(80px) scale(0.3) rotateY(180deg); opacity: 0; filter: brightness(0.3); }
    30% { transform: translateY(-15px) scale(1.15) rotateY(40deg); opacity: 1; filter: brightness(1.8); }
    50% { transform: translateY(-5px) scale(1.08) rotateY(-8deg); filter: brightness(1.2); }
    70% { transform: translateY(8px) scale(0.97) rotateY(3deg); filter: brightness(1); }
    85% { transform: translateY(-2px) scale(1.02) rotateY(-1deg); }
    100% { transform: translateY(0) scale(1) rotateY(0); opacity: 1; filter: brightness(1); }
}
.anim-summon {
    animation: cardSummon 0.6s cubic-bezier(0.17, 0.67, 0.3, 1.2);
}

/* === ATTACK: monster lunges forward with impact flash on target === */
@keyframes attackSlide {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    10% { transform: translateY(8px) scale(1.08); filter: brightness(1.1); }
    25% { transform: translateY(4px) scale(1.12); filter: brightness(1.4); }
    40% { transform: translateY(-45px) scale(1.15); filter: brightness(1.6); }
    50% { transform: translateY(-45px) scale(1.08); filter: brightness(2); }
    65% { transform: translateY(8px) scale(0.95); filter: brightness(1); }
    80% { transform: translateY(-3px) scale(1.02); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes attackSlideDown {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    10% { transform: translateY(-8px) scale(1.08); filter: brightness(1.1); }
    25% { transform: translateY(-4px) scale(1.12); filter: brightness(1.4); }
    40% { transform: translateY(45px) scale(1.15); filter: brightness(1.6); }
    50% { transform: translateY(45px) scale(1.08); filter: brightness(2); }
    65% { transform: translateY(-8px) scale(0.95); filter: brightness(1); }
    80% { transform: translateY(3px) scale(1.02); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
.anim-attack { animation: attackSlide 0.55s cubic-bezier(0.3, 0, 0.3, 1); }
.anim-attack-down { animation: attackSlideDown 0.55s cubic-bezier(0.3, 0, 0.3, 1); }

/* === HIT: shake with color flash === */
@keyframes hitShake {
    0% { transform: translateX(0); filter: brightness(1); }
    15% { transform: translateX(-8px); filter: brightness(2); }
    30% { transform: translateX(8px); filter: brightness(1.5); }
    45% { transform: translateX(-5px); filter: brightness(1.2); }
    60% { transform: translateX(5px); }
    80% { transform: translateX(-2px); }
    100% { transform: translateX(0); filter: brightness(1); }
}
.anim-hit { animation: hitShake 0.35s ease-in-out; }

/* === DEATH: card shatters into fragments === */
@keyframes cardDeath {
    0% { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1); }
    15% { transform: scale(1.15) rotate(-2deg); filter: brightness(2.5); }
    30% { transform: scale(1.1) rotate(2deg); filter: brightness(2); }
    50% { transform: scale(0.9) rotate(-5deg); opacity: 0.8; filter: brightness(1); }
    100% { transform: scale(0) rotate(25deg); opacity: 0; filter: brightness(0.3) saturate(0); }
}
.anim-death {
    animation: cardDeath 0.6s ease-in forwards;
    pointer-events: none;
}

/* === SPELL CAST: card glows, rises, dissolves === */
@keyframes spellCast {
    0% { transform: translateY(0) scale(1); filter: brightness(1); opacity: 1; }
    20% { transform: translateY(-5px) scale(1.05); filter: brightness(2) saturate(2);
           box-shadow: 0 0 20px rgba(100,150,255,0.6); }
    50% { transform: translateY(-20px) scale(1.1); filter: brightness(2.5) saturate(3);
           box-shadow: 0 0 40px rgba(100,150,255,0.8); }
    80% { transform: translateY(-30px) scale(0.8); filter: brightness(1.5); opacity: 0.5; }
    100% { transform: translateY(-40px) scale(0.3); filter: brightness(3); opacity: 0; }
}
.anim-spell { animation: spellCast 0.6s ease-out forwards; }

/* === CARD DRAW: slides from deck pile === */
@keyframes cardDraw {
    0% { transform: translateX(-180px) translateY(-20px) rotate(-15deg) scale(0.7); opacity: 0; }
    50% { transform: translateX(-40px) translateY(5px) rotate(3deg) scale(1.02); opacity: 1; }
    100% { transform: translateX(0) translateY(0) rotate(0) scale(1); opacity: 1; }
}
.anim-draw {
    animation: cardDraw 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* === DAMAGE FLOAT: numbers pop up and fade === */
.damage-float {
    position: absolute;
    font-weight: 900;
    font-size: 22px;
    pointer-events: none;
    z-index: 110;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 10px currentColor;
    animation: dmgPop 0.9s ease-out forwards;
    white-space: nowrap;
}
.damage-float.dmg { color: #ff4444; }
.damage-float.heal { color: #44ff88; }
.damage-float.shield { color: #4488ff; }
@keyframes dmgPop {
    0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.5); }
    20% { opacity: 1; transform: translateX(-50%) translateY(-15px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(0.7); }
}

/* === HP BAR SMOOTH TRANSITION === */
.battle-hp-fill {
    transition: width 0.4s ease-out !important;
}

/* === MANA CRYSTAL LIGHT-UP === */
.mana-crystal {
    transition: all 0.2s ease;
    filter: brightness(1) saturate(1);
}
.mana-crystal.empty {
    filter: brightness(0.3) saturate(0.2);
    opacity: 0.5;
}
@keyframes crystalLight {
    0% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(2); transform: scale(1.2); }
    100% { filter: brightness(1); transform: scale(1); }
}
.mana-crystal.lighting {
    animation: crystalLight 0.3s ease-out;
}

/* === REWARD CARD FLOAT === */
@keyframes rewardFloat {
    0% { transform: translateY(40px) scale(0.8); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.anim-reward {
    animation: rewardFloat 0.4s ease-out backwards;
}

/* === HEAL PULSE === */
@keyframes healPulse {
    0% { filter: brightness(1); box-shadow: none; }
    30% { filter: brightness(1.5) hue-rotate(80deg); box-shadow: 0 0 15px rgba(0,255,100,0.4); }
    100% { filter: brightness(1); box-shadow: none; }
}
.anim-heal { animation: healPulse 0.5s ease-in-out; }

/* === BUFF GLOW === */
@keyframes buffGlow {
    0% { box-shadow: 0 0 0 rgba(255,215,0,0); }
    50% { box-shadow: 0 0 25px rgba(255,215,0,0.6), inset 0 0 10px rgba(255,215,0,0.2); }
    100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
}
.anim-buff { animation: buffGlow 0.6s ease-in-out; }

/* === DEBUFF === */
@keyframes debuffShake {
    0%, 100% { transform: rotate(0); filter: brightness(1); }
    25% { transform: rotate(-4deg); filter: brightness(0.6) hue-rotate(-30deg); }
    75% { transform: rotate(4deg); filter: brightness(0.6) hue-rotate(-30deg); }
}
.anim-debuff { animation: debuffShake 0.4s ease-in-out; }

/* === TRAP REVEAL: flip card face-up === */
@keyframes trapReveal {
    0% { transform: rotateY(180deg) scale(0.9); }
    60% { transform: rotateY(-10deg) scale(1.05); }
    100% { transform: rotateY(0) scale(1); }
}
.anim-trap-reveal {
    animation: trapReveal 0.5s ease-out;
}

/* === SCREEN FLASH === */
.screen-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 90;
    opacity: 0;
    transition: opacity 0.15s;
}
.screen-flash.active {
    opacity: 1;
    animation: flashFade 0.35s ease-out forwards;
}
.screen-flash.red { background: rgba(255,0,0,0.2); }
.screen-flash.gold { background: rgba(255,215,0,0.2); }
.screen-flash.blue { background: rgba(0,100,255,0.2); }
.screen-flash.green { background: rgba(0,200,50,0.2); }
.screen-flash.white { background: rgba(255,255,255,0.25); }
@keyframes flashFade {
    0% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* === PARTICLES === */
.particle {
    position: absolute;
    pointer-events: none;
    z-index: 100;
}
.particle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Impact particles from attacks */
@keyframes impactBurst {
    0% { opacity: 1; transform: translate(0,0) scale(1.5); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}
.particle-impact {
    position: absolute; pointer-events: none; z-index: 105;
    width: 6px; height: 6px; border-radius: 50%;
    animation: impactBurst 0.4s ease-out forwards;
}

/* Spell dissolve particles */
@keyframes spellDissolve {
    0% { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
.particle-spell {
    position: absolute; pointer-events: none; z-index: 105;
    width: 4px; height: 4px; border-radius: 50%;
    animation: spellDissolve 0.6s ease-out forwards;
}

/* Death shatter fragments */
@keyframes shatterFrag {
    0% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0); }
}
.particle-shard {
    position: absolute; pointer-events: none; z-index: 105;
    border-radius: 2px;
    animation: shatterFrag 0.5s ease-out forwards;
}

/* === ELEMENT ADVANTAGE === */
@keyframes elementFlash {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* === CARD GLOW ON PLAYABLE === */
.game-card.playable {
    border-color: rgba(100,255,100,0.4);
    transition: box-shadow 0.2s, transform 0.15s;
}
.game-card.playable:hover {
    box-shadow: 0 0 16px rgba(100,255,100,0.4), 0 4px 12px rgba(0,0,0,0.3);
    transform: translateY(-4px);
}

/* === BOSS ENTRANCE === */
@keyframes bossEntrance {
    0% { transform: scale(3) rotate(-5deg); opacity: 0; filter: brightness(5); }
    30% { transform: scale(0.85) rotate(2deg); filter: brightness(2); }
    50% { transform: scale(1.1) rotate(-1deg); filter: brightness(1.3); opacity: 1; }
    70% { transform: scale(0.95); }
    100% { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1); }
}
.anim-boss-enter { animation: bossEntrance 0.9s cubic-bezier(0.2, 0.8, 0.3, 1); }

/* === GENERIC FADE IN === */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.anim-fade-in { animation: fadeIn 0.3s ease-out; }

/* === SLIDE UP === */
@keyframes slideUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.anim-slide-up { animation: slideUp 0.3s ease-out; }

/* === CARD HOVER LIFT === */
.battle-hand .game-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.battle-hand .game-card:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    z-index: 10;
}

/* === IMPACT FLASH: white circle burst at contact === */
@keyframes impactFlashAnim {
    0% { opacity: 0.9; transform: translate(-50%,-50%) scale(0.2); }
    40% { opacity: 0.7; transform: translate(-50%,-50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(2); }
}
.particle-impact-flash {
    position: absolute; pointer-events: none; z-index: 106;
    width: 40px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255,200,100,0.6) 40%, transparent 70%);
    transform: translate(-50%,-50%);
    animation: impactFlashAnim 0.3s ease-out forwards;
}

/* === CHAIN PARTICLES for trap activation === */
@keyframes chainFrag {
    0% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.3); }
}
.particle-chain {
    position: absolute; pointer-events: none; z-index: 105;
    border-radius: 1px;
    animation: chainFrag 0.45s ease-out forwards;
}

/* === TURN BANNER: smooth slide-in with color coding === */
.turn-banner {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    font-size: 28px; font-weight: 900; letter-spacing: 3px;
    text-transform: uppercase; pointer-events: none;
    opacity: 0; z-index: 120; text-shadow: 0 3px 12px rgba(0,0,0,0.8);
    transition: none; white-space: nowrap;
}
.turn-banner.show {
    animation: turnBannerIn 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.turn-banner.your-turn { color: #44ddff; }
.turn-banner.enemy-turn { color: #ff6644; }
@keyframes turnBannerIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(2.5) rotate(-3deg); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(0.9) rotate(1deg); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(-0.5deg); }
    35% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* === MANA CRYSTAL sparkle on light-up === */
@keyframes crystalSparkle {
    0% { filter: brightness(1); transform: scale(1); box-shadow: none; }
    30% { filter: brightness(2.5); transform: scale(1.3); box-shadow: 0 0 8px rgba(100,150,255,0.6); }
    60% { filter: brightness(1.5); transform: scale(1.15); box-shadow: 0 0 4px rgba(100,150,255,0.3); }
    100% { filter: brightness(1); transform: scale(1); box-shadow: none; }
}
.mana-crystal.lighting {
    animation: crystalSparkle 0.4s ease-out;
}

/* === CARD SELECTED GLOW === */
.game-card.selected {
    box-shadow: 0 0 16px rgba(255,215,0,0.6), 0 0 32px rgba(255,215,0,0.3);
}

/* === CAN-ATTACK PULSE === */
@keyframes canAttackPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(68,255,68,0.3); }
    50% { box-shadow: 0 0 12px rgba(68,255,68,0.6), inset 0 0 4px rgba(68,255,68,0.1); }
}
.game-card.can-attack {
    animation: canAttackPulse 1.2s ease-in-out infinite;
}