/* The Two-Handed Seraph (Cloudspire mini-boss) sprite — stacked painted poses,
   one shown at a time. Lives inside a .monster .m-body slot in combat. Big:
   she is a seraph. */
.seraph {
  position: relative;
  width: 300px;
  height: 300px;
}
/* She never touches the ground — a slow heavenly float at rest, serene or furious. */
.seraph[data-state="rest"], .seraph[data-state="fury"] { animation: seraph-float 4.2s ease-in-out infinite; }
@keyframes seraph-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.seraph-pose {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .06s linear;
}
.seraph-pose.on { opacity: 1; }
.seraph-pose img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* Judgement: the scales blaze and the whole figure slams down a beat. */
.seraph-pose[data-pose="strike"].on img {
  animation: seraph-slam .9s cubic-bezier(.2,.85,.3,1) 1;
  filter: drop-shadow(0 0 20px rgba(255, 208, 100, .85));
}
@keyframes seraph-slam {
  0%   { transform: translateY(-14px); }
  30%  { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

/* Grace: a soft rose pulse rolling off the open hand. */
.seraph-pose[data-pose="grace"].on img {
  animation: seraph-grace .9s ease-in-out 1;
}
@keyframes seraph-grace {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 160, 200, .5)); }
  50%      { filter: drop-shadow(0 0 26px rgba(255, 170, 210, .95)) brightness(1.08); }
}

/* Fury: the cracked halo burns — and keeps burning once it's the resting pose. */
.seraph-pose[data-pose="fury"].on img {
  animation: seraph-burn 1.3s ease-in-out infinite;
}
@keyframes seraph-burn {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 120, 60, .6)) brightness(1); }
  50%      { filter: drop-shadow(0 0 26px rgba(255, 150, 70, .95)) brightness(1.12); }
}