/* ═══════════════════════════════════════════════════════════
   ARCANE DUELS — Keyframe Animations
   All animations for cards, screens, effects, and UI elements
   ═══════════════════════════════════════════════════════════ */

/* ─── Screen Transitions ─────────────────────────────────── */
@keyframes screen-enter {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes screen-exit {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Splash Screen ──────────────────────────────────────── */
@keyframes splash-entrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ─── Modal ──────────────────────────────────────────────── */
@keyframes modal-in {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── Toast Notifications ────────────────────────────────── */
@keyframes toast-in {
  0% {
    opacity: 0;
    transform: translateX(50px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toast-out {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(50px) scale(0.9);
  }
}

/* ─── Loading Spinner ────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Card Animations ────────────────────────────────────── */
@keyframes card-symbol-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes creature-ready {
  0%, 100% { box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.2); }
  50% { box-shadow: 0 0 0 4px rgba(212, 168, 67, 0.5), 0 0 15px rgba(212, 168, 67, 0.3); }
}

@keyframes slot-pulse {
  0%, 100% { border-color: rgba(212, 168, 67, 0.3); background: rgba(212, 168, 67, 0.05); }
  50% { border-color: rgba(212, 168, 67, 0.6); background: rgba(212, 168, 67, 0.12); }
}

@keyframes tooltip-in {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pack-reveal {
  0% {
    opacity: 0;
    transform: scale(0) rotateY(180deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.2) rotateY(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
  }
}

/* ─── Damage Number Float ────────────────────────────────── */
@keyframes damage-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }
  20% {
    transform: translateY(-10px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
}

/* ─── Battle Animations ──────────────────────────────────── */
@keyframes hero-damage {
  0% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

@keyframes turn-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  30% { transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) translateY(-20px); }
}

@keyframes victory-entrance {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(50px);
    letter-spacing: 0.5em;
  }
  60% {
    opacity: 1;
    transform: scale(1.1) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    letter-spacing: 0.15em;
  }
}

@keyframes target-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3), 0 0 10px rgba(239, 68, 68, 0.2);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.5), 0 0 20px rgba(239, 68, 68, 0.3);
  }
}

@keyframes end-turn-glow {
  0%, 100% {
    box-shadow: var(--shadow-md), 0 0 15px var(--gold-glow);
  }
  50% {
    box-shadow: var(--shadow-md), 0 0 35px var(--gold-glow), 0 0 60px rgba(212, 168, 67, 0.15);
  }
}

/* ─── Emote Bubble ───────────────────────────────────────── */
@keyframes emote-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1.2);
  }
  30% {
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
}

/* ─── Menu ───────────────────────────────────────────────── */
@keyframes menu-title-pulse {
  0%, 100% { text-shadow: 0 0 20px var(--gold-glow); }
  50% { text-shadow: 0 0 40px var(--gold-glow), 0 0 60px rgba(212, 168, 67, 0.15); }
}

@keyframes notification-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

/* ─── Shake ──────────────────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(2px); }
}

/* ─── Card Play Animation ────────────────────────────────── */
@keyframes card-play {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-100px) scale(1.3);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) scale(0.5);
    opacity: 0;
  }
}

