/* ============================================================
   public/Spellsanimations/bash.css
   Efeito da spell "Shield Bash" do Knight (golpe_escudo): um
   escudo de aço em pixel art (box-shadow) é puxado pra trás e
   dado um golpe de empurrão pra frente, com rastro atrás e
   estrelinhas no impacto. 100% CSS/DOM, sem PNG/sprite sheet.

   Integração: #melee-fx-layer + spawnBashFX() em game.js.
   O .bash-fx é posicionado no canto superior-esquerdo do SQM do
   caster (left/top via JS, mesmo esquema do soco). O .bash-fx__rotor
   gira com --bash-angle (direção caster→alvo, travada em 8
   direções): como o escudo é desenhado avançando pra +X (igual o
   punho do punch), NÃO precisa do offset de +90° do clash. Virando
   o personagem, o bash vira junto.

   Pixel art cru: todos os movimentos são steps(1) com valores em
   px inteiros (sem easing contínuo, sem scale fracionário).
   Impacto em 45% ≈ 0.225s, batendo com o hitDelayMs: 250 do
   servidor.
   ============================================================ */

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

/* Rotor 0x0 com pivot NO CENTRO DO TILE DO CASTER:
   - O .bash-fx fica no canto superior-esquerdo do tile do caster
     (casterX/casterY via JS).
   - O rotor é deslocado pra left:1px / top:2px e o transform-origin
     7px 6px faz o pivot cair em (casterX+8, casterY+8) = centro do
     tile do caster. Assim o empurrão gira em volta do corpo do
     personagem, acompanhando a direção do ataque.
   - No impacto (45%), a frente do escudo está 16px adiante do pivot
     (stage x=23, origin x=7). O --bash-reach (px, via JS) empurra o
     rotor ao longo da direção castada pra compensar a distância até o
     centro do tile alvo: 0px nos cardeais (16px de distância) e ~7px
     nas diagonais (~22,6px) → o final da animação bate NO CENTRO do
     tile alvo em qualquer direção. */
.bash-fx__rotor {
    position: absolute;
    left: 1px;
    top: 2px;
    width: 0;
    height: 0;
    transform: rotate(var(--bash-angle, 0deg)) translateX(var(--bash-reach, 0px));
    transform-origin: 7px 6px;
    will-change: transform;
}

/* ------------------------------------------------------------
   PALETA DE CORES:
   #110505 = Outline / Contorno escuro do metal
   #33333f = Sombra profunda do aço
   #5a5a6e = Aço base (tom médio)
   #9a9ab0 = Highlight / Brilho do metal polido
   #f1c40f = Borda dourada / Reforço
   #d92b25 = Gema/brasão vermelho
   #ff6b63 = Brilho da gema
   #ffe600 / #ffffff = Estrelinhas do impacto
   ------------------------------------------------------------ */

/* ESCUDO — avança da esquerda pra dar um golpe de empurrão */
.bash-fx__shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: 0 0;
    box-shadow:
        /* topo arredondado */
        14px 0px #110505, 15px 0px #f1c40f, 16px 0px #f1c40f, 17px 0px #f1c40f, 18px 0px #110505,
        13px 1px #110505, 14px 1px #f1c40f, 15px 1px #5a5a6e, 16px 1px #9a9ab0, 17px 1px #5a5a6e, 18px 1px #f1c40f, 19px 1px #110505,
        12px 2px #110505, 13px 2px #f1c40f, 14px 2px #5a5a6e, 15px 2px #9a9ab0, 16px 2px #9a9ab0, 17px 2px #9a9ab0, 18px 2px #5a5a6e, 19px 2px #f1c40f, 20px 2px #110505,

        /* corpo largo */
        11px 3px #110505, 12px 3px #5a5a6e, 13px 3px #5a5a6e, 14px 3px #9a9ab0, 15px 3px #9a9ab0, 16px 3px #9a9ab0, 17px 3px #9a9ab0, 18px 3px #9a9ab0, 19px 3px #5a5a6e, 20px 3px #5a5a6e, 21px 3px #110505,
        11px 4px #110505, 12px 4px #33333f, 13px 4px #5a5a6e, 14px 4px #9a9ab0, 15px 4px #9a9ab0, 16px 4px #d92b25, 17px 4px #9a9ab0, 18px 4px #9a9ab0, 19px 4px #5a5a6e, 20px 4px #33333f, 21px 4px #110505,
        11px 5px #110505, 12px 5px #33333f, 13px 5px #5a5a6e, 14px 5px #9a9ab0, 15px 5px #d92b25, 16px 5px #ff6b63, 17px 5px #d92b25, 18px 5px #9a9ab0, 19px 5px #5a5a6e, 20px 5px #33333f, 21px 5px #110505,
        11px 6px #110505, 12px 6px #33333f, 13px 6px #5a5a6e, 14px 6px #9a9ab0, 15px 6px #9a9ab0, 16px 6px #d92b25, 17px 6px #9a9ab0, 18px 6px #9a9ab0, 19px 6px #5a5a6e, 20px 6px #33333f, 21px 6px #110505,

        /* estreitando */
        12px 7px #110505, 13px 7px #33333f, 14px 7px #5a5a6e, 15px 7px #5a5a6e, 16px 7px #5a5a6e, 17px 7px #5a5a6e, 18px 7px #5a5a6e, 19px 7px #33333f, 20px 7px #110505,
        12px 8px #110505, 13px 8px #33333f, 14px 8px #33333f, 15px 8px #5a5a6e, 16px 8px #5a5a6e, 17px 8px #5a5a6e, 18px 8px #33333f, 19px 8px #33333f, 20px 8px #110505,
        13px 9px #110505, 14px 9px #33333f, 15px 9px #33333f, 16px 9px #5a5a6e, 17px 9px #33333f, 18px 9px #33333f, 19px 9px #110505,

        /* base em ponta */
        14px 10px #110505, 15px 10px #33333f, 16px 10px #33333f, 17px 10px #33333f, 18px 10px #110505,
        15px 11px #110505, 16px 11px #33333f, 17px 11px #110505,
        16px 12px #110505;

    animation: bash-push 0.5s steps(1) forwards;
}

