/* ============================================================
   public/Spellsanimations/rapidstrikes.css
   Efeito da spell "Quick Strikes" do Knight (golpes_rapidos): a
   espada em pixel art (box-shadow) executa uma sequência de golpes
   rápidos alternando pra baixo e pra cima, com rastros e faísca
   final. 100% CSS/DOM, sem PNG/sprite sheet.

   Integração: #melee-fx-layer + spawnRapidStrikesFX() em game.js.
   O .strikes-fx é ancorado no CENTRO do tile do caster (data.x/
   data.y vêm do servidor como o canto sup-esq do SQM; somamos
   TILE_SIZE/2). O .strikes-fx__rotor (32x32 em -16,-16) gira com
   --strikes-angle (direção caster→alvo travada em 8 direções), e o
   pivot do rotor (16,16) cai no centro do caster, então virando o
   personagem a rajada vira junto.

   Pixel art cru: todos os golpes usam translate/rotate com valores
   inteiros e steps(1) — nada de easing contínuo nem scale
   fracionário. Opacidades podem usar easing suave (não borra px).
   ============================================================ */

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

/* Rotor 32x32 centrado no caster (palco em -16,-16, pivot 16,16) */
.strikes-fx__rotor {
    position: absolute;
    left: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
    transform: rotate(var(--strikes-angle));
}

/* ------------------------------------------------------------
   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 — pivot no cabo (4px 14px) */
.strikes-fx__sword {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: 4px 14px;
    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: strikes-swing 0.65s steps(1) forwards;
}

/* Rastro do golpe (linha diagonal branco→aço) */
.strikes-fx__trail {
    position: absolute;
    top: 10px;
    left: 9px;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        0px 0px #ffffff, 2px -2px #f1f1f1, 4px -4px #cfcfcf, 6px -6px #9a9ab0, 8px -8px #5a5a6e;
}

.strikes-fx__trail--1 { transform: rotate(35deg);   animation: strikes-flick 0.65s ease-out 0.20s forwards; }
.strikes-fx__trail--2 { transform: rotate(-150deg); animation: strikes-flick 0.65s ease-out 0.40s forwards; }
.strikes-fx__trail--3 { transform: rotate(40deg);   animation: strikes-flick 0.65s ease-out 0.62s forwards; }

/* Faísca final do último golpe (8 direções, delay via JS) */
.strikes-fx__star {
    position: absolute;
    top: 17px;
    left: 6px;
    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: strikes-star 0.4s steps(1) forwards;
}

/* Rajada de golpes: 16 poses com steps(1), todos os valores inteiros.
   O dano (hitDelayMs 400) cai no meio da rajada, quando o segundo
   rastro (0.40s) flasheia — o flurry está no auge. */
@keyframes strikes-swing {
    0%   { transform: translate(18px, 4px) rotate(60deg);  opacity: 0; }
    6%   { transform: translate(18px, 4px) rotate(60deg);  opacity: 1; }
    13%  { transform: translate(12px, 8px) rotate(10deg); }
    20%  { transform: translate(6px, 11px) rotate(-30deg); }
    26%  { transform: translate(5px, 12px) rotate(-45deg); }
    33%  { transform: translate(9px, 9px) rotate(10deg); }
    40%  { transform: translate(14px, 5px) rotate(55deg); }
    46%  { transform: translate(9px, 9px) rotate(0deg); }
    53%  { transform: translate(4px, 13px) rotate(-55deg); }
    60%  { transform: translate(10px, 8px) rotate(5deg); }
    67%  { transform: translate(15px, 4px) rotate(60deg); }
    74%  { transform: translate(9px, 9px) rotate(-15deg); }
    81%  { transform: translate(3px, 14px) rotate(-65deg); }
    87%  { transform: translate(6px, 12px) rotate(-40deg); }
    94%  { transform: translate(2px, 15px) rotate(-55deg); }
    100% { transform: translate(-2px, 18px) rotate(-70deg); opacity: 0; }
}

@keyframes strikes-flick {
    0%, 100% { opacity: 0; }
    5%       { opacity: 0.9; }
    14%      { opacity: 0; }
}

@keyframes strikes-star {
    0%   { transform: translate(0px, 0px); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}