/* ============================================================
   public/Spellsanimations/throw.css
   Efeito da spell "Weapon Throw" do Knight (arremesso_de_arma): a
   espada em pixel art (box-shadow) é arremessada do personagem em
   direção ao alvo, girando 1080° (3 voltas) em torno do próprio
   centro, e termina com um impacto no alvo. 100% CSS/DOM, sem
   PNG/sprite sheet.

   Integração: #melee-fx-layer + spawnThrowFX() em game.js.
   O .throw-fx é ancorado no CENTRO do tile do caster. A distância
   do voo é VARIÁVEL (range até 5 tiles = até 80px), então o JS
   calcula o caminho em 12 passos inteiros e grava nas custom
   properties --t0x..--t12x / --t0y..--t12y que os keyframes leem.
   Isso mantém o "pixel art cru": cada pose é um translate inteiro
   (sem interpolação fracionária de var() * k).

   O dano (hitDelayMs 550) cai exatamente quando a espada chega no
   alvo (voo de 0.55s fixo, independente da distância).
   ============================================================ */

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

/* ------------------------------------------------------------
   PALETA DE CORES (mesma da espada do knight):
   #110505 = Outline / Contorno escuro do metal
   #33333f = Grip / couro escuro do cabo
   #5a5a6e = Aço base (tom médio da lâmina)
   #9a9ab0 = Highlight / Brilho da lâmina polida
   #f1c40f = Guarda dourada
   #d92b25 = Gema vermelha do pomo
   #ffe600 / #ffffff = Faíscas de impacto
   ------------------------------------------------------------ */

/* ESPADA — gira em torno do próprio centro (pivot 4px 7px) */
.throw-fx__sword {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: 4px 7px;
    box-shadow:
        4px 0px #110505, 5px 0px #110505,
        3px 1px #110505, 4px 1px #9a9ab0, 5px 1px #9a9ab0, 6px 1px #110505,
        3px 2px #110505, 4px 2px #9a9ab0, 5px 2px #5a5a6e, 6px 2px #110505,
        3px 3px #110505, 4px 3px #9a9ab0, 5px 3px #5a5a6e, 6px 3px #110505,
        3px 4px #110505, 4px 4px #9a9ab0, 5px 4px #5a5a6e, 6px 4px #110505,
        3px 5px #110505, 4px 5px #9a9ab0, 5px 5px #5a5a6e, 6px 5px #110505,
        3px 6px #110505, 4px 6px #9a9ab0, 5px 6px #5a5a6e, 6px 6px #110505,
        3px 7px #110505, 4px 7px #9a9ab0, 5px 7px #5a5a6e, 6px 7px #110505,
        1px 8px #110505, 2px 8px #f1c40f, 3px 8px #f1c40f, 4px 8px #f1c40f, 5px 8px #f1c40f, 6px 8px #f1c40f, 7px 8px #f1c40f, 8px 8px #110505,
        2px 9px #110505, 3px 9px #f1c40f, 4px 9px #f1c40f, 5px 9px #f1c40f, 6px 9px #f1c40f, 7px 9px #f1c40f, 8px 9px #110505,
        3px 10px #110505, 4px 10px #33333f, 5px 10px #33333f, 6px 10px #110505,
        3px 11px #110505, 4px 11px #33333f, 5px 11px #33333f, 6px 11px #110505,
        3px 12px #110505, 4px 12px #33333f, 5px 12px #33333f, 6px 12px #110505,
        3px 13px #110505, 4px 13px #d92b25, 5px 13px #d92b25, 6px 13px #110505,
        4px 14px #110505, 5px 14px #110505;

    opacity: 0;
    animation: throw-fly 0.55s steps(1) forwards;
}

/* Impacto no alvo (posição setada via JS no centro do tile alvo) */
.throw-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: throw-impact 0.25s steps(1) 0.50s forwards;
}

/* Voo: 13 poses (12 passos de 90° = 1080°). As posições --tNx/--tNy
   são valores inteiros gravados pelo JS — cada passo é um pixel-art
   cru (sem interpolação fracionária). steps(1) trava os quadros. */
@keyframes throw-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 throw-impact {
    0%   { transform: translate(0px, 0px); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}