/* ============================================================
   public/Spellsanimations/Axe/rendingstrike.css
   Efeito da magia de arma "Rending Strike" (axe 30): duas lâminas
   cruzadas (\ /) rasgam o CENTRO do tile do alvo + gotas de
   sangue pixel art caindo pra fora. Direcional (só a frente do
   caster), menos "mágica" e mais melee — daí o corte/sangue cru
   em vez de brilho de magery.

   Integração: #melee-fx-layer + spawnRendingStrikeFX() em game.js.
   O servidor manda x/y já como o CENTRO do tile do alvo.

   Pixel art cru: slash em degraus (steps(4)), sangue com px
   inteiros via --dx/--dy.
   ============================================================ */

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

/* Lâmina diagonal: barra com brilho branco no meio e cauda
   vermelha. ±40° em volta do alvo, escala do centro pra fora.
   Específica por variante (--a definida no elemento). */
.rending-fx__slash {
    position: absolute;
    left: -24px;
    top: -3px;
    width: 48px;
    height: 6px;
    transform-origin: 50% 50%;
    opacity: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        #ffffff 28%,
        #ff7a6b 65%,
        rgba(255, 90, 70, 0) 100%);
    animation: rending-slash 0.34s steps(4) forwards;
}

.rending-fx__slash--1 { --a: -42deg; animation-delay: 0s; }
.rending-fx__slash--2 { --a: 42deg;  animation-delay: 0.08s; }

/* Gotas de sangue: pequenos quadrados vermelhos com contorno
   escuro, jogados pra fora do alvo (direção via --dx/--dy). */
.rending-fx__blood {
    position: absolute;
    left: -2px;
    top: -5px;
    width: 5px;
    height: 5px;
    background: #a8232f;
    box-shadow: 1px 1px 0 #5f0f18;
    opacity: 0;
    animation: rending-blood 0.5s ease-in forwards;
}

@keyframes rending-slash {
    0%   { transform: rotate(var(--a)) scaleX(0.3); opacity: 0; }
    30%  { transform: rotate(var(--a)) scaleX(1); opacity: 1; }
    100% { transform: rotate(var(--a)) scaleX(1); opacity: 0; }
}

@keyframes rending-blood {
    0%   { transform: translate(0, 0); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}