/* Rastro atrás do escudo (fica no rotor, acompanha a direção) */
.bash-fx__trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        1px 10px #9a9ab0, 5px 8px #9a9ab0,
        -3px 12px #ffffff, 3px 4px #ffffff,
        -6px 14px #5a5a6e, -1px 6px #5a5a6e;
    animation: bash-trail 0.4s steps(1) forwards;
}

/* Estrelinha do impacto (uma por direção; --dx/--dy via JS, inteiros):
   pulam direto pro destino em 1 degrau e somem — sem scale, sem easing */
.bash-fx__star {
    position: absolute;
    top: 3px;
    left: 21px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        0px -2px #ffe600,
        0px -1px #ffffff,
        -2px 0px #ffe600,
        -1px 0px #ffffff,
        0px 0px #ffffff,
        1px 0px #ffffff,
        2px 0px #ffe600,
        0px 1px #ffffff,
        0px 2px #ffe600;
    opacity: 0;
    animation: bash-star 0.45s steps(1) 0.22s forwards;
}

/* Escudo puxado pra trás, girado, e crava no impacto. steps(1) com MUITOS
   keyframes de valores inteiros: cada degrau ainda é 1 frame nítido (sem
   anti-aliasing), mas com ~15 poses em 0,5s (~30fps) a passagem fica bem
   mais suave que os 6 frames antigos. Impacto em 45% ≈ 0.225s = hitDelayMs
   250 (frente do escudo em (2px,-1px) = centro do tile alvo). */
@keyframes bash-push {
    0%   { transform: translate(-14px, 6px) rotate(-35deg); opacity: 0; }
    6%   { transform: translate(-12px, 5px) rotate(-31deg); }
    12%  { transform: translate(-10px, 4px) rotate(-27deg); opacity: 1; }
    18%  { transform: translate(-8px, 3px) rotate(-23deg); }
    24%  { transform: translate(-6px, 2px) rotate(-19deg); }
    30%  { transform: translate(-4px, 1px) rotate(-15deg); }
    36%  { transform: translate(-2px, 0px) rotate(-11deg); }
    42%  { transform: translate(0px, -1px) rotate(-7deg); }
    45%  { transform: translate(2px, -1px) rotate(-5deg); opacity: 1; }   /* impacto */
    50%  { transform: translate(3px, -2px) rotate(1deg); }
    55%  { transform: translate(4px, -2px) rotate(4deg); }
    62%  { transform: translate(3px, -1px) rotate(3deg); }
    70%  { transform: translate(1px, 0px) rotate(0deg); }
    85%  { transform: translate(-1px, 1px) rotate(-2deg); }
    100% { transform: translate(-2px, 2px) rotate(-4deg); opacity: 0; }
}

@keyframes bash-trail {
    0%   { opacity: 0.9; }
    80%  { opacity: 0.3; }
    100% { opacity: 0; }
}

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