/* ============================================================
   public/Spellsanimations/tumult.css
   Efeito da spell "Tumult" do Knight (tumultuo): a espada em
   pixel art (box-shadow) gira 900° (2,5 voltas) em volta do cabo
   no centro do personagem — ataque em área ao redor, NÃO
   direcional (range 0, self-cast). Com rastros fantasma nos 4
   cantos, faíscas espalhadas e tremedeira. 100% CSS/DOM, sem
   PNG/sprite sheet.

   Integração: #melee-fx-layer + spawnTumultFX() em game.js.
   O .tumult-fx é ancorado no CENTRO do tile do caster (data.x/
   data.y do servidor = canto sup-esq do SQM; somamos TILE_SIZE/2).
   O .tumult-fx__stage (32x32 em -14,-16) faz o cabo da espada
   (4px 14px da origem da arma) cair exatamente no centro.

   Pixel art cru: o giro é steps(1) com rotações em degraus de 45°
   (valores inteiros, sem scale fracionário). A tremedeira usa px
   inteiros. Opacidades podem usar easing suave (não borra pixels).
   ============================================================ */

.tumult-fx {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 40;
    image-rendering: pixelated;
}

/* Palco 32x32: cabo da espada (stage 14,16) cai no centro do tile.
   Recebe a tremedeira enquanto o giro acontece. */
.tumult-fx__stage {
    position: absolute;
    left: -14px;
    top: -16px;
    width: 32px;
    height: 32px;
}

/* ------------------------------------------------------------
   PALETA DE CORES (mesma da espada do knight):
   #110505 = Outline / Contorno escuro do metal
   #33333f = Grip / couro escuro do cabo
   #5a5a6e = Aço base (tom médio da lâmina)
   #9a9ab0 = Highlight / Brilho da lâmina polida
   #f1c40f = Guarda dourada
   #d92b25 = Gema vermelha do pomo
   #ffe600 / #ffffff = Faíscas dos impactos ao redor
   ------------------------------------------------------------ */

/* ESPADA — giro completo em torno do cabo (pivot 4px 14px) */
.tumult-fx__sword {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: 4px 14px;
    box-shadow:
        4px 0px #110505, 5px 0px #110505,
        3px 1px #110505, 4px 1px #9a9ab0, 5px 1px #9a9ab0, 6px 1px #110505,
        3px 2px #110505, 4px 2px #9a9ab0, 5px 2px #5a5a6e, 6px 2px #110505,
        3px 3px #110505, 4px 3px #9a9ab0, 5px 3px #5a5a6e, 6px 3px #110505,
        3px 4px #110505, 4px 4px #9a9ab0, 5px 4px #5a5a6e, 6px 4px #110505,
        3px 5px #110505, 4px 5px #9a9ab0, 5px 5px #5a5a6e, 6px 5px #110505,
        3px 6px #110505, 4px 6px #9a9ab0, 5px 6px #5a5a6e, 6px 6px #110505,
        3px 7px #110505, 4px 7px #9a9ab0, 5px 7px #5a5a6e, 6px 7px #110505,
        1px 8px #110505, 2px 8px #f1c40f, 3px 8px #f1c40f, 4px 8px #f1c40f, 5px 8px #f1c40f, 6px 8px #f1c40f, 7px 8px #f1c40f, 8px 8px #110505,
        2px 9px #110505, 3px 9px #f1c40f, 4px 9px #f1c40f, 5px 9px #f1c40f, 6px 9px #f1c40f, 7px 9px #f1c40f, 8px 9px #110505,
        3px 10px #110505, 4px 10px #33333f, 5px 10px #33333f, 6px 10px #110505,
        3px 11px #110505, 4px 11px #33333f, 5px 11px #33333f, 6px 11px #110505,
        3px 12px #110505, 4px 12px #33333f, 5px 12px #33333f, 6px 12px #110505,
        3px 13px #110505, 4px 13px #d92b25, 5px 13px #d92b25, 6px 13px #110505,
        4px 14px #110505, 5px 14px #110505;

    animation: tumult-spin 0.9s steps(1) 2 forwards;
}

