/* ============================================================
   public/Spellsanimations/furycry.css
   Efeito da spell "Cry of Fury" do Knight (grito_furia): grito
   centrado no caster — 3 ondas sonoras vermelhas concêntricas
   expandindo em degraus inteiros (steps(1)) + carinha de raiva
   pixel art (box-shadow) subindo e sumindo, em loop. 100% CSS.

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

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

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

/* --------------------------------------------------------------
   Ondas sonoras: 3 anéis vermelhos (rgba 230,50,50) 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).
   -------------------------------------------------------------- */
.furycry-fx__wave {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 2px;
    border: 1px solid rgba(230, 50, 50, 0.9);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: furycry-wave 1.4s steps(1) infinite;
}

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

@keyframes furycry-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; }
}

/* --------------------------------------------------------------
   Carinha de raiva 9x8 subindo e sumindo (loop de 1.8s). Cada
   célula do pattern vira 1px de box-shadow.
   Cores: 1 = rosto preto, 2 = marcas de raiva vermelhas.
   -------------------------------------------------------------- */
.furycry-fx__icon {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 1px;
    height: 1px;
    animation: furycry-icon 1.8s steps(1) infinite;
    box-shadow:
        2px 0px #0f0f0f, 3px 0px #0f0f0f, 4px 0px #0f0f0f, 5px 0px #0f0f0f, 6px 0px #0f0f0f,
        1px 1px #0f0f0f, 2px 1px #dc2828, 3px 1px #0f0f0f, 4px 1px #0f0f0f, 5px 1px #0f0f0f, 6px 1px #dc2828, 7px 1px #0f0f0f,
        0px 2px #0f0f0f, 1px 2px #0f0f0f, 2px 2px #0f0f0f, 3px 2px #dc2828, 4px 2px #0f0f0f, 5px 2px #dc2828, 6px 2px #0f0f0f, 7px 2px #0f0f0f, 8px 2px #0f0f0f,
        0px 3px #0f0f0f, 1px 3px #0f0f0f, 2px 3px #0f0f0f, 3px 3px #0f0f0f, 4px 3px #0f0f0f, 5px 3px #0f0f0f, 6px 3px #0f0f0f, 7px 3px #0f0f0f, 8px 3px #0f0f0f,
        0px 4px #0f0f0f, 1px 4px #0f0f0f, 2px 4px #0f0f0f, 3px 4px #0f0f0f, 4px 4px #0f0f0f, 5px 4px #0f0f0f, 6px 4px #0f0f0f, 7px 4px #0f0f0f, 8px 4px #0f0f0f,
        0px 5px #0f0f0f, 1px 5px #0f0f0f, 2px 5px #0f0f0f, 3px 5px #0f0f0f, 4px 5px #0f0f0f, 5px 5px #0f0f0f, 6px 5px #0f0f0f, 7px 5px #0f0f0f, 8px 5px #0f0f0f,
        1px 6px #0f0f0f, 2px 6px #0f0f0f, 3px 6px #dc2828, 4px 6px #dc2828, 5px 6px #dc2828, 6px 6px #0f0f0f, 7px 6px #0f0f0f,
        2px 7px #0f0f0f, 3px 7px #0f0f0f, 4px 7px #0f0f0f, 5px 7px #0f0f0f, 6px 7px #0f0f0f;
}

@keyframes furycry-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); }
}