/* The original illustrated poses move as intact art, with a different gesture for
   each role. Transform-only actions have long rests and never change layout. */
img[data-mascot-action] {
  transform-origin: 50% 86%;
}
img[data-mascot-action].is-mascot-live {
  animation: var(--mascot-gesture) var(--mascot-period, 12s) cubic-bezier(.4, 0, .2, 1) infinite;
}
img[data-mascot-action="welcome"] { --mascot-gesture: mascot-welcome; --mascot-period: 11s; transform-origin: 50% 82%; }
img[data-mascot-action="guide"] { --mascot-gesture: mascot-point; --mascot-period: 13s; }
img[data-mascot-action="celebrate"] { --mascot-gesture: mascot-celebrate; --mascot-period: 10s; }
img[data-mascot-action="reading"] { --mascot-gesture: mascot-read; --mascot-period: 15s; transform-origin: 50% 76%; }
img[data-mascot-action="thinking"] { --mascot-gesture: mascot-think; --mascot-period: 14s; transform-origin: 50% 78%; }
img[data-mascot-action="trophy"] { --mascot-gesture: mascot-trophy; --mascot-period: 12s; }
img[data-mascot-action="news"] { --mascot-gesture: mascot-announce; --mascot-period: 11.5s; }
img[data-mascot-action="heart"] { --mascot-gesture: mascot-heart; --mascot-period: 13.5s; transform-origin: 50% 72%; }
img[data-mascot-action="avatar"] { --mascot-gesture: mascot-avatar; --mascot-period: 18s; transform-origin: 50% 72%; }
img[data-mascot-action="present"] { --mascot-gesture: mascot-present; --mascot-period: 16s; transform-origin: 50% 48%; }

/* A quick, cheerful greeting rock suits her raised hand and lifted foot. */
@keyframes mascot-welcome {
  0%, 22%, 100% { transform: none; }
  5% { transform: translateY(-3px) rotate(-4deg); }
  10% { transform: translateY(-4px) rotate(3deg); }
  15% { transform: translateY(-2px) rotate(-2deg); }
}
/* Two deliberate nudges toward the nearby guide copy. */
@keyframes mascot-point {
  0%, 23%, 100% { transform: none; }
  5%, 15% { transform: translateX(-5px) rotate(-1.5deg); }
  10%, 20% { transform: translateX(-1px); }
}
/* Two small hops, with a brief landing, for the card celebration. */
@keyframes mascot-celebrate {
  0%, 23%, 100% { transform: none; }
  3%, 12% { transform: scale(1.015, .975); }
  7% { transform: translateY(-9px) rotate(-2deg) scale(.99, 1.02); }
  16% { transform: translateY(-6px) rotate(2deg); }
  20% { transform: scale(1.01, .985); }
}
/* A little nod over the book, then a long, calm reading pause. */
@keyframes mascot-read {
  0%, 27%, 100% { transform: none; }
  9%, 15% { transform: translateY(2px) rotate(2deg) scaleY(.985); }
  21% { transform: rotate(-.7deg); }
}
/* Hold a curious head tilt, followed by a small upright “aha”. */
@keyframes mascot-think {
  0%, 32%, 100% { transform: none; }
  8%, 16% { transform: rotate(-4deg); }
  24% { transform: translateY(-3px) rotate(1.5deg); }
}
/* The raised trophy gets one proud lift, with a composed landing. */
@keyframes mascot-trophy {
  0%, 28%, 100% { transform: none; }
  5% { transform: translateY(2px) scaleY(.985); }
  12%, 18% { transform: translateY(-7px) rotate(2deg) scaleY(1.015); }
  24% { transform: translateY(1px); }
}
/* Two short emphatic nods accompany the megaphone announcement. */
@keyframes mascot-announce {
  0%, 22%, 100% { transform: none; }
  5% { transform: translateX(-2px) rotate(-3deg); }
  10% { transform: rotate(1deg); }
  15% { transform: translateX(-2px) rotate(-2deg); }
}
/* A bashful lean and two soft squeezes suit the heart-hand gesture. */
@keyframes mascot-heart {
  0%, 30%, 100% { transform: none; }
  8%, 18% { transform: rotate(3deg) scale(1.025); }
  13% { transform: rotate(2deg) scale(1.008); }
  23% { transform: rotate(-1deg); }
}
/* Small cropped avatars greet without moving their enclosing controls. */
@keyframes mascot-avatar {
  0%, 12%, 100% { transform: none; }
  4% { transform: rotate(-5deg) scale(1.035); }
  8% { transform: rotate(3deg) scale(1.02); }
}
/* The existing ad stays clipped in its frame; its type and CTA remain still. */
@keyframes mascot-present {
  0%, 40%, 100% { transform: none; }
  15%, 24% { transform: scale(1.035) translateY(-2px); }
}

/* Preferences also apply before the controller handles a change event. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  img[data-mascot-action].is-mascot-live { animation: none; transform: none; }
}