/* ============================================================
   public/Spellsanimations/concussive.css
   Efeito da spell "Concussive Blow" do Knight (golpe_concussivo):
   uma luva azul em pixel art (box-shadow) cai do alto e crava no
   alvo, com rastro de queda, flash e estrelinhas de impacto.
   100% CSS/DOM, sem PNG/sprite sheet.

   Integração: #melee-fx-layer + spawnConcussiveFX() em game.js.
   O layer é sincronizado com a câmera a cada frame; o ponto
   (16,16) do .blow-fx__stage (centro do impacto) coincide com o
   centro do SQM do alvo (left/top via JS, mesmo esquema do
   soco/fury). Não é direcional: é um golpe de cima pra baixo,
   ancorado no alvo.
   ============================================================ */

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

/* Palco 32x32: o centro (16,16) = ponto de impacto = ancoragem */
.blow-fx__stage {
    position: absolute;
    left: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
}

/* ------------------------------------------------------------
   PALETA DE CORES:
   #110505 = Outline / Contorno escuro do couro
   #400a08 = Sombra profunda do couro
   #80100d = Vermelho base da luva
   #d92b25 = Vermelho tom médio (Luz)
   #ff6b63 = Highlight / Brilho do couro acolchoado
   #222222 = Faixa/Acolchoamento do pulso
   #f1c40f = Costura/Detalhe dourado
   #0a1f40 / #0d3980 / #2b6dd9 / #63a0ff = Luva azul
   #ffe600 / #ffffff = Estrelinhas do impacto
   ------------------------------------------------------------ */

/* LUVA — caindo de cima para baixo */
.blow-fx__fist {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        /* Pulso / topo */
        14px 2px #110505, 15px 2px #110505, 16px 2px #110505, 17px 2px #110505,
        13px 3px #110505, 14px 3px #222222, 15px 3px #222222, 16px 3px #222222, 17px 3px #222222, 18px 3px #110505,
        13px 4px #110505, 14px 4px #f1c40f, 15px 4px #f1c40f, 16px 4px #f1c40f, 17px 4px #f1c40f, 18px 4px #110505,
        13px 5px #110505, 14px 5px #222222, 15px 5px #222222, 16px 5px #222222, 17px 5px #222222, 18px 5px #110505,

        /* Transição para o corpo da luva */
        12px 6px #110505, 13px 6px #0d3980, 14px 6px #0d3980, 15px 6px #0d3980, 16px 6px #0d3980, 17px 6px #0d3980, 18px 6px #0d3980, 19px 6px #110505,
        12px 7px #110505, 13px 7px #2b6dd9, 14px 7px #2b6dd9, 15px 7px #2b6dd9, 16px 7px #2b6dd9, 17px 7px #2b6dd9, 18px 7px #2b6dd9, 19px 7px #110505,

        /* Ponto mais largo do acolchoamento (nós) */
        11px 8px #110505, 12px 8px #2b6dd9, 13px 8px #2b6dd9, 14px 8px #63a0ff, 15px 8px #63a0ff, 16px 8px #63a0ff, 17px 8px #63a0ff, 18px 8px #2b6dd9, 19px 8px #2b6dd9, 20px 8px #110505,
        11px 9px #110505, 12px 9px #0d3980, 13px 9px #0d3980, 14px 9px #63a0ff, 15px 9px #63a0ff, 16px 9px #63a0ff, 17px 9px #63a0ff, 18px 9px #0d3980, 19px 9px #0d3980, 20px 9px #110505,
        11px 10px #110505, 12px 10px #0d3980, 13px 10px #0d3980, 14px 10px #0d3980, 15px 10px #0d3980, 16px 10px #0d3980, 17px 10px #0d3980, 18px 10px #0d3980, 19px 10px #0d3980, 20px 10px #110505,
        11px 11px #110505, 12px 11px #2b6dd9, 13px 11px #2b6dd9, 14px 11px #2b6dd9, 15px 11px #2b6dd9, 16px 11px #2b6dd9, 17px 11px #2b6dd9, 18px 11px #2b6dd9, 19px 11px #2b6dd9, 20px 11px #110505,

        /* Estreitando para a base */
        12px 12px #110505, 13px 12px #0d3980, 14px 12px #0d3980, 15px 12px #0d3980, 16px 12px #0d3980, 17px 12px #0d3980, 18px 12px #0d3980, 19px 12px #110505,
        12px 13px #110505, 13px 13px #0a1f40, 14px 13px #0a1f40, 15px 13px #0a1f40, 16px 13px #0a1f40, 17px 13px #0a1f40, 18px 13px #0a1f40, 19px 13px #110505,
        13px 14px #110505, 14px 14px #0d3980, 15px 14px #0d3980, 16px 14px #0d3980, 17px 14px #0d3980, 18px 14px #110505,
        14px 15px #110505, 15px 15px #0a1f40, 16px 15px #0a1f40, 17px 15px #110505,
        15px 16px #110505, 16px 16px #110505;

    animation: blow-fist 0.5s steps(1) forwards;
}

