/* ============================================================
   public/Spellsanimations/hit.css
   Efeito de "impacto de acerto" (estilo act-hit do jogo antigo):
   uma única imagem (HitAnim.png) ancorada no centro do tile do
   alvo, que gira +~100° e encolhe até ~metade em ~0,17s (10
   frames) antes de sumir — um "flash de acerto" que estoura e
   murcha rapidinho.

   Renderizado em DOM (meleeFxLayer) por cima do canvas. Uso:
   spawnHitAnimFX(x, y) em game.js.
   ============================================================ */

.hit-fx {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    transform-origin: center center;
    /* Ancorado no centro do tile; o JS já somou TILE_SIZE/2. */
    transform: translate(-50%, -50%);
    opacity: 0.75;
}

.hit-fx__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/animation/Effects/AttackEffect/HitAni.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* 10 frames (steps(10)) = 10 steps do contador original:
       gira +10°/frame até ~100° e encolhe −3/-3 por frame até ~metade,
       sumindo no fim (sprite some quando o contador zera). */
    animation: hit-fx-pop 0.4s steps(10) forwards;
}

@keyframes hit-fx-pop {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    80% {
        transform: rotate(96deg) scale(1.08);
        opacity: 1;
    }
    90% {
        transform: rotate(100deg) scale(0.52);
        opacity: 1;
    }
    100% {
        transform: rotate(100deg) scale(0.5);
        opacity: 0;
    }
}