/* ===== EFEITO DE SKILL ===== */

/* ===== FX BASE ===== */
.skill-fx{
  position:fixed;
  width:25px;
  height:25px;
  border-radius:50%;
  pointer-events:none;

  transform:translate(-50%, -50%) scale(0);
  animation:skillBurst 0.5s ease-out forwards;

  z-index:999;
}

/* cores */
.skill-red{
  background:radial-gradient(circle,#ffaaaa,#ff0000,transparent);
}

.skill-blue{
  background:radial-gradient(circle,#aaddff,#0088ff,transparent);
}

.skill-gold{
  background:radial-gradient(circle,#fff5aa,#ffd700,transparent);
}

/* explosão */
@keyframes skillBurst{
  0%{
    transform:translate(-50%, -50%) scale(0);
    opacity:1;
  }
  70%{
    transform:translate(-50%, -50%) scale(5);
    opacity:0.8;
  }
  100%{
    transform:translate(-50%, -50%) scale(7);
    opacity:0;
  }
}

/* ===== PARTÍCULAS ===== */
.particle{
  position:fixed;
  width:6px;
  height:6px;
  border-radius:50%;
  pointer-events:none;
  z-index:999;

  animation:particleMove 0.6s linear forwards;
}

@keyframes particleMove{
  to{
    transform:translate(var(--dx), var(--dy));
    opacity:0;
  }
}