/* ============================================================
   public/Spellsanimations/vitalitycry.css
   Efeito da spell "Vitality Cry" do Knight (grito_vitalidade):
   grito centrado no caster — 3 ondas sonoras rosa concêntricas
   expandindo em degraus inteiros (steps(1)) + coraçãozinho
   pixel art (box-shadow) subindo e sumindo, em loop. 100% CSS.

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

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

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

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

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

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

/* --------------------------------------------------------------
   Coraçãozinho 5x4 subindo e sumindo (loop de 1.8s). Cada célula
   do pattern vira 1px de box-shadow (rosa #ff1478, com um pixel
   de brilho #ff66b3).
   -------------------------------------------------------------- */
.vitalitycry-fx__icon {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 1px;
    height: 1px;
    background: #ff1478;
    animation: vitalitycry-icon 1.8s steps(1) infinite;
    box-shadow:
        1px 0px #ff1478,
        3px 0px #ff1478, 4px 0px #ff1478,
        0px 1px #ff1478, 1px 1px #ff66b3, 2px 1px #ff1478, 3px 1px #ff1478, 4px 1px #ff1478,
        1px 2px #ff1478, 2px 2px #ff1478, 3px 2px #ff1478,
        2px 3px #ff1478;
}

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