.hp {
  position: absolute;
  border-radius: 50%;
  animation: hpFloat linear infinite;
  opacity: 0;
  pointer-events: none;
}
@keyframes hpFloat {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  8%   { opacity: 0.9; }
  92%  { opacity: 0.2; }
  100% { transform: translateY(-15vh) rotate(540deg); opacity: 0; }
}
</style>