/* ============================================================
   public/Spellsanimations/warcry.css
   Efeito da spell "War Cry" do Knight (grito_poder): grito
   centrado no caster — 3 ondas sonoras cinzas concêntricas
   expandindo em degraus inteiros (steps(1)) + espadinha pixel
   art (box-shadow) subindo e sumindo, em loop. 100% CSS/DOM.

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

.warcry-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%);
}

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

/* --------------------------------------------------------------
   Ondas sonoras: 3 anéis cinza (rgba 190,190,200) expandindo de
   2px a 22px em poses inteiras. steps(1) = cada pose segura até
   a próxima (pixel art cru). Loop infinito, defasadas em 1/3 do
   período (1.4s → delays 0 / 0.466s / 0.933s).
   -------------------------------------------------------------- */
.warcry-fx__wave {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 2px;
    border: 1px solid rgba(190, 190, 200, 0.9);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: warcry-wave 1.4s steps(1) infinite;
}

.warcry-fx__wave--2 { animation-delay: 0.466s; }
.warcry-fx__wave--3 { animation-delay: 0.933s; }

@keyframes warcry-wave {
    0%   { opacity: 0;     width: 2px;  height: 2px; }
    8%   { opacity: 0.95;  width: 2px;  height: 2px; }
    20%  { opacity: 0.85;  width: 6px;  height: 6px; }
    35%  { opacity: 0.7;   width: 10px; height: 10px; }
    50%  { opacity: 0.5;   width: 14px; height: 14px; }
    65%  { opacity: 0.35;  width: 18px; height: 18px; }
    80%  { opacity: 0.18;  width: 20px; height: 20px; }
    100% { opacity: 0;     width: 22px; height: 22px; }
}

/* --------------------------------------------------------------
   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.
   -------------------------------------------------------------- */
.warcry-fx__icon {
    position: absolute;
    left: -2px;
    top: -4px;
    width: 1px;
    height: 1px;
    animation: warcry-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 warcry-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); }
}