/* ─── Creature Summon ────────────────────────────────────── */
@keyframes creature-summon {
  0% {
    opacity: 0;
    transform: scale(0) rotateZ(-10deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) rotateZ(3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateZ(0deg);
  }
}

/* ─── Creature Death ─────────────────────────────────────── */
@keyframes creature-death {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  30% {
    filter: brightness(2) saturate(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) rotateZ(15deg) translateY(30px);
    filter: brightness(0.5) saturate(0);
  }
}

/* ─── Attack Lunge ───────────────────────────────────────── */
@keyframes attack-lunge {
  0% { transform: translateY(0); }
  30% { transform: translateY(-30px) scale(1.1); }
  60% { transform: translateY(0) scale(1); }
  100% { transform: translateY(0); }
}

/* ─── Card Draw ──────────────────────────────────────────── */
@keyframes card-draw {
  0% {
    opacity: 0;
    transform: translateY(-80px) translateX(100px) scale(0.5) rotateZ(20deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1) rotateZ(0deg);
  }
}

/* ─── Sparkle Effect ─────────────────────────────────────── */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

/* ─── Glow Pulse ─────────────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor); }
  50% { filter: drop-shadow(0 0 12px currentColor); }
}

/* ─── Screen Shake ───────────────────────────────────────── */
@keyframes screen-shake {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-3px, -2px); }
  20% { transform: translate(3px, 2px); }
  30% { transform: translate(-2px, 3px); }
  40% { transform: translate(2px, -3px); }
  50% { transform: translate(-2px, 1px); }
  60% { transform: translate(1px, 2px); }
  70% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
  90% { transform: translate(-1px, 0px); }
}

