/* Steampunk Warrior — painted key-art presentation.
   One transparent painted pose per state, centred and bottom-aligned so his
   feet stay on the ground. The inner <img> carries the motion so the centring
   transform on .spk-pose is never clobbered. Drop .spk in any sized box. */

.spk {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;            /* let the blade / coat bleed past the box */
}
.spk-stack { position: absolute; inset: 0; overflow: visible; }

/* Each pose fills the height, hugs the bottom centre, hidden until .on. */
.spk-pose {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s linear;
}
.spk-pose.on { opacity: 1; }
.spk-pose img {
  height: 100%;
  width: auto;
  display: block;
  -webkit-user-drag: none;
  transform-origin: 50% 100%;   /* pivot at the feet */
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45));
}

/* ---- idle: a slow breathing bob with a gentle weight-shift sway ----
   The painted idle pose faces LEFT while every other state (attack, block, hurt…)
   faces RIGHT toward the enemies, so mirror just the idle pose horizontally. The flip
   lives on the pose wrapper, leaving the breathing bob (on the inner <img>) untouched. */
.spk-pose[data-state="idle"] { transform: translateX(-50%) scaleX(-1); }
.spk[data-state="idle"] .spk-pose.on img { animation: spk-bob 4s ease-in-out infinite; }
@keyframes spk-bob {
  0%, 100% { transform: translateY(0)      rotate(0)      scale(1);           }
  25%      { transform: translateY(-.7%)   rotate(.4deg)  scale(1.003, .997); }
  50%      { transform: translateY(-1.3%)  rotate(0)      scale(1.005, .995); }
  75%      { transform: translateY(-.7%)   rotate(-.4deg) scale(1.003, .997); }
}

/* ---- attack: a painted multi-frame SWING (wind-up → blur → strike → recover) ----
   The motion lives in the four paintings, so frames swap near-instantly (a slow
   cross-fade would smear the swing). Each frame gets a little CSS kick to sell the
   speed and heft: the wind-up coils back, the mid-swing blurs and stretches along
   the arc, the strike lunges forward with a bright flash, the recover eases back. */
.spk[data-state="attack"] .spk-pose { transition: opacity .04s linear; }
.spk[data-state="attack"] .spk-pose.on img { filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); }

/* wind-up: coil back onto the rear foot */
.spk[data-state="attack"] .spk-pose[data-frame="attack-0"].on img { animation: spk-atk-wind .13s ease-out 1; }
@keyframes spk-atk-wind {
  0%   { transform: translateX(0)    scale(1,1); }
  100% { transform: translateX(-7%)  scale(.95,1.05); }
}
/* mid-swing: the fast blurred arc — directional speed-stretch + a touch of blur */
.spk[data-state="attack"] .spk-pose[data-frame="attack-1"].on img {
  animation: spk-atk-swing .08s linear 1;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) blur(1.4px);
}
@keyframes spk-atk-swing {
  0%   { transform: translateX(-6%) scaleX(1.06); }
  100% { transform: translateX(10%) scaleX(1.14); }
}
/* full-extension strike: drive forward, squash on impact, bright aether flash */
.spk[data-state="attack"] .spk-pose[data-frame="attack-2"].on img { animation: spk-atk-strike .18s cubic-bezier(.16,.84,.27,1) 1; }
@keyframes spk-atk-strike {
  0%   { transform: translateX(8%)  scale(1.12,.9);  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) brightness(1.5); }
  60%  { transform: translateX(16%) scale(1.04,.98); filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) brightness(1.15); }
  100% { transform: translateX(12%) scale(1,1);      filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) brightness(1); }
}
/* recover: ease back to neutral */
.spk[data-state="attack"] .spk-pose[data-frame="attack-3"].on img { animation: spk-atk-recover .21s ease-out 1; }
@keyframes spk-atk-recover {
  0%   { transform: translateX(10%) scale(1,1); }
  100% { transform: translateX(0)   scale(1,1); }
}

/* ---- block: a painted self-cast (plant → cyan hex aether barrier flares up) ----
   Two painted frames: he plants into a braced guard, then a hexagonal cyan shield
   snaps up in front. A cyan aether glow rides the whole cast; the barrier frame
   pops outward and settles into a steady shielded shimmer. */
.spk[data-state="block"] .spk-pose { transition: opacity .05s linear; }
.spk[data-state="block"] .spk-pose.on img {
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) drop-shadow(0 0 9px rgba(90,200,255,.55));
}
/* plant frame: a quick brace-down settle */
.spk[data-state="block"] .spk-pose[data-frame="block-0"].on img { animation: spk-brace .15s ease-out 1; }
@keyframes spk-brace {
  0%   { transform: translateY(-3%) scale(1, 1);     }
  100% { transform: translateY(0)   scale(1.02, .98); }
}
/* barrier frame: the hex shield bursts up, then a soft shielded shimmer holds */
.spk[data-state="block"] .spk-pose[data-frame="block-1"].on img { animation: spk-ward .64s ease-out 1; }
@keyframes spk-ward {
  0%   { transform: scale(.94);  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) drop-shadow(0 0 2px rgba(90,200,255,.4)); }
  45%  { transform: scale(1.03); filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(90,210,255,1)); }
  100% { transform: scale(1);    filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) drop-shadow(0 0 13px rgba(90,200,255,.75)); }
}

/* ---- hurt: a sharp knocked-back recoil + red impact flash ----
   Stretches away from the blow (scaleX up, scaleY down) on the first snap, then
   wobbles back — the elongation sells the hit landing harder than a flat slide. */
.spk[data-state="hurt"] .spk-pose.on img { animation: spk-hurt .5s ease-out 1; }
@keyframes spk-hurt {
  0%   { transform: translateX(0)     rotate(0)      scale(1, 1);       filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) brightness(1); }
  12%  { transform: translateX(-9%)   rotate(-4deg)  scale(1.08, .93);  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) brightness(1.9) sepia(.6) hue-rotate(-35deg) saturate(3); } /* snapped back + flash */
  32%  { transform: translateX(4%)    rotate(2deg)   scale(.95, 1.05);  }                                         /* rebound squash */
  58%  { transform: translateX(-3%)   rotate(-1deg)  scale(1.02, .99);  }
  80%  { transform: translateX(1%)    rotate(.5deg)  scale(1, 1);       }
  100% { transform: translateX(0)     rotate(0)      scale(1, 1);       filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) brightness(1); }
}

/* ---- victory: rise up with a pulsing cyan aether glow ----
   The painted victory pose raises the sword overhead, so the BODY sits smaller in the
   frame than the idle even at equal pixel height. Scale it up ~1.32× (feet stay planted
   via transform-origin 50% 100%) so head→feet matches the idle stance. */
.spk[data-state="victory"] .spk-pose.on img { animation: spk-victory 1.8s ease-in-out infinite; }
@keyframes spk-victory {
  0%, 100% { transform: translateY(0)     scale(1.32);  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(37,208,224,.5)); }
  50%      { transform: translateY(-2.5%) scale(1.346); filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(37,208,224,.95)); }
}

/* ---- death: slump down and dim out, hold there ---- */
.spk[data-state="death"] .spk-pose.on img { animation: spk-death .9s ease-in 1 forwards; }
@keyframes spk-death {
  0%   { transform: translateY(0)   rotate(0);     filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) brightness(1);   }
  100% { transform: translateY(3%)  rotate(1.5deg); filter: drop-shadow(0 10px 8px rgba(0,0,0,.5)) brightness(.62) saturate(.7); }
}