/* pet-anim.css — idle life for the creatures drawn by js/pets.js. Owned by S1.

   Rules of the house:
   - Everything is slow (1.5-3s), small (<= 7 viewBox units) and ease-in-out.
     These loop on screen for minutes; anything fast reads as agitation.
   - Every animated element is a wrapper <g> with NO SVG transform attribute,
     so CSS transform never fights a presentation attribute.
   - `--pet-phase` is set inline per pet (derived from its id) and used as a
     NEGATIVE delay, so twelve pets on the applause screen breathe out of sync.
   - .pet--static (animate:false) and prefers-reduced-motion kill everything.  */

/* ---------------------------------------------------------------- base -- */

.pet {
  display: block;
  overflow: visible;          /* small rotations must not clip at the edges */
  -webkit-user-select: none; user-select: none;
}

.pet--silhouette { opacity: .92; }

.pet__anim,
.pet__eye,
.pet__tail,
.pet__ears,
.pet__wing,
.pet__paw,
.pet__z,
.pet__sparkle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.pet__anim {
  transform-origin: 50% 94%;  /* stand on the feet */
  will-change: transform;
  animation-duration: 2.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--pet-phase, 0s) * -1);
}

/* ------------------------------------------------------- idle animations -- */

/* hop — bunny, frog. A squash on landing sells the weight. */
@keyframes pet-hop {
  0%, 100% { transform: translateY(0)     scale(1, 1); }
  10%      { transform: translateY(.8px)  scale(1.05, .94); }
  38%      { transform: translateY(-7px)  scale(.97, 1.05); }
  60%      { transform: translateY(0)     scale(1.04, .96); }
  72%      { transform: translateY(0)     scale(1, 1); }
}
.pet-anim--hop { animation-name: pet-hop; animation-duration: 1.9s; }

/* bob — ladybug, fox, kitten. Just breathing, really. */
@keyframes pet-bob {
  0%, 100% { transform: translateY(0)      scale(1, 1); }
  50%      { transform: translateY(-2.5px) scale(.995, 1.02); }
}
.pet-anim--bob { animation-name: pet-bob; animation-duration: 2.4s; }

/* sway — lamb, owl. Rocks on the spot. */
@keyframes pet-sway {
  0%, 100% { transform: rotate(-3.2deg); }
  50%      { transform: rotate(3.2deg); }
}
.pet-anim--sway { animation-name: pet-sway; animation-duration: 2.8s; }

/* float — dragon, unicorn. Never touches down. */
@keyframes pet-float {
  0%, 100% { transform: translateY(.5px)  rotate(-1.6deg); }
  50%      { transform: translateY(-4.5px) rotate(1.6deg); }
}
.pet-anim--float {
  animation-name: pet-float; animation-duration: 3s;
  transform-origin: 50% 50%;
}

/* waddle — duckling. Tips side to side, lifting each foot at the crossover. */
@keyframes pet-waddle {
  0%, 100% { transform: translateX(-1.4px) translateY(0)     rotate(-4.5deg); }
  25%      { transform: translateX(0)      translateY(-1.4px) rotate(0deg); }
  50%      { transform: translateX(1.4px)  translateY(0)     rotate(4.5deg); }
  75%      { transform: translateX(0)      translateY(-1.4px) rotate(0deg); }
}
.pet-anim--waddle { animation-name: pet-waddle; animation-duration: 1.9s; }

/* shuffle — turtle, hedgehog. Slow scoot; the slowest thing on screen. */
@keyframes pet-shuffle {
  0%, 100% { transform: translateX(-2px) rotate(-1deg); }
  50%      { transform: translateX(2px)  rotate(1deg); }
}
.pet-anim--shuffle { animation-name: pet-shuffle; animation-duration: 2.9s; }

/* ------------------------------------------------------ mood animations -- */

/* happy / clap — a lighter, peppier bounce that replaces the idle loop. */
@keyframes pet-happy {
  0%, 100% { transform: translateY(0)    scale(1, 1); }
  38%      { transform: translateY(-4px) scale(.98, 1.04); }
  68%      { transform: translateY(0)    scale(1.03, .97); }
}
.pet-anim--happy { animation-name: pet-happy; animation-duration: 1.1s; }

/* sleep — breathing only. */
@keyframes pet-sleep {
  0%, 100% { transform: scale(1, 1)         translateY(0); }
  50%      { transform: scale(1.025, 1.035) translateY(-.6px); }
}
.pet-anim--sleep { animation-name: pet-sleep; animation-duration: 3s; }

