/* ============================================================
   public/Spellsanimations/Axe/axethrow.css
   Efeito da magia de arma "Axe Throw" (axe 25): o ÍCONE DA ARMA
   EQUIPADA (sprite do machado, <img> vindo do weaponIcon do
   servidor) é arremessado do caster até o alvo (linha, até 7
   sqm), girando 1080° (3 voltas) no próprio eixo, e estoura
   com faíscas no tile alvo. 100% CSS/DOM, sem sprite sheet.

   Integração: #melee-fx-layer + spawnAxeThrowFX() em game.js
   (lazy-load de CSS via ensureSpellFxStyles('Axe/axethrow')).
   O .axethrow-fx é ancorado no CENTRO do tile do caster e o JS
   grava o caminho em 12 passos inteiros nas custom properties
   --t0x..--t12x / --t0y..--t12y que os keyframes leem (mesmo
   esquema "pixel art cru" do throw.css). O servidor manda
   x/y como CANTO do tile alvo — o +TILE_SIZE/2 do âncora
   cancela no delta e o machado pousa no centro do alvo.

   O dano (hitDelayMs 550 no server/spells/db.js) cai exatamente
   quando o machado CHEGA no alvo (voo de 0.55s fixo).
   ============================================================ */

.axethrow-fx {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 40;
    image-rendering: pixelated;
}

/* MACHADO — o ícone da arma equipada, girando no próprio eixo
   (transform-origin no centro do img; 26px como no AxeSpin). */
.axethrow-fx__axe {
    position: absolute;
    left: -13px;
    top: -13px;
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0;
    animation: axethrow-fly 0.55s steps(1) forwards;
}

/* Impacto no alvo (posição setada via JS no delta do tile alvo) */
.axethrow-fx__impact {
    position: absolute;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        -1px 0px #ffe600, 0px -1px #ffe600, 0px 0px #ffffff, 0px 1px #ffe600, 1px 0px #ffe600;
    opacity: 0;
    animation: axethrow-impact 0.25s steps(1) 0.50s forwards;
}

/* Voo: 13 poses (12 passos = 1080° de giro). As posições
   --tNx/--tNy são inteiros gravados pelo JS — cada passo é um
   quadro cru (sem interpolação fracionária). steps(1) trava os
   quadros. */
@keyframes axethrow-fly {
    0%   { transform: translate(var(--t0x), var(--t0y)) rotate(0deg);   opacity: 0; }
    8%   { transform: translate(var(--t1x), var(--t1y)) rotate(90deg);  opacity: 1; }
    17%  { transform: translate(var(--t2x), var(--t2y)) rotate(180deg); }
    25%  { transform: translate(var(--t3x), var(--t3y)) rotate(270deg); }
    33%  { transform: translate(var(--t4x), var(--t4y)) rotate(360deg); }
    42%  { transform: translate(var(--t5x), var(--t5y)) rotate(450deg); }
    50%  { transform: translate(var(--t6x), var(--t6y)) rotate(540deg); }
    58%  { transform: translate(var(--t7x), var(--t7y)) rotate(630deg); }
    67%  { transform: translate(var(--t8x), var(--t8y)) rotate(720deg); }
    75%  { transform: translate(var(--t9x), var(--t9y)) rotate(810deg); }
    83%  { transform: translate(var(--t10x), var(--t10y)) rotate(900deg); }
    92%  { transform: translate(var(--t11x), var(--t11y)) rotate(990deg); }
    100% { transform: translate(var(--t12x), var(--t12y)) rotate(1080deg); opacity: 0; }
}

@keyframes axethrow-impact {
    0%   { transform: translate(0px, 0px); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}