/* ============================================================
   public/Spellsanimations/quadcut.css
   Efeito "Quad Cut" da spell "Whirling Cut" do Knight
   (corte_giratorio): 4 cortes de espada em sequência rápida
   (\  /  —  |) formando um X/asterisco sobre o alvo, seguidos
   de um flash e faíscas de impacto. 100% CSS/DOM, sem sprite.

   Integração (mesmo padrão do concussive.css):
   #melee-fx-layer + spawnQuadCutFX() em game.js.
   O ponto (16,16) do .cut-fx__stage = centro do impacto = centro
   do SQM do alvo. As faíscas (.cut-fx__spark) são criadas via JS,
   uma por direção, com --dx/--dy definidos por elemento. Cada um
   dos 4 hits do dano (hitDelays: 80/160/240/300 no servidor) cai
   no momento em que o corte correspondente aparece.
   ============================================================ */

.cut-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 */
.cut-fx__stage {
    position: absolute;
    left: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
}

/* ------------------------------------------------------------
   PALETA:
   #ffffff = Núcleo do corte (mais brilhante)
   #eafcff = Quase-núcleo
   #9fe6ff = Lâmina (tom médio)
   #6fc9e8 = Lateral da lâmina (dá volume/espessura)
   #3f8fb0 = Ponta do corte (mais escura, afinando)
   #d6f3ff / #ffffff = Faíscas e flash de impacto
   ------------------------------------------------------------ */

/* ---------- CORTE A: diagonal \ (canto sup. esq. → inf. dir.) ---------- */
.cut-fx__slash-a {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        5px 5px #3f8fb0, 6px 6px #3f8fb0, 7px 7px #3f8fb0, 8px 8px #3f8fb0,
        9px 9px #9fe6ff, 10px 10px #9fe6ff, 11px 11px #9fe6ff, 12px 12px #9fe6ff,
        13px 13px #eafcff, 14px 14px #eafcff,
        15px 15px #ffffff, 16px 16px #ffffff, 17px 17px #ffffff,
        18px 18px #eafcff, 19px 19px #eafcff,
        20px 20px #9fe6ff, 21px 21px #9fe6ff, 22px 22px #9fe6ff, 23px 23px #9fe6ff,
        24px 24px #3f8fb0, 25px 25px #3f8fb0, 26px 26px #3f8fb0, 27px 27px #3f8fb0,
        /* espessura da lâmina */
        11px 12px #6fc9e8, 12px 13px #6fc9e8, 13px 14px #6fc9e8, 14px 15px #6fc9e8,
        15px 16px #6fc9e8, 16px 17px #6fc9e8, 17px 18px #6fc9e8, 18px 19px #6fc9e8,
        19px 20px #6fc9e8, 20px 21px #6fc9e8, 21px 22px #6fc9e8;
    animation: cut-appear 0.5s steps(1) 0s forwards;
}

/* ---------- CORTE B: diagonal / (canto sup. dir. → inf. esq.) ---------- */
.cut-fx__slash-b {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        5px 27px #3f8fb0, 6px 26px #3f8fb0, 7px 25px #3f8fb0, 8px 24px #3f8fb0,
        9px 23px #9fe6ff, 10px 22px #9fe6ff, 11px 21px #9fe6ff, 12px 20px #9fe6ff,
        13px 19px #eafcff, 14px 18px #eafcff,
        15px 17px #ffffff, 16px 16px #ffffff, 17px 15px #ffffff,
        18px 14px #eafcff, 19px 13px #eafcff,
        20px 12px #9fe6ff, 21px 11px #9fe6ff, 22px 10px #9fe6ff, 23px 9px #9fe6ff,
        24px 8px #3f8fb0, 25px 7px #3f8fb0, 26px 6px #3f8fb0, 27px 5px #3f8fb0,
        /* espessura da lâmina */
        11px 20px #6fc9e8, 12px 19px #6fc9e8, 13px 18px #6fc9e8, 14px 17px #6fc9e8,
        15px 16px #6fc9e8, 16px 15px #6fc9e8, 17px 14px #6fc9e8, 18px 13px #6fc9e8,
        19px 12px #6fc9e8, 20px 11px #6fc9e8, 21px 10px #6fc9e8;
    animation: cut-appear 0.5s steps(1) 0.08s forwards;
}

