/* Animation/FX layer: turn banner, damage numbers, lunges, arrows,
 * card travel clones, screen shake. */

/* turn banner */
#turn-banner {
  position: fixed;
  top: 42%;
  left: 0; right: 0;
  z-index: 80;
  text-align: center;
  font-family: "Trajan", serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(216, 194, 107, 0.6), 0 2px 8px #000;
  pointer-events: none;
  opacity: 0;
}
#turn-banner.show { animation: bannerSweep 1.35s cubic-bezier(0.2, 0.8, 0.3, 1); }
#turn-banner.enemy { color: #b09ad8; text-shadow: 0 0 30px rgba(160, 107, 255, 0.55), 0 2px 8px #000; }
@keyframes bannerSweep {
  0% { opacity: 0; transform: translateX(-60px) scaleX(1.2); }
  18% { opacity: 1; transform: none; }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(60px); }
}
#turn-banner::before, #turn-banner::after {
  content: "";
  position: absolute;
  left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.6;
}
#turn-banner::before { top: -14px; }
#turn-banner::after { bottom: -14px; }

/* floating combat numbers */
#fx-layer { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
.dmg-num {
  position: absolute;
  font-family: "Trajan", serif;
  font-weight: 700;
  font-size: 30px;
  color: #ff5a3c;
  text-shadow: 0 0 12px rgba(226, 84, 62, 0.9), 0 2px 4px #000;
  animation: dmgFloat 1s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  transform: translate(-50%, -50%);
}
.dmg-num.heal { color: #8fdd4c; text-shadow: 0 0 12px rgba(143, 221, 76, 0.9), 0 2px 4px #000; }
.dmg-num.big { font-size: 42px; }
@keyframes dmgFloat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  18% { opacity: 1; transform: translate(-50%, -58%) scale(1.25); }
  40% { transform: translate(-50%, -74%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(0.9); }
}

/* card travel clone (hand -> field, deck -> hand) */
.travel-clone {
  position: fixed;
  z-index: 88;
  pointer-events: none;
  transition: all 0.42s cubic-bezier(0.3, 0.9, 0.35, 1.05);
  transform-origin: center;
}

/* attack lunge */
.lunge { position: relative; z-index: 40; }

/* spell cast splash */
.cast-splash {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 86;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: castSplash 0.9s cubic-bezier(0.25, 0.9, 0.4, 1) forwards;
  filter: drop-shadow(0 0 34px rgba(216, 194, 107, 0.5));
}
.cast-splash .card { width: 190px; }
@keyframes castSplash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(-6deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(0.92); }
}

/* death dissolve */
.card.dying {
  animation: dieBurn 0.55s ease-in forwards;
}
@keyframes dieBurn {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.7) sepia(0.7) hue-rotate(-25deg); }
  100% { filter: brightness(2.6) sepia(1) hue-rotate(-40deg); opacity: 0; transform: scale(0.72) rotate(7deg); }
}

/* rebirth flare */
.card.rebirthing { animation: rebirthFlare 0.8s ease-out; }
@keyframes rebirthFlare {
  0% { filter: brightness(3) saturate(2); transform: scale(0.7); }
  50% { filter: brightness(1.8); transform: scale(1.12); }
  100% { filter: none; transform: none; }
}

/* buff pop */
.card.buffing { animation: buffPop 0.5s ease-out; }
@keyframes buffPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); filter: brightness(1.5) drop-shadow(0 0 14px #8fdd4c); }
  100% { transform: scale(1); }
}

