/* ============================================================
   public/Spellsanimations/unbridledfury.css
   Efeito da spell "Unbridled Fury" do Knight (furia_desenfreada):
   explosão de fúria centrada no caster — só a espadinha pixel art
   (box-shadow) subindo e sumindo, em loop (SEM ondas sonoras).
   100% CSS/DOM.

   Integração: #melee-fx-layer + spawnUnbridledFuryFX() em game.js.
   O ponto (0,0) do .unbridledfury-fx__stage é o centro do tile do
   caster (left/top definidos via JS somando TILE_SIZE/2).
   ============================================================ */

.unbridledfury-fx {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 40;
    image-rendering: pixelated;
    /* Ancora o centro no left/top setado via JS */
    transform: translate(-50%, -50%);
}

.unbridledfury-fx__stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
}

/* --------------------------------------------------------------
   Espadinha 5x8 subindo e sumindo (loop de 1.8s). Cada célula do
   pattern vira 1px de box-shadow. Cores: 1 = lâmina prata,
   2 = guarda cinza escuro, 3 = cabo marrom.
   -------------------------------------------------------------- */
.unbridledfury-fx__icon {
    position: absolute;
    left: -2px;
    top: -4px;
    width: 1px;
    height: 1px;
    animation: unbridledfury-icon 1.8s steps(1) infinite;
    box-shadow:
        2px 0px #e8e8f0,
        2px 1px #c8c8d2,
        2px 2px #c8c8d2,
        2px 3px #c8c8d2,
        2px 4px #c8c8d2,
        0px 5px #5a5a64, 1px 5px #5a5a64, 2px 5px #5a5a64, 3px 5px #5a5a64, 4px 5px #5a5a64,
        2px 6px #5a3c1e,
        2px 7px #5a3c1e;
}

@keyframes unbridledfury-icon {
    0%   { opacity: 0;   transform: translateY(0px); }
    6%   { opacity: 1;   transform: translateY(0px); }
    40%  { opacity: 0.9; transform: translateY(-4px); }
    65%  { opacity: 0.6; transform: translateY(-8px); }
    85%  { opacity: 0.25; transform: translateY(-11px); }
    100% { opacity: 0;   transform: translateY(-12px); }
}