/* Rastro fantasma da lâmina em rotação (1 por quadrante) */
.tumult-fx__ghost {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 1px;
    height: 1px;
    background: transparent;
    opacity: 0;
    box-shadow:
        0px 0px #9a9ab0, 2px 1px #9a9ab0, 4px 2px #5a5a6e, 6px 3px #5a5a6e, 8px 4px #33333f,
        -1px -2px #ffffff, 1px -3px #ffffff;
}

.tumult-fx__ghost--1 { transform: rotate(45deg);  animation: tumult-flick 0.9s ease-out 0.16s 2 forwards; }
.tumult-fx__ghost--2 { transform: rotate(135deg); animation: tumult-flick 0.9s ease-out 0.34s 2 forwards; }
.tumult-fx__ghost--3 { transform: rotate(225deg); animation: tumult-flick 0.9s ease-out 0.52s 2 forwards; }
.tumult-fx__ghost--4 { transform: rotate(315deg); animation: tumult-flick 0.9s ease-out 0.70s 2 forwards; }

/* Faísca espalhada (posição e delay via JS — 4 pontos, 6 direções) */
.tumult-fx__star {
    position: absolute;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        0px -2px #ffe600, 0px -1px #ffffff,
        -2px 0px #ffe600, -1px 0px #ffffff, 0px 0px #ffffff, 1px 0px #ffffff, 2px 0px #ffe600,
        0px 1px #ffffff, 0px 2px #ffe600;
    opacity: 0;
    animation: tumult-star 0.3s steps(1) forwards;
}

/* Giro da espada em degraus de 45° (steps(1)): 21 poses em 0,9s, sempre
   alinhada na diagonal/ortogonal (pixel art cru, sem anti-aliasing).
   900° = 2,5 voltas. A animação roda 2x (1.8s) e os 5 hits do dano saem
   1 por volta da espada (a cada 360ms, via hitDelays no servidor). */
@keyframes tumult-spin {
    0%   { transform: rotate(0deg);   opacity: 0; }
    5%   { transform: rotate(45deg);  opacity: 1; }
    10%  { transform: rotate(90deg); }
    15%  { transform: rotate(135deg); }
    20%  { transform: rotate(180deg); }
    25%  { transform: rotate(225deg); }
    30%  { transform: rotate(270deg); }
    35%  { transform: rotate(315deg); }
    40%  { transform: rotate(360deg); }
    45%  { transform: rotate(405deg); }
    50%  { transform: rotate(450deg); }
    55%  { transform: rotate(495deg); }
    60%  { transform: rotate(540deg); }
    65%  { transform: rotate(585deg); }
    70%  { transform: rotate(630deg); }
    75%  { transform: rotate(675deg); }
    80%  { transform: rotate(720deg); }
    85%  { transform: rotate(765deg); }
    90%  { transform: rotate(810deg); }
    95%  { transform: rotate(855deg); opacity: 1; }
    100% { transform: rotate(900deg); opacity: 0; }
}

@keyframes tumult-flick {
    0%, 100% { opacity: 0; }
    5%       { opacity: 0.8; }
    16%      { opacity: 0; }
}

@keyframes tumult-star {
    0%   { transform: translate(0px, 0px); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* Tremedeira do giro (px inteiros, sem borra) */
@keyframes tumult-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1px, 1px); }
    20% { transform: translate(1px, -1px); }
    30% { transform: translate(-1px, 0px); }
    40% { transform: translate(1px, 1px); }
    50% { transform: translate(0px, -1px); }
    60% { transform: translate(-1px, -1px); }
    70% { transform: translate(1px, 0px); }
    80% { transform: translate(-1px, 1px); }
    90% { transform: translate(1px, -1px); }
}

/* Tremedeira aplicada pelo JS durante a animação (roda 2x = 1.8s) */
.tumult-fx__stage.is-shaking {
    animation: tumult-shake 0.9s ease-in-out 2;
}