/* ============================================================
   SKILL ANIMATION KEYFRAMES
   All animation primitives used by skillAnimations.js
   ============================================================ */

/* ── Screen overlays ─────────────────────────────────────────── */
@keyframes sa-flash {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sa-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Slash / blade ────────────────────────────────────────────── */
@keyframes sa-slash {
  0%   { transform: rotate(var(--sa-angle, -45deg)) translateX(-130%); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: rotate(var(--sa-angle, -45deg)) translateX(130%);  opacity: 0.2; }
}

@keyframes sa-slash-multi {
  0%   { transform: rotate(var(--sa-angle, -45deg)) translateX(-130%); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: rotate(var(--sa-angle, -45deg)) translateX(130%);  opacity: 0; }
}

/* ── Circles / rings ─────────────────────────────────────────── */
@keyframes sa-ring-expand {
  0%   { transform: scale(0.1); opacity: 1; }
  80%  { opacity: 0.6; }
  100% { transform: scale(var(--sa-scale, 6)); opacity: 0; }
}

@keyframes sa-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sa-spin-shrink {
  0%   { transform: rotate(0deg)   scale(1.2); opacity: 1; }
  100% { transform: rotate(720deg) scale(0.2); opacity: 0; }
}

/* ── Projectile / orb ────────────────────────────────────────── */
@keyframes sa-orb-pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 6px 2px var(--sa-color); }
  50%  { transform: scale(1.3); box-shadow: 0 0 16px 6px var(--sa-color); }
  100% { transform: scale(1);   box-shadow: 0 0 6px 2px var(--sa-color); }
}

@keyframes sa-impact {
  0%   { transform: scale(0);   opacity: 1; }
  60%  { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Aura / glow ─────────────────────────────────────────────── */
@keyframes sa-aura-pulse {
  0%   { box-shadow: 0 0 0   0   var(--sa-color, #4488ff); }
  40%  { box-shadow: 0 0 28px 10px var(--sa-color, #4488ff); }
  100% { box-shadow: 0 0 6px  2px  var(--sa-color, #4488ff); }
}

@keyframes sa-glow-in-out {
  0%   { filter: brightness(1)   drop-shadow(0 0 0px   var(--sa-color, #fff)); }
  40%  { filter: brightness(2.5) drop-shadow(0 0 20px  var(--sa-color, #fff)); }
  100% { filter: brightness(1)   drop-shadow(0 0 0px   var(--sa-color, #fff)); }
}

/* ── Particles ───────────────────────────────────────────────── */
@keyframes sa-particle-up {
  0%   { transform: translateY(0)   translateX(0)   scale(1);   opacity: 1; }
  100% { transform: translateY(-80px) translateX(var(--sa-dx, 0px)) scale(0); opacity: 0; }
}

@keyframes sa-particle-burst {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sa-dx, 0), var(--sa-dy, 0)) scale(0); opacity: 0; }
}

/* ── Screen shake ────────────────────────────────────────────── */
@keyframes sa-shake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-10px, 5px); }
  30%  { transform: translate(10px, -5px); }
  45%  { transform: translate(-7px, 7px); }
  60%  { transform: translate(7px, -4px); }
  75%  { transform: translate(-4px, 4px); }
  90%  { transform: translate(4px, -2px); }
  100% { transform: translate(0, 0); }
}

/* ── Special ─────────────────────────────────────────────────── */
@keyframes sa-dark-pulse {
  0%   { background: rgba(0,0,0,0); }
  40%  { background: rgba(0,0,0,0.55); }
  100% { background: rgba(0,0,0,0); }
}

@keyframes sa-ripple-out {
  0%   { transform: scale(0.2); opacity: 0.9; border-width: 8px; }
  100% { transform: scale(3.5); opacity: 0;   border-width: 1px; }
}

@keyframes sa-beam-h {
  0%   { transform: scaleX(0); opacity: 0; }
  15%  { opacity: 1; }
  60%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ── Damage number float ─────────────────────────────────────── */
@keyframes dmg-float {
  0%   { opacity: 1;   transform: translateX(-50%) translateY(0)     scale(1);   }
  15%  { opacity: 1;   transform: translateX(-50%) translateY(-8px)  scale(1.1); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-62px) scale(0.85); }
}

/* ── Heal sparkle ────────────────────────────────────────────── */
@keyframes sa-cross-pop {
  0%   { transform: scale(0) rotate(0deg);   opacity: 1; }
  60%  { transform: scale(1) rotate(15deg);  opacity: 1; }
  100% { transform: scale(1.5) rotate(30deg);opacity: 0; }
}

/* ── Party wipe overlay ──────────────────────────────────────── */
@keyframes wipe-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wipe-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.wipe-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6, 0, 0, 0.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  animation: wipe-in 0.6s ease-out forwards;
  pointer-events: none;
}
.wipe-overlay.wipe-fadeout { animation: wipe-out 0.6s ease-in forwards; }
.wipe-skull {
  font-size: 56px;
  animation: wipe-in 0.4s 0.2s ease-out both;
  filter: grayscale(0.3);
}
.wipe-title {
  font-family: var(--font-pixel, monospace);
  font-size: 20px;
  color: #cc2222;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(200,30,30,0.8), 0 0 40px rgba(200,30,30,0.4);
  animation: wipe-in 0.4s 0.35s ease-out both;
}
.wipe-sub {
  font-size: 15px;
  color: #888;
  animation: wipe-in 0.4s 0.5s ease-out both;
}
.wipe-penalty {
  font-family: var(--font-pixel, monospace);
  font-size: 11px;
  color: #e06040;
  margin-top: 8px;
  animation: wipe-in 0.4s 0.7s ease-out both;
}
.wipe-respawn {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
  animation: wipe-in 0.4s 1.2s ease-out both;
}

/* ── Enemy announce banner ───────────────────────────────────── */
@keyframes ea-slidein {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);   }
}
@keyframes ea-slideout {
  from { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
  to   { opacity: 0; transform: translateX(-50%) translateY(4px)  scale(0.92); }
}
.enemy-announce {
  position: absolute;
  /* fallback when no monster element found */
  top: 10%; left: 50%;
  transform: translateX(-50%);
  background: rgba(12, 2, 2, 0.94);
  border: 2px solid #993333;
  border-radius: 8px;
  padding: 14px 22px;
  text-align: center;
  z-index: 160;
  min-width: 200px;
  max-width: 280px;
  pointer-events: none;
  animation: ea-slidein 0.18s ease-out forwards;
  box-shadow: 0 0 24px rgba(180,40,40,0.45), 0 0 6px rgba(0,0,0,0.8);
}
.enemy-announce.ea-fadeout { animation: ea-slideout 0.28s ease-in forwards; }
.ea-actor {
  font-family: var(--font-pixel, monospace);
  font-size: 8px;
  color: #cc4444;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.ea-skill {
  font-family: var(--font-pixel, monospace);
  font-size: 13px;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 80, 80, 0.7);
  margin-bottom: 4px;
}
.ea-elem {
  font-size: 10px;
  opacity: 0.85;
  margin-bottom: 4px;
}
.ea-effect {
  font-size: 11px;
  color: #9999bb;
  margin-bottom: 6px;
  line-height: 1.4;
}
.ea-target {
  display: flex;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 7px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.ea-target-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.ea-portrait {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #f0b840;
  box-shadow: 0 0 6px rgba(240,184,64,0.4);
}
.ea-pname {
  font-size: 9px;
  color: #f0b840;
  max-width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}