/* --------------------------------------------------------------- blink -- */
/* The single cheapest thing that makes a drawn creature feel alive: rare,
   fast, and off-sync between pets. Only OPEN eyes get .pet__eye--blink. */
@keyframes pet-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%           { transform: scaleY(.08); }
  95.5%         { transform: scaleY(1); }
}
.pet__eye--blink {
  animation: pet-blink 5.6s ease-in-out infinite;
  animation-delay: calc(var(--pet-phase, 0s) * -2.7);
}

/* ---------------------------------------------------------- part motion -- */

/* tail — a lazy wag, hinged at the end attached to the body (left edge). */
@keyframes pet-tail {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
.pet__tail {
  transform-origin: 12% 55%;
  animation: pet-tail 2.6s ease-in-out infinite;
  animation-delay: calc(var(--pet-phase, 0s) * -1.5);
}

/* wings — a slow settle, hinged at the shoulder. */
@keyframes pet-wing-l {
  0%, 100% { transform: rotate(2.5deg); }
  50%      { transform: rotate(-5deg); }
}
@keyframes pet-wing-r {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(5deg); }
}
.pet__wing--l { transform-origin: 92% 18%; animation: pet-wing-l 2.7s ease-in-out infinite; }
.pet__wing--r { transform-origin:  8% 18%; animation: pet-wing-r 2.7s ease-in-out infinite; }
.pet__wing { animation-delay: calc(var(--pet-phase, 0s) * -1.1); }

/* the dragon flaps a little harder while it floats */
.pet[data-idle="float"] .pet__wing { animation-duration: 1.6s; }

/* ears — barely-there twitch. */
@keyframes pet-ears {
  0%, 88%, 100% { transform: rotate(0deg); }
  92%           { transform: rotate(-2.2deg); }
  96%           { transform: rotate(1.6deg); }
}
.pet__ears {
  transform-origin: 50% 88%;
  animation: pet-ears 6.4s ease-in-out infinite;
  animation-delay: calc(var(--pet-phase, 0s) * -3.1);
}

/* --------------------------------------------------------------- clap --- */
/* The payoff moment: she finished a book and the pets applaud. Faster than
   anything else in the file on purpose, and only ever shown for a few seconds. */
@keyframes pet-clap-l {
  0%, 100% { transform: translateX(-2.6px) rotate(-10deg); }
  50%      { transform: translateX(2.2px)  rotate(7deg); }
}
@keyframes pet-clap-r {
  0%, 100% { transform: translateX(2.6px)  rotate(10deg); }
  50%      { transform: translateX(-2.2px) rotate(-7deg); }
}
.pet__paw--l { animation: pet-clap-l .46s ease-in-out infinite; }
.pet__paw--r { animation: pet-clap-r .46s ease-in-out infinite; }
.pet__paw    { animation-delay: calc(var(--pet-phase, 0s) * -.4); }

/* ---------------------------------------------------------------- zzz --- */
@keyframes pet-z {
  0%       { transform: translate(0, 2px) scale(.7); opacity: 0; }
  25%      { opacity: 1; }
  100%     { transform: translate(2.5px, -7px) scale(1.05); opacity: 0; }
}
.pet__z { animation: pet-z 2.8s ease-in-out infinite; }
.pet__zzz .pet__z:nth-child(2) { animation-delay: 1.1s; }

/* ------------------------------------------------------------ sparkle --- */
@keyframes pet-sparkle {
  0%, 100% { transform: scale(.55) rotate(0deg);  opacity: .35; }
  50%      { transform: scale(1)   rotate(22deg); opacity: 1; }
}
.pet__sparkle { animation: pet-sparkle 2.3s ease-in-out infinite; }
.pet__sparkles .pet__sparkle:nth-child(2) { animation-delay: .55s; }
.pet__sparkles .pet__sparkle:nth-child(3) { animation-delay: 1.15s; }
.pet__sparkles .pet__sparkle:nth-child(4) { animation-delay: 1.7s; }

/* ------------------------------------------------------------- static --- */
/* animate:false must produce a completely still pet. */
.pet--static,
.pet--static * { animation: none !important; transition: none !important; }

/* tokens.css already has a global rule; scope it here too, defensively. */
@media (prefers-reduced-motion: reduce) {
  .pet,
  .pet * { animation: none !important; transition: none !important; }
}