/* ============================================================
   public/Spellsanimations/immobilizingcry.css
   Efeito da spell "Immobilizing Cry" do Knight (grito_imobilizante):
   grito centrado no caster — 3 ondas sonoras verdes concêntricas
   expandindo em degraus inteiros (steps(1)) + botinha com seta pra
   baixo (sinal de debuff) pixel art subindo e sumindo, em loop.
   100% CSS/DOM.

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

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

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

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

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

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

/* --------------------------------------------------------------
   Botinha + seta pra baixo (11x6) subindo e sumindo (loop de
   1.8s). Cada célula do pattern vira 1px de box-shadow.
   Cores: 1 = couro escuro da bota, 2 = sola, 3 = seta vermelha.
   -------------------------------------------------------------- */
.immobilizingcry-fx__icon {
    position: absolute;
    left: -5px;
    top: -3px;
    width: 1px;
    height: 1px;
    animation: immobilizingcry-icon 1.8s steps(1) infinite;
    box-shadow:
        1px 0px #462d19, 2px 0px #462d19,
        1px 1px #462d19, 2px 1px #462d19, 7px 1px #dc3c3c,
        1px 2px #462d19, 2px 2px #462d19, 7px 2px #dc3c3c,
        1px 3px #462d19, 2px 3px #462d19, 3px 3px #462d19,
        5px 3px #dc3c3c, 6px 3px #dc3c3c, 7px 3px #dc3c3c, 8px 3px #dc3c3c, 9px 3px #dc3c3c,
        0px 4px #462d19, 1px 4px #462d19, 2px 4px #462d19, 3px 4px #462d19, 4px 4px #462d19,
        6px 4px #dc3c3c, 7px 4px #dc3c3c, 8px 4px #dc3c3c,
        0px 5px #6e6e73, 1px 5px #6e6e73, 2px 5px #6e6e73, 3px 5px #6e6e73, 4px 5px #6e6e73,
        7px 5px #dc3c3c;
}

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