/* Art-directed scatter: stable on refresh, with reserved space for every animal. */
body.r-page main > .animal-stop {
  position: relative;
  padding-bottom: 110px;
}
body.r-page .page-animal {
  position: absolute;
  display: block;
  width: var(--animal-size, 90px);
  aspect-ratio: 1;
  left: var(--animal-left, auto);
  right: var(--animal-right, auto);
  bottom: 3px;
  background: url('assets/yeopseom-animals-v2.png') var(--animal-cell) / 300% 200% no-repeat;
  transform: rotate(var(--animal-tilt, 0deg)) scaleX(var(--animal-facing, 1));
  transform-origin: 50% 85%;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}
.stop-otter { --animal-cell: 0 0; --animal-left: 7%; --animal-tilt: -18deg; --animal-size: 96px; --animal-facing: -1; }
.stop-bird { --animal-cell: 50% 0; --animal-right: 18%; --animal-tilt: 7deg; --animal-size: 70px; }
.stop-rabbit { --animal-cell: 100% 0; --animal-right: 7%; --animal-tilt: 20deg; --animal-size: 104px; --animal-facing: -1; }
.stop-bear { --animal-cell: 0 100%; --animal-left: 20%; --animal-tilt: -5deg; --animal-size: 100px; }
.stop-turtle { --animal-cell: 50% 100%; --animal-right: 11%; --animal-tilt: -9deg; --animal-size: 76px; --animal-facing: -1; }
.stop-cat { --animal-cell: 100% 100%; --animal-left: 8%; --animal-tilt: -16deg; --animal-size: 94px; }
/* Different gestures, not a synchronized line of bobbing stickers. */
body .stop-bird .page-animal { animation: bird-hop 9s ease-in-out 3; }
body .stop-rabbit .page-animal { animation: curious-lean 11s ease-in-out 3; animation-delay: -4s; }
body .stop-cat .page-animal { animation: curious-lean 13s ease-in-out 3; animation-delay: -8s; }
@keyframes bird-hop {
  0%, 72%, 88%, 100% { transform: rotate(7deg); }
  78% { transform: translateY(-8px) rotate(-5deg); }
  83% { transform: translateY(-2px) rotate(4deg); }
}
@keyframes curious-lean {
  0%, 65%, 100% { transform: rotate(var(--animal-tilt)) scaleX(var(--animal-facing, 1)); }
  78% { transform: rotate(calc(var(--animal-tilt) - 9deg)) scaleX(var(--animal-facing, 1)); }
}
body .story-situations li:nth-child(2n) .empathy-animal { transform: scaleX(-1) rotate(-9deg); }
body .story-situations li:nth-child(3n) .empathy-animal { transform: rotate(12deg); }
@media (prefers-reduced-motion: reduce) {
  body.r-page .page-animal { animation: none; }
}
/* Tables stay intact; their different heights make the gathering less regimented. */
body .story-animals { align-items: start; padding-bottom: 42px; column-gap: 28px; }
body .story-animals > div:nth-child(1) { margin-top: 24px; transform: rotate(-3deg); }
body .story-animals > div:nth-child(2) { margin-top: 66px; transform: rotate(2deg); }
body .story-animals > div:nth-child(3) { margin-top: 4px; transform: rotate(-2deg); }
body .story-animals > div:nth-child(4) { margin-top: 42px; transform: rotate(4deg); }
@media (max-width: 650px) {
  body.r-page main > .animal-stop { padding-bottom: 82px; }
  body.r-page .page-animal { width: calc(var(--animal-size) * .7); bottom: 4px; }
  body .story-animals { column-gap: 20px; row-gap: 12px; padding-inline: 5px; padding-bottom: 12px; }
  body .story-animals > div:nth-child(1) { margin-top: 2px; }
  body .story-animals > div:nth-child(2) { margin-top: 36px; }
  body .story-animals > div:nth-child(3) { margin-top: 0; }
  body .story-animals > div:nth-child(4) { margin-top: 22px; }
}