/* ============================================================
   public/Spellsanimations/clash.css
   Efeito da spell "Strike" do Knight (ex-Voracious Attack /
   ataque_voraz): os dois punhos com luvas de boxe (pixel art em
   box-shadow) vêm dos dois lados e se chocam no centro do alvo
   (clash), com rastro e faísca de impacto. 100% CSS/DOM, sem
   PNG/sprite sheet.

   Integração: #melee-fx-layer + spawnClashFX() em game.js.
   O layer é sincronizado com a câmera a cada frame; o ponto
   (0,0) do .clash-fx é o centro do SQM do alvo (left/top via
   JS, mesmo esquema do soco/fury). O .clash-fx__rotor gira com
   --clash-angle (direção caster→alvo, travada em 8 direções,
   igual ao --punch-angle do punch.css): virando o personagem,
   o clash de luvas vira junto.
   ============================================================ */

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

/* Rotor 32x32: o centro (16px,16px) coincide com o ponto de
   ancoragem (clash no centro do alvo). A rotação gira o par de
   luvas inteiro em volta desse centro. */
.clash-fx__rotor {
    position: absolute;
    left: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
    transform: rotate(var(--clash-angle, 0deg));
    transform-origin: 16px 16px;
    will-change: transform;
}

.clash-fx__clash {
    position: absolute;
    inset: 0;
}

/* ------------------------------------------------------------
   PALETA DAS LUVAS:
   #110505 = Outlines / 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
   #ffffff = Brilho intenso do impacto
   #f1c40f = Costura/Detalhe dourado na manopla
   #222222 = Faixa/Acolchoamento do pulso
   ------------------------------------------------------------ */

/* LUVA ESQUERDA (apontada para a direita), vem do lado -X */
.clash-fx__glove-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        /* Pulso / Manga Acolchoada */
        1px 12px #110505, 1px 13px #222222, 1px 14px #222222, 1px 15px #110505,
        2px 11px #110505, 2px 12px #222222, 2px 13px #f1c40f, 2px 14px #222222, 2px 15px #110505,
        3px 10px #110505, 3px 11px #80100d, 3px 12px #222222, 3px 13px #222222, 3px 14px #80100d, 3px 15px #110505,

        /* Acolchoamento Principal da Luva (Curvado e Arredondado) */
        4px 9px #110505, 5px 9px #110505, 6px 9px #110505, 7px 9px #110505, 8px 9px #110505,
        4px 10px #d92b25, 5px 10px #ff6b63, 6px 10px #ff6b63, 7px 10px #d92b25, 8px 10px #d92b25, 9px 10px #110505,
        4px 11px #80100d, 5px 11px #d92b25, 6px 11px #ff6b63, 7px 11px #ff6b63, 8px 11px #d92b25, 9px 11px #d92b25, 10px 11px #110505,
        4px 12px #80100d, 5px 12px #80100d, 6px 12px #d92b25, 7px 12px #d92b25, 8px 12px #d92b25, 9px 12px #d92b25, 10px 12px #110505,

        /* Curva Frontal de Acolchoamento / Polegar dobrado */
        4px 13px #80100d, 5px 13px #80100d, 6px 13px #110505, 7px 13px #80100d, 8px 13px #d92b25, 9px 13px #d92b25, 10px 13px #110505,
        4px 14px #400a08, 5px 14px #80100d, 6px 14px #80100d, 7px 14px #80100d, 8px 14px #80100d, 9px 14px #d92b25, 10px 14px #110505,
        5px 15px #110505, 6px 15px #400a08, 7px 15px #80100d, 8px 15px #80100d, 9px 15px #80100d, 10px 15px #110505,
        6px 16px #110505, 7px 16px #110505, 8px 16px #110505, 9px 16px #110505;

    animation: clash-glove-left 0.45s steps(1) forwards;
}

/* LUVA DIREITA (espelhada), vem do lado +X */
.clash-fx__glove-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        /* Pulso / Manga Acolchoada */
        30px 12px #110505, 30px 13px #222222, 30px 14px #222222, 30px 15px #110505,
        29px 11px #110505, 29px 12px #222222, 29px 13px #f1c40f, 29px 14px #222222, 29px 15px #110505,
        28px 10px #110505, 28px 11px #80100d, 28px 12px #222222, 28px 13px #222222, 28px 14px #80100d, 28px 15px #110505,

        /* Acolchoamento Principal da Luva */
        27px 9px #110505, 26px 9px #110505, 25px 9px #110505, 24px 9px #110505, 23px 9px #110505,
        27px 10px #d92b25, 26px 10px #ff6b63, 25px 10px #ff6b63, 24px 10px #d92b25, 23px 10px #d92b25, 22px 10px #110505,
        27px 11px #80100d, 26px 11px #d92b25, 25px 11px #ff6b63, 24px 11px #ff6b63, 23px 11px #d92b25, 22px 11px #d92b25, 21px 11px #110505,
        27px 12px #80100d, 26px 12px #80100d, 25px 12px #d92b25, 24px 12px #d92b25, 23px 12px #d92b25, 22px 12px #d92b25, 21px 12px #110505,

        /* Curva Frontal de Acolchoamento / Polegar dobrado */
        27px 13px #80100d, 26px 13px #80100d, 25px 13px #110505, 24px 13px #80100d, 23px 13px #d92b25, 22px 13px #d92b25, 21px 13px #110505,
        27px 14px #400a08, 26px 14px #80100d, 25px 14px #80100d, 24px 14px #80100d, 23px 14px #80100d, 22px 14px #d92b25, 21px 14px #110505,
        26px 15px #110505, 25px 15px #400a08, 24px 15px #80100d, 23px 15px #80100d, 22px 15px #80100d, 21px 15px #110505,
        25px 16px #110505, 24px 16px #110505, 23px 16px #110505, 22px 16px #110505;

    animation: clash-glove-right 0.45s steps(1) forwards;
}