@keyframes chest-idle { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-2px) rotate(-2deg)} }
@keyframes chest-wiggle { 0%,100%{transform:rotate(0) scale(1)} 18%{transform:rotate(-5deg) scale(1.03)} 36%{transform:rotate(5deg) scale(1.05)} 54%{transform:rotate(-3deg) scale(1.04)} 72%{transform:rotate(2deg) scale(1.03)} }
@keyframes chest-lid-open { 0%{transform:rotate(0) translateY(0)} 45%{transform:rotate(-10deg) translateY(-16px)} 100%{transform:rotate(-28deg) translateY(-30px)} }
@keyframes chest-glow { 0%{opacity:0;transform:scale(.35)} 50%{opacity:.8;transform:scale(1)} 100%{opacity:.2;transform:scale(.72)} }
@keyframes chest-glow-open { 0%{opacity:.2;transform:scale(.7)} 45%{opacity:1;transform:scale(1.35)} 100%{opacity:.72;transform:scale(1)} }
@keyframes chest-body-pop { 0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes reward-rise { from{opacity:0;transform:translateY(16px) scale(.92)} to{opacity:1;transform:translateY(0) scale(1)} }


@keyframes chest-wiggle{0%{transform:translateY(0) rotate(0) scale(1)}15%{transform:translateY(-2px) rotate(-5deg) scale(1.02)}30%{transform:translateY(0) rotate(5deg) scale(1.04)}45%{transform:translateY(-3px) rotate(-4deg) scale(1.03)}60%{transform:translateY(0) rotate(3deg) scale(1.02)}75%{transform:translateY(-1px) rotate(-2deg) scale(1.01)}100%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes chest-open-lid{0%{transform:rotate(0)}60%{transform:rotate(-28deg) translate(-7px,-6px)}100%{transform:rotate(-34deg) translate(-9px,-8px)}}
@keyframes chest-glow-pulse{0%{opacity:.25;transform:scale(.82)}50%{opacity:1;transform:scale(1.16)}100%{opacity:.85;transform:scale(1.02)}}
@keyframes chest-burst{0%{opacity:0;transform:scale(.45)}55%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes reward-pop{0%{opacity:0;transform:translateY(20px) scale(.7)}65%{opacity:1;transform:translateY(-3px) scale(1.05)}100%{opacity:1;transform:translateY(0) scale(1)}}
.daily-chest-modal{position:relative;min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.daily-chest{position:relative;width:180px;height:150px;padding:0;margin:10px 0 20px;border:0;background:transparent;cursor:pointer;transform-origin:center bottom}.daily-chest:disabled{cursor:default}.chest-body,.chest-lid{position:absolute;left:20px;width:140px;background:linear-gradient(180deg,#8f4d18,#4c250e);border:3px solid #d8a84b;box-shadow:inset 0 0 0 3px rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.35)}.chest-body{bottom:15px;height:88px;border-radius:12px 12px 18px 18px}.chest-lid{top:25px;height:48px;border-radius:22px 22px 8px 8px;transform-origin:left bottom;z-index:3}.chest-metal{position:absolute;left:14px;right:14px;bottom:-3px;height:7px;background:linear-gradient(90deg,#7a4317,#efc768,#7a4317);border-radius:5px}.chest-lock{position:absolute;left:50%;top:38px;transform:translateX(-50%);width:34px;height:34px;border-radius:10px;border:2px solid #f4d889;background:#3b1e0e;color:#87e1ff;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 0 16px rgba(135,225,255,.25)}.chest-glow{position:absolute;inset:25px 15px 8px;border-radius:50%;background:radial-gradient(circle,rgba(255,221,122,.85) 0%,rgba(212,168,67,.26) 32%,transparent 68%);filter:blur(14px);opacity:.55;z-index:0}.daily-chest.chest-wiggle{animation:chest-wiggle .7s ease-in-out}.daily-chest.chest-open .chest-lid{animation:chest-open-lid .55s cubic-bezier(.2,.85,.2,1) forwards}.daily-chest.chest-open .chest-glow{animation:chest-glow-pulse 1.1s ease-out forwards}.daily-chest.chest-burst::after,.daily-chest.chest-burst::before{content:'';position:absolute;left:50%;top:46%;width:130px;height:130px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,245,189,.95),rgba(212,168,67,.3) 32%,transparent 68%);filter:blur(3px);animation:chest-burst .65s ease-out forwards;z-index:5}.daily-chest.chest-burst::before{box-shadow:0 0 50px 20px rgba(212,168,67,.24)}.daily-chest-sparkle{position:absolute;color:#ffe8a1;font-size:20px;opacity:0;pointer-events:none;z-index:8}.daily-chest.chest-burst ~ .daily-chest-sparkle{animation:reward-pop .8s ease-out forwards}.sparkle-one{top:22%;left:28%}.sparkle-two{top:16%;right:28%}.sparkle-three{top:36%;right:20%}.daily-chest-hint{color:var(--text-muted);font-size:.8rem;letter-spacing:.04em;min-height:20px}.daily-reward{margin-top:8px;text-align:center;animation:reward-pop .55s cubic-bezier(.2,.9,.2,1) forwards}.reward-title{color:var(--gold);font:900 1.1rem/1.2 var(--font-heading);letter-spacing:.14em;margin-bottom:10px;text-shadow:0 0 18px rgba(212,168,67,.3)}.reward-items{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.reward-items span{padding:8px 12px;border:1px solid rgba(212,168,67,.18);border-radius:12px;background:rgba(255,255,255,.035);color:var(--text-primary);font:700 .8rem var(--font-heading)}.reward-items span:first-child{color:#f0c661}.reward-items span:last-child{color:#87dffb}


/* Gem shards released from the chest burst. */
.chest-gem{position:absolute;left:50%;top:48%;z-index:9;color:#8fe6ff;font-size:18px;line-height:1;opacity:0;text-shadow:0 0 14px rgba(87,213,255,.9);pointer-events:none}
.daily-chest-modal.chest-reward-burst .chest-gem{animation:chest-gem-fly .9s cubic-bezier(.2,.8,.15,1) forwards}
.gem-1{--dx:-86px;--dy:-78px;animation-delay:.02s}.gem-2{--dx:-38px;--dy:-112px;animation-delay:.06s}.gem-3{--dx:28px;--dy:-98px;animation-delay:.12s}.gem-4{--dx:84px;--dy:-62px;animation-delay:.18s}.gem-5{--dx:70px;--dy:-8px;animation-delay:.23s}
@keyframes chest-gem-fly{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}22%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.05) rotate(180deg)}}
.daily-chest-modal.chest-reward-burst .daily-chest-sparkle{animation:chest-sparkle-pop .75s ease-out forwards}
@keyframes chest-sparkle-pop{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(.8) translateY(-15px)}}