/* ---------- CORTE C: horizontal — ---------- */
.cut-fx__slash-c {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        3px 16px #3f8fb0, 4px 16px #3f8fb0, 5px 16px #3f8fb0,
        6px 16px #9fe6ff, 7px 16px #9fe6ff, 8px 16px #9fe6ff, 9px 16px #9fe6ff,
        10px 16px #eafcff, 11px 16px #eafcff, 12px 16px #eafcff, 13px 16px #eafcff,
        14px 16px #ffffff, 15px 16px #ffffff, 16px 16px #ffffff, 17px 16px #ffffff, 18px 16px #ffffff,
        19px 16px #eafcff, 20px 16px #eafcff, 21px 16px #eafcff, 22px 16px #eafcff,
        23px 16px #9fe6ff, 24px 16px #9fe6ff, 25px 16px #9fe6ff, 26px 16px #9fe6ff,
        27px 16px #3f8fb0, 28px 16px #3f8fb0, 29px 16px #3f8fb0,
        /* espessura da lâmina (linhas acima/abaixo) */
        8px 15px #6fc9e8, 9px 15px #6fc9e8, 10px 15px #6fc9e8, 11px 15px #6fc9e8, 12px 15px #6fc9e8,
        13px 15px #6fc9e8, 14px 15px #6fc9e8, 15px 15px #6fc9e8, 16px 15px #6fc9e8, 17px 15px #6fc9e8,
        18px 15px #6fc9e8, 19px 15px #6fc9e8, 20px 15px #6fc9e8, 21px 15px #6fc9e8, 22px 15px #6fc9e8, 23px 15px #6fc9e8,
        8px 17px #6fc9e8, 9px 17px #6fc9e8, 10px 17px #6fc9e8, 11px 17px #6fc9e8, 12px 17px #6fc9e8,
        13px 17px #6fc9e8, 14px 17px #6fc9e8, 15px 17px #6fc9e8, 16px 17px #6fc9e8, 17px 17px #6fc9e8,
        18px 17px #6fc9e8, 19px 17px #6fc9e8, 20px 17px #6fc9e8, 21px 17px #6fc9e8, 22px 17px #6fc9e8, 23px 17px #6fc9e8;
    animation: cut-appear 0.5s steps(1) 0.16s forwards;
}

/* ---------- CORTE D: vertical | ---------- */
.cut-fx__slash-d {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        16px 3px #3f8fb0, 16px 4px #3f8fb0, 16px 5px #3f8fb0,
        16px 6px #9fe6ff, 16px 7px #9fe6ff, 16px 8px #9fe6ff, 16px 9px #9fe6ff,
        16px 10px #eafcff, 16px 11px #eafcff, 16px 12px #eafcff, 16px 13px #eafcff,
        16px 14px #ffffff, 16px 15px #ffffff, 16px 16px #ffffff, 16px 17px #ffffff, 16px 18px #ffffff,
        16px 19px #eafcff, 16px 20px #eafcff, 16px 21px #eafcff, 16px 22px #eafcff,
        16px 23px #9fe6ff, 16px 24px #9fe6ff, 16px 25px #9fe6ff, 16px 26px #9fe6ff,
        16px 27px #3f8fb0, 16px 28px #3f8fb0, 16px 29px #3f8fb0,
        /* espessura da lâmina (colunas ao lado) */
        15px 8px #6fc9e8, 15px 9px #6fc9e8, 15px 10px #6fc9e8, 15px 11px #6fc9e8, 15px 12px #6fc9e8,
        15px 13px #6fc9e8, 15px 14px #6fc9e8, 15px 15px #6fc9e8, 15px 16px #6fc9e8, 15px 17px #6fc9e8,
        15px 18px #6fc9e8, 15px 19px #6fc9e8, 15px 20px #6fc9e8, 15px 21px #6fc9e8, 15px 22px #6fc9e8, 15px 23px #6fc9e8,
        17px 8px #6fc9e8, 17px 9px #6fc9e8, 17px 10px #6fc9e8, 17px 11px #6fc9e8, 17px 12px #6fc9e8,
        17px 13px #6fc9e8, 17px 14px #6fc9e8, 17px 15px #6fc9e8, 17px 16px #6fc9e8, 17px 17px #6fc9e8,
        17px 18px #6fc9e8, 17px 19px #6fc9e8, 17px 20px #6fc9e8, 17px 21px #6fc9e8, 17px 22px #6fc9e8, 17px 23px #6fc9e8;
    animation: cut-appear 0.5s steps(1) 0.24s forwards;
}

/* Flash de impacto no centro, no instante em que o 4º corte crava */
.cut-fx__flash {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        14px 13px #ffffff, 15px 13px #ffffff, 16px 13px #ffffff, 17px 13px #ffffff, 18px 13px #ffffff,
        13px 14px #ffffff, 19px 14px #ffffff,
        13px 15px #ffffff, 14px 15px #d6f3ff, 15px 15px #ffffff, 16px 15px #ffffff, 17px 15px #ffffff, 18px 15px #d6f3ff, 19px 15px #ffffff,
        13px 17px #ffffff, 19px 17px #ffffff,
        13px 18px #ffffff, 19px 18px #ffffff,
        14px 19px #ffffff, 15px 19px #ffffff, 16px 19px #ffffff, 17px 19px #ffffff, 18px 19px #ffffff;
    animation: cut-flash 0.22s steps(1) 0.3s forwards;
}

/* Faísca do impacto (uma por direção; --dx/--dy definidos via JS,
   sempre inteiros). Reaproveita a lógica do soco: pula em 1 degrau
   pro destino e some — sem scale, pixel art cru. */
.cut-fx__spark {
    position: absolute;
    top: 16px; left: 16px;
    width: 1px; height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        0px -2px #d6f3ff,
        0px -1px #ffffff,
        -1px 0px #ffffff,
        0px 0px #ffffff,
        1px 0px #ffffff,
        0px 1px #ffffff,
        0px 2px #d6f3ff;
    animation: cut-spark 0.4s steps(1) 0.3s forwards;
}

/* Cada corte aparece já "formado" (pixel art cru, sem desenhar
   traço por traço) e some rapidamente — o efeito de golpe vem do
   encadeamento dos 4 delays, não de easing contínuo. */
@keyframes cut-appear {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    55%  { opacity: 1; }
    75%  { opacity: 0.55; }
    100% { opacity: 0; }
}

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

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