/*
 * Creature animations. creatures.js adds `is-playing` to `.creature-body`;
 * the matching `creature-<name>` class picks the keyframes. One-shot
 * animations end with `animationend`, which removes `is-playing`.
 *
 * Sprites are drawn with their origin at the bottom centre (0,0), facing right.
 */

.creature-body {
  transform-box: fill-box;
  transform-origin: center bottom;
}

/* Sprite swap: the resting pose is shown normally, the active one while playing. */
.creature-active {
  display: none;
}
.creature-body.is-playing .creature-active {
  display: inline;
}
.creature-body.is-playing .creature-rest {
  display: none;
}
/* Only creatures with an active sprite hide the resting one; others keep it. */
.creature-body.is-playing:not(:has(.creature-active)) .creature-rest {
  display: inline;
}

/* Creatures that are invisible until they play (fox behind the tree line, fish in the river). */
.creature-body.is-hidden {
  opacity: 0;
}
.creature-body.is-hidden.is-playing {
  opacity: 1;
}

/* Seagull: takes off to the right, loops over the sea and lands again. */
.creature-fly.is-playing {
  animation: creature-fly 3.6s ease-in-out 1;
}
@keyframes creature-fly {
  0%   { transform: translate(0, 0) rotate(0deg); }
  15%  { transform: translate(40px, -36px) rotate(-6deg); }
  50%  { transform: translate(240px, 40px) rotate(4deg); }
  80%  { transform: translate(90px, -20px) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Fox: peeks out from the forest edge, looks around, ducks back. */
.creature-peek.is-playing {
  animation: creature-peek 2.4s ease-in-out 1;
}
@keyframes creature-peek {
  0%   { transform: translateY(48px); opacity: 1; }
  25%  { transform: translateY(4px); opacity: 1; }
  70%  { transform: translateY(2px); opacity: 1; }
  100% { transform: translateY(48px); opacity: 1; }
}

/* Fish: short arc out of the river. */
.creature-jump.is-playing {
  animation: creature-jump 1.1s ease-out 1;
}
@keyframes creature-jump {
  0%   { transform: translate(0, 0) rotate(-30deg); opacity: 0; }
  20%  { opacity: 1; }
  50%  { transform: translate(18px, -34px) rotate(0deg); }
  80%  { opacity: 1; }
  100% { transform: translate(36px, 0) rotate(40deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .creature-body.is-playing {
    animation: none;
  }
}