/* The pumpkin pet (shared/_pumpkin_pet). Origins are in SVG user units of the
   944x800 viewBox, hence transform-box: view-box. It is the one looping
   animation in the app (see the design skill); every motion stops under
   prefers-reduced-motion. */
.pumpkin-pet { display: block; overflow: visible; }

.pumpkin-pet .pp-body,
.pumpkin-pet .pp-shadow,
.pumpkin-pet .pp-eyes,
.pumpkin-pet .pp-brows,
.pumpkin-pet .pp-leaf,
.pumpkin-pet .pp-vine { transform-box: view-box; }

.pumpkin-pet .pp-body { transform-origin: 512px 845px; animation: pp-breathe 4s ease-in-out infinite; }
.pumpkin-pet .pp-shadow { transform-origin: 512px 852px; animation: pp-shadow 4s ease-in-out infinite; }
.pumpkin-pet .pp-eyes { transform-origin: 512px 570px; animation: pp-blink 4s ease-in-out infinite; }
.pumpkin-pet .pp-brows { animation: pp-brows 4s ease-in-out infinite; }
.pumpkin-pet .pp-leaf { transform-origin: 548px 262px; animation: pp-leaf 4s ease-in-out infinite; }
.pumpkin-pet .pp-vine { transform-origin: 478px 262px; animation: pp-vine 2s ease-in-out infinite; }

.pumpkin-pet .pp-spark {
  transform-box: fill-box;
  transform-origin: center;
  color: var(--pill-amber-text);
  animation: pp-twinkle 2.8s ease-in-out infinite;
}
.pumpkin-pet .pp-spark:nth-of-type(2) { animation-delay: -0.7s; }
.pumpkin-pet .pp-spark:nth-of-type(3) { animation-delay: -1.4s; }
.pumpkin-pet .pp-spark:nth-of-type(4) { animation-delay: -2.1s; }
.pumpkin-pet .pp-spark:nth-of-type(5) { animation-delay: -0.35s; }

@keyframes pp-breathe {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  25% { transform: scale(0.99, 1.018) rotate(0.6deg); }
  75% { transform: scale(1.01, 0.982) rotate(-0.6deg); }
}
@keyframes pp-shadow {
  0%, 100% { transform: scaleX(1); }
  25% { transform: scaleX(1.012); }
  75% { transform: scaleX(0.988); }
}
@keyframes pp-blink {
  0%, 56%, 70%, 100% { transform: scaleY(1); }
  63% { transform: scaleY(0.08); }
}
@keyframes pp-brows {
  0%, 56%, 70%, 100% { transform: translateY(0); }
  63% { transform: translateY(5px); }
}
@keyframes pp-leaf {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(6deg); }
  75% { transform: rotate(-6deg); }
}
@keyframes pp-vine {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  75% { transform: rotate(-8deg); }
}
@keyframes pp-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.75); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .pumpkin-pet .pp-body,
  .pumpkin-pet .pp-shadow,
  .pumpkin-pet .pp-eyes,
  .pumpkin-pet .pp-brows,
  .pumpkin-pet .pp-leaf,
  .pumpkin-pet .pp-vine,
  .pumpkin-pet .pp-spark { animation: none; }
  .pumpkin-pet .pp-spark { opacity: 0.6; }
}