/* ============================================================
   SPRITES-PROCEDURAL.CSS — Estilos de personagens via CSS
   ============================================================ */

.proc-sprite {
  position: relative;
  width: 48px;
  height: 64px;
  /* Variaveis herdadas: --skin, --clothes, --armor, --weapon */
  transform-origin: bottom center;
}

/* ── Partes do Corpo ── */
.proc-sprite > div {
  position: absolute;
  background-color: var(--skin);
  border: 2px solid var(--bg-void); /* contorno de pixel art */
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.3);
}

.torso {
  width: 24px;
  height: 28px;
  bottom: 16px;
  left: 12px;
  background-color: var(--clothes);
  border-radius: 4px;
}

.head {
  width: 20px;
  height: 20px;
  bottom: 40px;
  left: 14px;
  border-radius: 4px;
  background-color: var(--skin);
  z-index: 10;
}

/* Olho (encara pra direita ou esquerda) */
.eye {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  top: 4px;
  right: 4px;
}
.enemy-sprite .eye { right: auto; left: 4px; background: #f00; } /* Inimigos olham pra esquerda */

.leg {
  width: 8px;
  height: 16px;
  bottom: 0;
  background-color: var(--armor);
  transform-origin: top center;
}
.leg-back { left: 14px; filter: brightness(0.7); z-index: 1; }
.leg-front { left: 26px; z-index: 5; }

.arm {
  width: 8px;
  height: 20px;
  bottom: 18px;
  background-color: var(--clothes);
  transform-origin: top center;
}
.arm-back { left: 16px; filter: brightness(0.7); z-index: 2; }
.arm-front { left: 24px; z-index: 6; }

/* ── Armas ── */
.weapon {
  position: absolute;
  bottom: -4px;
  left: 2px;
  transform-origin: bottom center;
  background-color: var(--weapon);
  border: 1px solid #000;
}

/* Espada */
.weapon.sword { width: 4px; height: 32px; bottom: -8px; left: 2px; transform: rotate(15deg); }
/* Cajado */
.weapon.staff { width: 4px; height: 40px; bottom: -12px; left: 2px; background-color: #6d4c41; }
.weapon.staff::before { content: ''; position:absolute; top:-6px; left:-4px; width:10px; height:10px; background:var(--weapon); border-radius:50%; box-shadow:0 0 8px var(--weapon); }
/* Arco */
.weapon.bow { width: 16px; height: 32px; bottom: -8px; left: -6px; border-radius: 50%; border: 3px solid #8d6e63; border-left: none; background: transparent; transform: rotate(-15deg); }
/* Adaga */
.weapon.dagger { width: 4px; height: 16px; bottom: 0; left: 2px; transform: rotate(45deg); }
/* Clava/Porrete */
.weapon.club { width: 8px; height: 28px; bottom: -4px; background-color: #5d4037; border-radius: 4px 4px 2px 2px; transform: rotate(20deg); }


/* ============================================================
   ESTADOS DE ANIMAÇÃO 
   ============================================================ */

/* ── IDLE (Parado Respirando) ── */
.state-idle .torso, .state-idle .head, .state-idle .arm {
  animation: proc-idle 1.5s infinite ease-in-out;
}
@keyframes proc-idle {
  0% { transform: translateY(0); }
  50% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* ── WALK (Caminhando) ── */
.state-walk .leg-front { animation: walk-leg-f 0.5s infinite alternate linear; }
.state-walk .leg-back  { animation: walk-leg-b 0.5s infinite alternate linear; }
.state-walk .arm-front { animation: walk-arm-f 0.5s infinite alternate linear; }
.state-walk .arm-back  { animation: walk-arm-b 0.5s infinite alternate linear; }
.state-walk .torso, .state-walk .head { animation: proc-idle 0.25s infinite ease-in-out; }

@keyframes walk-leg-f { 0% { transform: rotate(-30deg); } 100% { transform: rotate(30deg); } }
@keyframes walk-leg-b { 0% { transform: rotate(30deg); } 100% { transform: rotate(-30deg); } }
@keyframes walk-arm-f { 0% { transform: rotate(20deg); } 100% { transform: rotate(-20deg); } }
@keyframes walk-arm-b { 0% { transform: rotate(-20deg); } 100% { transform: rotate(20deg); } }

/* ── ATTACK (Atacando) ── */
.state-attack .arm-front {
  animation: proc-strike 0.4s forwards ease-in-out;
}
@keyframes proc-strike {
  0% { transform: rotate(0); }
  30% { transform: rotate(-45deg); } /* Carrega golpe */
  60% { transform: rotate(90deg); } /* Desce a arma */
  100% { transform: rotate(0); } /* Volta */
}
.enemy-sprite.state-attack .arm-front {
  animation: proc-strike-enemy 0.4s forwards ease-in-out;
}
@keyframes proc-strike-enemy {
  0% { transform: rotate(0); }
  30% { transform: rotate(45deg); }
  60% { transform: rotate(-90deg); }
  100% { transform: rotate(0); }
}

/* ── HIT (Tomando Dano) ── */
.state-hit {
  animation: proc-hit 0.3s ease-out;
}
@keyframes proc-hit {
  0% { filter: brightness(2) saturate(5) hue-rotate(-50deg); transform: translateX(-4px) rotate(-5deg); }
  50% { transform: translateX(4px) rotate(5deg); }
  100% { filter: none; transform: translateX(0) rotate(0); }
}

/* ── DEAD (Morto) ── */
.state-dead {
  transform: rotate(90deg) translateY(20px);
  filter: brightness(0.3) grayscale(1);
  transition: all 0.5s;
}