/* Rastro e impacto */
.clash-fx__trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    animation: clash-trail 0.22s steps(1) forwards;
}

.clash-fx__impact {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    animation: clash-impact 0.28s steps(1) 0.16s forwards;
}

@keyframes clash-trail {
    0% {
        opacity: 1;
        box-shadow:
            2px 10px #ffffff, 29px 10px #ffffff,
            1px 12px #d92b25, 30px 12px #d92b25,
            2px 14px #ffffff, 29px 14px #ffffff;
    }
    50% {
        opacity: 1;
        box-shadow:
            5px 10px #ffffff, 26px 10px #ffffff,
            4px 12px #ffffff, 27px 12px #ffffff,
            5px 14px #ffffff, 26px 14px #ffffff;
    }
    100% {
        opacity: 0;
        box-shadow: none;
    }
}

/* Luvas em degraus inteiros (steps(1)), com ~15 poses em 0,45s pra
   passagem suave. Elas se encontram no centro (0) em ~35% ≈ 0.157s
   (impacto, batendo com o hitDelayMs: 250), passam um pouco além e
   assentam em ±3. */
@keyframes clash-glove-left {
    0%   { transform: translateX(-14px); opacity: 0; }
    7%   { transform: translateX(-12px); }
    12%  { transform: translateX(-10px); opacity: 1; }
    17%  { transform: translateX(-8px); }
    22%  { transform: translateX(-6px); }
    27%  { transform: translateX(-4px); }
    32%  { transform: translateX(-2px); }
    37%  { transform: translateX(0px); }
    42%  { transform: translateX(2px); }
    47%  { transform: translateX(5px); }
    55%  { transform: translateX(4px); }
    62%  { transform: translateX(3px); }
    70%  { transform: translateX(3px); }
    85%  { transform: translateX(3px); }
    100% { transform: translateX(3px); opacity: 0; }
}

@keyframes clash-glove-right {
    0%   { transform: translateX(14px); opacity: 0; }
    7%   { transform: translateX(12px); }
    12%  { transform: translateX(10px); opacity: 1; }
    17%  { transform: translateX(8px); }
    22%  { transform: translateX(6px); }
    27%  { transform: translateX(4px); }
    32%  { transform: translateX(2px); }
    37%  { transform: translateX(0px); }
    42%  { transform: translateX(-2px); }
    47%  { transform: translateX(-5px); }
    55%  { transform: translateX(-4px); }
    62%  { transform: translateX(-3px); }
    70%  { transform: translateX(-3px); }
    85%  { transform: translateX(-3px); }
    100% { transform: translateX(-3px); opacity: 0; }
}

@keyframes clash-impact {
    0% {
        opacity: 1;
        box-shadow:
            15px 10px #ffffff, 16px 10px #ffffff,
            14px 11px #ffffff, 15px 11px #ffffff, 16px 11px #ffffff, 17px 11px #ffffff,
            14px 12px #ffffff, 15px 12px #ffe600, 16px 12px #ffe600, 17px 12px #ffffff,
            14px 13px #ffffff, 15px 13px #ffffff, 16px 13px #ffffff, 17px 13px #ffffff,
            15px 14px #ffffff, 16px 14px #ffffff;
    }
    40% {
        opacity: 1;
        box-shadow:
            15px 7px #ffe600, 16px 7px #ffe600,
            12px 10px #ff3300, 19px 10px #ff3300,
            10px 12px #ffffff, 21px 12px #ffffff,
            12px 14px #ff3300, 19px 14px #ff3300,
            15px 17px #ffe600, 16px 17px #ffe600;
    }
    80% {
        opacity: 0.7;
        box-shadow:
            10px 8px #ff3300, 21px 8px #ff3300,
            8px 12px #ff8800, 23px 12px #ff8800,
            10px 16px #ff3300, 21px 16px #ff3300;
    }
    100% {
        opacity: 0;
        box-shadow: none;
    }
}