/* ═══ Battle SVG VFX Overlay — ENHANCED FOR VISIBILITY ═══ */
#battle-svg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  border-radius: 16px;
}

/* ═══ SLASH ANIMATIONS — BIGGER & MORE IMPACTFUL ═══ */
@keyframes slash-draw {
  0% { stroke-dashoffset: 1200; opacity: 1; stroke-width: 12px; }
  40% { stroke-dashoffset: 0; opacity: 1; stroke-width: 8px; }
  100% { stroke-dashoffset: 0; opacity: 0; stroke-width: 2px; }
}
@keyframes slash-draw-fast {
  0% { stroke-dashoffset: 1000; opacity: 1; stroke-width: 10px; }
  40% { stroke-dashoffset: 0; opacity: 1; stroke-width: 6px; }
  100% { stroke-dashoffset: 0; opacity: 0; stroke-width: 1px; }
}
@keyframes slash-draw-crit {
  0% { stroke-dashoffset: 1500; opacity: 1; stroke-width: 16px; }
  30% { stroke-dashoffset: 0; opacity: 1; stroke-width: 12px; }
  100% { stroke-dashoffset: 0; opacity: 0; stroke-width: 2px; }
}
.svg-slash path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: slash-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  stroke: #ff6b6b !important;
  filter: drop-shadow(0 0 10px #ff0000);
}
.svg-slash.fast path {
  stroke-dasharray: 1000;
  animation: slash-draw-fast 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  stroke: #ffd700 !important;
  filter: drop-shadow(0 0 8px #ffa500);
}
.svg-slash.crit path {
  stroke-dasharray: 1500;
  animation: slash-draw-crit 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  stroke: #ff0000 !important;
  filter: drop-shadow(0 0 15px #ff0000) drop-shadow(0 0 30px #ff6600);
}

/* ═══ KILL SCREEN SPLIT ═══ */
@keyframes screen-split-left {
  0% { transform: translateX(0); }
  30% { transform: translateX(-8px); }
  100% { transform: translateX(0); }
}
@keyframes screen-split-right {
  0% { transform: translateX(0); }
  30% { transform: translateX(8px); }
  100% { transform: translateX(0); }
}
.screen-split-left { animation: screen-split-left 0.4s ease-out; }
.screen-split-right { animation: screen-split-right 0.4s ease-out; }

/* ═══ ENERGY RING ═══ */
@keyframes ring-expand {
  0% { r: 5; opacity: 1; stroke-width: 6; }
  70% { opacity: 0.8; }
  100% { r: 120; opacity: 0; stroke-width: 1; }
}
@keyframes ring-expand-large {
  0% { r: 5; opacity: 1; stroke-width: 8; }
  60% { opacity: 0.6; }
  100% { r: 200; opacity: 0; stroke-width: 0.5; }
}

/* ═══ BRUSH STROKE TEXT ═══ */
@keyframes brush-write {
  0% { stroke-dashoffset: 500; fill-opacity: 0; }
  70% { stroke-dashoffset: 0; fill-opacity: 0; }
  85% { fill-opacity: 1; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}
@keyframes brush-fade {
  0% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}
.brush-text text {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: brush-write 0.6s ease-out forwards;
}
.brush-text {
  animation: brush-fade 1.2s ease-out forwards;
}

/* ═══ INK SPLASH ═══ */
@keyframes ink-expand {
  0% { transform: scale(0); opacity: 0.9; }
  50% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
.ink-splash {
  animation: ink-expand 0.6s ease-out forwards;
  transform-origin: center;
}

/* ═══ SHOCKWAVE RING ═══ */
@keyframes shockwave {
  0% { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}
.shockwave-ring {
  animation: shockwave 0.5s ease-out forwards;
  transform-origin: center;
}

/* ═══ SCREEN FLASH ═══ */
@keyframes vfx-flash-white {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}
@keyframes vfx-flash-gold {
  0% { opacity: 0.5; }
  100% { opacity: 0; }
}
.vfx-flash {
  position: absolute; inset: 0;
  animation: vfx-flash-white 0.2s ease-out forwards;
}

/* ═══ SCREEN SHAKE ═══ */
@keyframes vfx-shake-heavy {
  0% { transform: translate(0,0); }
  10% { transform: translate(-6px, 4px); }
  20% { transform: translate(5px, -6px); }
  30% { transform: translate(-4px, 2px); }
  40% { transform: translate(3px, -3px); }
  50% { transform: translate(-2px, 4px); }
  60% { transform: translate(2px, -1px); }
  70% { transform: translate(-1px, 2px); }
  100% { transform: translate(0,0); }
}
@keyframes vfx-shake-light {
  0% { transform: translate(0,0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(2px, -3px); }
  75% { transform: translate(-1px, 1px); }
  100% { transform: translate(0,0); }
}

/* ═══ KILL KANJI ═══ */
@keyframes kanji-slam {
  0% { transform: scale(3); opacity: 0; }
  20% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
.kill-kanji {
  animation: kanji-slam 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ═══ VICTORY ═══ */
@keyframes victory-text-bounce {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  70% { transform: scale(0.9); }
  85% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.victory-text {
  animation: victory-text-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ═══ DEFEAT ═══ */
@keyframes defeat-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.defeat-text {
  animation: defeat-fade 1.5s ease-in forwards;
}

/* ═══ ELEMENT AURAS ═══ */
@keyframes fire-pulse {
  0%, 100% { filter: blur(4px) brightness(1.2); opacity: 0.8; }
  50% { filter: blur(8px) brightness(1.5); opacity: 1; }
}
@keyframes lightning-flicker {
  0%, 100% { opacity: 1; }
  10% { opacity: 0.2; }
  20% { opacity: 1; }
  50% { opacity: 0.5; }
  60% { opacity: 1; }
}
@keyframes ice-shimmer {
  0% { filter: blur(2px) brightness(1); }
  50% { filter: blur(4px) brightness(1.3); }
  100% { filter: blur(2px) brightness(1); }
}

/* ═══ ENERGY BEAM ═══ */
@keyframes beam-fire {
  0% { stroke-dashoffset: 400; opacity: 0; }
  10% { opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ═══ DISSOLVE PARTICLES ═══ */
@keyframes dissolve-particle {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
.dissolve-p {
  animation: dissolve-particle var(--dur, 0.6s) ease-out forwards;
}

/* ═══ SKILL OVERLAY DIM ═══ */
@keyframes skill-dim-in {
  0% { opacity: 0; }
  100% { opacity: 0.5; }
}
@keyframes skill-dim-out {
  0% { opacity: 0.5; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════ */
/*  SKILL CUT-IN ANIMATION SYSTEM — External CSS Keyframes       */
/*  These supplement the inline SVG <style> animations            */
/* ═══════════════════════════════════════════════════════════════ */

/* ── Cut-in overlay ── */
#skill-cutin-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
}

/* ── Slide in from left ── */
@keyframes cutin-slide-left {
  0% { transform: translateX(-120%); opacity: 0; }
  15% { transform: translateX(0); opacity: 1; }
  75% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* ── Slide in from right ── */
@keyframes cutin-slide-right {
  0% { transform: translateX(120%); opacity: 0; }
  15% { transform: translateX(0); opacity: 1; }
  75% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

/* ── Slam down from top ── */
@keyframes cutin-slam-down {
  0% { transform: translateY(-200%); opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  13% { transform: translateY(-8px); }
  16% { transform: translateY(0); }
  75% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ── Charge across screen ── */
@keyframes cutin-charge {
  0% { transform: translateX(-150%); opacity: 0; }
  5% { opacity: 1; }
  50% { transform: translateX(150%); opacity: 1; }
  51% { opacity: 0; }
  100% { opacity: 0; }
}

/* ── Center appear with scale ── */
@keyframes cutin-center-appear {
  0% { transform: scale(0); opacity: 0; }
  15% { transform: scale(1.15); opacity: 1; }
  25% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Fade everything out ── */
@keyframes cutin-fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Blade sweep arc ── */
@keyframes cutin-blade-sweep {
  0% { stroke-dashoffset: 1200; opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ── Afterimage trail ── */
@keyframes cutin-afterimage {
  0% { opacity: var(--ai-opacity, 0.5); }
  100% { opacity: 0; }
}

/* ── Expanding shockwave rings ── */
@keyframes cutin-shockwave {
  0% { r: 5; opacity: 0.9; stroke-width: 5; }
  100% { r: 200; opacity: 0; stroke-width: 0.5; }
}

/* ── Floating petal motion ── */
@keyframes cutin-petals {
  0% { transform: translate(0,0) rotate(0deg) scale(0.5); opacity: 0; }
  20% { opacity: 0.8; transform: translate(20px, -15px) rotate(90deg) scale(1); }
  60% { opacity: 0.6; transform: translate(50px, 20px) rotate(200deg) scale(0.9); }
  100% { opacity: 0; transform: translate(80px, 60px) rotate(360deg) scale(0.3); }
}

/* ── Arrow trajectory ── */
@keyframes cutin-arrow-fly {
  0% { stroke-dashoffset: 500; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.5; }
}

/* ── Fire wave sweep ── */
@keyframes cutin-fire-wave {
  0% { transform: translateX(-100%); opacity: 1; }
  60% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(20%); opacity: 0; }
}

/* ── Background darkens ── */
@keyframes cutin-background-dim {
  0% { opacity: 0; }
  10% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}