/* hero hit flash */
.hero.hit { animation: heroHit 0.45s ease-out; }
@keyframes heroHit {
  0% { box-shadow: 0 0 0 rgba(226, 84, 62, 0); }
  30% { box-shadow: 0 0 34px rgba(226, 84, 62, 0.9); background: #3a1710; }
  100% { box-shadow: 0 0 0 rgba(226, 84, 62, 0); }
}
.hero.healed { animation: heroHeal 0.5s ease-out; }
@keyframes heroHeal {
  30% { box-shadow: 0 0 30px rgba(143, 221, 76, 0.8); }
}

/* screen shake */
.shake-hard { animation: shakeHard 0.4s; }
@keyframes shakeHard {
  0%, 100% { transform: none; }
  20% { transform: translate(-7px, 3px); }
  40% { transform: translate(6px, -4px); }
  60% { transform: translate(-4px, 2px); }
  80% { transform: translate(3px, -1px); }
}
.shake-soft { animation: shakeSoft 0.3s; }
@keyframes shakeSoft {
  0%, 100% { transform: none; }
  30% { transform: translate(-3px, 2px); }
  70% { transform: translate(3px, -2px); }
}

/* targeting arrows */
#arrow-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 78;
  pointer-events: none;
}
#arrow-layer line {
  stroke: var(--danger);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  filter: drop-shadow(0 0 6px rgba(226, 84, 62, 0.8));
  animation: arrowFlow 0.6s linear infinite;
}
#arrow-layer line.block-line { stroke: #7ed6ff; filter: drop-shadow(0 0 6px rgba(126, 214, 255, 0.8)); }
@keyframes arrowFlow { to { stroke-dashoffset: -14; } }
#arrow-layer polygon { fill: var(--danger); }
#arrow-layer polygon.block-head { fill: #7ed6ff; }

/* ============ V2 animation upgrades (inherited by all editions) ============ */

/* playable hand cards breathe so your options read at a glance */
.hand-row .card.playable { animation: playableBreath 1.8s ease-in-out infinite; }
@keyframes playableBreath {
  0%, 100% { box-shadow: 0 0 10px rgba(216,194,107,0.35); }
  50% { box-shadow: 0 0 20px rgba(216,194,107,0.65); transform: translateY(-2px); }
}

/* deeper, snappier hand hover */
.hand-row .card:hover { transform: translateY(-16px) scale(1.1) rotate(-1deg); z-index: 40; }

/* field beasts idle-bob, staggered, so the board feels alive */
.field-row .card:not(.tapped):not(.dying) { animation: idleBob 4.5s ease-in-out infinite; }
.field-row .card:nth-child(2n) { animation-delay: -1.2s; }
.field-row .card:nth-child(3n) { animation-delay: -2.4s; }
.field-row .card:nth-child(4n) { animation-delay: -3.1s; }
@keyframes idleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.field-row .card:hover { animation: none; }

/* light sweep across any card on hover (not just legendaries) */
.card::after {
  content: "";
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 130% 0;
  opacity: 0;
}
.card:hover::after { opacity: 1; animation: sweep 0.6s ease-out; }
@keyframes sweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* essence pip pops when it fills */
.hero .essence .pip.full { animation: pipPop 0.3s ease-out; }
@keyframes pipPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* attack impact shock ring spawned by JS (.impact-ring in #fx-layer) */
.impact-ring {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 3px solid var(--danger);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: shockRing 0.5s ease-out forwards;
}
@keyframes shockRing {
  from { opacity: 0.9; width: 12px; height: 12px; border-width: 4px; }
  to { opacity: 0; width: 120px; height: 120px; border-width: 1px; }
}

/* summon flash halo when a beast lands (.summon-halo on the card) */
.card.summon-flash { animation: summonFlash 0.55s ease-out; }
@keyframes summonFlash {
  0% { transform: scale(0.7); filter: brightness(2.4); }
  55% { transform: scale(1.1); filter: brightness(1.4); }
  100% { transform: scale(1); filter: none; }
}

/* menu items stagger in */
.menu-item { animation: menuItemIn 0.5s ease-out backwards; }
.menu-item:nth-child(1) { animation-delay: 0.05s; }
.menu-item:nth-child(2) { animation-delay: 0.11s; }
.menu-item:nth-child(3) { animation-delay: 0.17s; }
.menu-item:nth-child(4) { animation-delay: 0.23s; }
.menu-item:nth-child(5) { animation-delay: 0.29s; }
.menu-item:nth-child(6) { animation-delay: 0.35s; }
.menu-item:nth-child(7) { animation-delay: 0.41s; }
@keyframes menuItemIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }