/* ============================================================
   public/Spellsanimations/punch.css
   Efeito de "Murro" (Knight) em pixel art puro (box-shadow),
   renderizado em DOM por cima do <canvas id="gameCanvas">.

   Integração: ver #melee-fx-layer e spawnPunchFX() em game.js.
   O layer é sincronizado a cada frame com a câmera do jogo
   (mesma escala/translação usada no ctx.setTransform do canvas),
   então os efeitos acompanham o mundo normalmente.
   ============================================================ */

#melee-fx-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 50; /* Acima do canvas, abaixo das janelas de UI */
    transform-origin: 0 0;
    image-rendering: pixelated;
}

.punch-fx {
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    will-change: transform;
    image-rendering: pixelated;

    /* --punch-angle é definido via JS em graus (0-359).
       Como é um transform: rotate() puro, qualquer ângulo funciona,
       incluindo diagonais (45deg, 135deg, 225deg, 315deg) — não
       precisa de sprite extra pra diagonal. */
    transform: rotate(var(--punch-angle, 0deg));
    transform-origin: 8px 8px;
}

.punch-fx__punch {
    position: absolute;
    inset: 0;
    /* steps(1) por segmento: o punho anda em degraus inteiros (0→3→6→9→14),
       sem easing contínuo — movimento "stop-motion" de pixel art cru,
       sem anti-aliasing de interpolação. */
    animation: punch-fx-thrust 0.35s steps(1) forwards;
}

/*
  PUNHO EM PIXEL ART (pixel = 1x1px dentro do container de 16x16)
  Paleta:
  #29150a = Contorno escuro
  #e28743 = Tom de pele principal
  #f8b878 = Highlight / Nós dos dedos
  #b85828 = Sombra da mão
  #3a5a8c = Pulso / Luva
  Desenhado apontando para a direita (0deg); a rotação do
  .punch-fx cuida do resto.
*/
.punch-fx__fist {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        /* Pulso */
        2px 6px #29150a, 2px 7px #3a5a8c, 2px 8px #3a5a8c, 2px 9px #29150a,
        3px 6px #29150a, 3px 7px #3a5a8c, 3px 8px #3a5a8c, 3px 9px #29150a,

        /* Corpo do punho */
        4px 5px #29150a, 5px 5px #29150a, 6px 5px #29150a, 7px 5px #29150a,
        4px 6px #e28743, 5px 6px #f8b878, 6px 6px #f8b878, 7px 6px #29150a,
        4px 7px #e28743, 5px 7px #e28743, 6px 7px #e28743, 7px 7px #29150a,
        4px 8px #b85828, 5px 8px #b85828, 6px 8px #b85828, 7px 8px #29150a,
        4px 9px #29150a, 5px 9px #29150a, 6px 9px #29150a, 7px 9px #29150a,

        /* Nós dos dedos (ponta direita) */
        8px 5px #29150a, 8px 6px #f8b878, 9px 6px #29150a,
        8px 7px #f8b878, 9px 7px #29150a,
        8px 8px #b85828, 9px 8px #29150a,
        8px 9px #29150a,

        /* Polegar dobrado por baixo */
        5px 10px #29150a, 6px 10px #b85828, 7px 10px #29150a,
        6px 11px #29150a;
}

/* Faíscas de impacto */
.punch-fx__impact {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    animation: punch-fx-impact 0.22s ease-out 0.13s forwards;
}

/* Movimento em degraus inteiros (steps(1)): cada keyframe segura o valor
   e pula pro próximo — posições sempre em px inteiro, sem interpolação
   (pixel art cru). Com ~11 poses em 0,35s a passagem fica suave.
   Impacto (extensão total, 14px) em ~62% ≈ 0.217s, batendo com o
   hitDelayMs: 250 do servidor. */
@keyframes punch-fx-thrust {
    0%   { transform: translateX(0); opacity: 0; }
    8%   { opacity: 1; }
    15%  { transform: translateX(2px); }
    22%  { transform: translateX(4px); }
    30%  { transform: translateX(6px); }
    38%  { transform: translateX(8px); }
    46%  { transform: translateX(10px); }
    54%  { transform: translateX(12px); }
    62%  { transform: translateX(14px); opacity: 1; }
    70%  { transform: translateX(14px); }
    85%  { transform: translateX(14px); }
    100% { transform: translateX(14px); opacity: 0; }
}

@keyframes punch-fx-impact {
    0% {
        opacity: 1;
        box-shadow:
            11px 7px rgba(255, 255, 255, 0), 12px 7px rgba(255, 240, 168, 0),
            10px 5px rgba(255, 240, 168, 0), 10px 9px rgba(255, 240, 168, 0),
            13px 7px rgba(255, 255, 255, 0), 14px 7px rgba(255, 140, 0, 0),
            12px 4px rgba(255, 240, 168, 0), 12px 10px rgba(255, 240, 168, 0),
            10px 3px rgba(255, 140, 0, 0), 10px 11px rgba(255, 140, 0, 0);
    }
    45% {
        opacity: 1;
        box-shadow:
            11px 7px #ffffff, 12px 7px #fff0a8,
            10px 5px #fff0a8, 10px 9px #fff0a8,
            13px 7px #ffffff, 14px 7px #ff8c00,
            12px 4px #fff0a8, 12px 10px #fff0a8,
            10px 3px #ff8c00, 10px 11px #ff8c00;
    }
    100% {
        opacity: 0;
        box-shadow:
            11px 7px rgba(255, 255, 255, 0), 12px 7px rgba(255, 240, 168, 0),
            10px 5px rgba(255, 240, 168, 0), 10px 9px rgba(255, 240, 168, 0),
            13px 7px rgba(255, 255, 255, 0), 14px 7px rgba(255, 140, 0, 0),
            12px 4px rgba(255, 240, 168, 0), 12px 10px rgba(255, 240, 168, 0),
            10px 3px rgba(255, 140, 0, 0), 10px 11px rgba(255, 140, 0, 0);
    }
}