/* ── Jump: squash launch → stretch apex → squash land ────── */

.anim-jump.mote-body-anim {
  animation: ma-jump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-box: fill-box;
  transform-origin: 50% 85%;
}

@keyframes ma-jump {
  0%   { transform: scaleY(var(--squash-depth, 0.85)) scaleX(calc(2 - var(--squash-depth, 0.85))); }
  20%  { transform: scaleY(var(--squash-depth, 0.85)) scaleX(calc(2 - var(--squash-depth, 0.85))); }
  50%  { transform: translateY(calc(var(--bounce-height, 8px) * -3))
                    scaleY(var(--stretch-peak, 1.12)) scaleX(calc(2 - var(--stretch-peak, 1.12))); }
  80%  { transform: scaleY(var(--squash-depth, 0.85)) scaleX(calc(2 - var(--squash-depth, 0.85))); }
  100% { transform: scaleY(1) scaleX(1); }
}

.anim-jump .mote-features-top {
  animation: ma-jump-top 0.5s ease-in-out forwards;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes ma-jump-top {
  0%, 20% { transform: scaleY(0.8); }
  50%     { transform: scaleY(1.15) translateY(-2px); }
  80%     { transform: scaleY(0.85); }
  100%    { transform: scaleY(1); }
}

.anim-jump .mote-shadow ellipse {
  animation: ma-jump-shadow 0.5s ease-in-out forwards;
}
@keyframes ma-jump-shadow {
  0%, 20% { transform: scaleX(1); opacity: 0.25; }
  50%     { transform: scaleX(0.5); opacity: 0.12; }
  80%     { transform: scaleX(1.1); opacity: 0.3; }
  100%    { transform: scaleX(1); opacity: 0.25; }
}

/* ── Attack: pullback → lunge → settle ───────────────────── */

.anim-attack.mote-body-anim {
  animation: ma-attack 0.4s cubic-bezier(0.2, 0, 0, 1) forwards;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@keyframes ma-attack {
  0%   { transform: translateX(0) scaleX(1) scaleY(1); }
  15%  { transform: translateX(-3px) scaleX(0.92) scaleY(1.06); }
  35%  { transform: translateX(10px) scaleX(1.12) scaleY(0.92); }
  60%  { transform: translateX(6px) scaleX(0.98) scaleY(1.01); }
  100% { transform: translateX(0) scaleX(1) scaleY(1); }
}

.anim-attack .mote-eye {
  animation: ma-attack-eyes 0.4s ease-out forwards;
}
@keyframes ma-attack-eyes {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.2); }
}

/* ── Hurt: squash + flash + eyes squeeze ─────────────────── */

.anim-hurt.mote-body-anim {
  animation: ma-hurt-squash 0.35s ease-out forwards;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@keyframes ma-hurt-squash {
  0%   { transform: scaleY(var(--squash-depth, 0.85)) scaleX(calc(2 - var(--squash-depth, 0.85))); }
  40%  { transform: scaleY(var(--stretch-peak, 1.12)) scaleX(calc(2 - var(--stretch-peak, 1.12))); }
  70%  { transform: scaleY(0.97) scaleX(1.02); }
  100% { transform: scaleY(1) scaleX(1); }
}

.anim-hurt .mote-skin {
  animation: ma-hurt-flash 0.35s step-start forwards;
}
@keyframes ma-hurt-flash {
  0%, 25%    { filter: brightness(2.5); }
  50%        { filter: brightness(1); }
  65%        { filter: brightness(1.8); }
  80%, 100%  { filter: brightness(1); }
}

.anim-hurt .mote-eye {
  animation: ma-hurt-eyes 0.35s ease-out forwards;
}
@keyframes ma-hurt-eyes {
  0%        { transform: scaleY(0.1) scaleX(1.3); }
  60%, 100% { transform: scaleY(1) scaleX(1); }
}

/* ── Celebrate: rapid bounce + happy eyes ─────────────────── */

.anim-celebrate.mote-body-anim {
  animation: ma-celebrate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  transform-box: fill-box;
  transform-origin: 50% 85%;
}

@keyframes ma-celebrate {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1) rotate(0deg); }
  30%      { transform: translateY(-10px) scaleY(1.1) scaleX(0.92) rotate(3deg); }
  60%      { transform: translateY(-6px) scaleY(0.95) scaleX(1.04) rotate(-2deg); }
}

.anim-celebrate .mote-eye {
  animation: ma-celebrate-eyes 0.4s ease-in-out infinite;
}
@keyframes ma-celebrate-eyes {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.anim-celebrate .mote-features-top {
  animation: ma-celebrate-top 0.3s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes ma-celebrate-top {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(10deg); }
}

.anim-celebrate .mote-features-side {
  animation: ma-celebrate-arms 0.35s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes ma-celebrate-arms {
  from { transform: rotate(-15deg) translateY(-2px); }
  to   { transform: rotate(15deg) translateY(-2px); }
}