/* Rastro de queda acima da luva */
.blow-fx__trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        14px -4px #d92b25, 17px -4px #d92b25,
        13px -8px #ffffff, 18px -8px #ffffff,
        14px -12px #80100d, 17px -12px #80100d;
    animation: blow-trail 0.4s steps(1) forwards;
}

/* Flash de impacto: pisca em degraus de opacidade, sem scale (o scale
   fracionário deixaria o sprite borrado — aqui é pixel art cru). */
.blow-fx__flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        14px 15px #ffffff, 15px 15px #ffffff, 16px 15px #ffffff, 17px 15px #ffffff,
        13px 16px #ffffff, 14px 16px #ffe600, 15px 16px #ffffff, 16px 16px #ffffff, 17px 16px #ffe600, 18px 16px #ffffff,
        14px 17px #ffffff, 15px 17px #ffffff, 16px 17px #ffffff, 17px 17px #ffffff;
    animation: blow-flash 0.22s steps(1) 0.2s forwards;
}

/* Estrelinha do impacto (uma por direção; --dx/--dy via JS, sempre
   inteiros): pula direto pro destino em 1 degrau e some — sem scale,
   sem easing contínuo (pixel art cru). */
.blow-fx__star {
    position: absolute;
    top: 16px;
    left: 16px;
    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: blow-star 0.45s steps(1) 0.22s forwards;
}

/* Luva caindo em degraus inteiros (steps(1)) com ~18 poses em 0,5s
   (passagem suave, pixel cru). Queda -22→0 em passos de 2px, impacto em
   45% ≈ 0.225s = hitDelayMs 250, depois retenção/ricochete. */
@keyframes blow-fist {
    0%   { transform: translateY(-22px); opacity: 0; }
    6%   { transform: translateY(-20px); opacity: 1; }
    10%  { transform: translateY(-18px); }
    14%  { transform: translateY(-16px); }
    18%  { transform: translateY(-14px); }
    22%  { transform: translateY(-12px); }
    26%  { transform: translateY(-10px); }
    30%  { transform: translateY(-8px); }
    34%  { transform: translateY(-6px); }
    38%  { transform: translateY(-4px); }
    42%  { transform: translateY(-2px); }
    45%  { transform: translateY(0px); opacity: 1; }   /* impacto */
    50%  { transform: translateY(1px); }               /* retenção do impacto */
    55%  { transform: translateY(0px); }
    62%  { transform: translateY(-1px); }
    68%  { transform: translateY(-2px); }
    75%  { transform: translateY(-3px); }
    100% { transform: translateY(-3px); opacity: 0; }
}

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

@keyframes blow-flash {
    0%   { opacity: 1; }
    50%  { opacity: 0.6; }
    100% { opacity: 0; }
}

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