/* Pivots of the 240x300 PeePee drawing, used as transform-origin. */
:root {
  --peepee-pivot-feet: 120px 282px;
  --peepee-pivot-body: 120px 170px;
  --peepee-pivot-belly: 120px 224px;
  --peepee-pivot-right-shoulder: 158px 196px;
}
/* Ambient loops: run forever on a class that a drawing or a scene emits. */
@keyframes idle {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.03, 0.97);
  }
}
@keyframes happy {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.03, 0.97);
  }
}
@keyframes shiver {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
@keyframes bl {
  0%,
  93%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}
@keyframes flick {
  0%,
  100% {
    transform: scale(1, 1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.04, 1.08);
    opacity: 1;
  }
}
@keyframes tw {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes sway {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg);
  }
}
@keyframes spn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rspin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes kfloat {
  from {
    transform: translateY(-7px) rotate(-5deg);
  }
  to {
    transform: translateY(7px) rotate(5deg);
  }
}
@keyframes ctneon {
  0%,
  100% {
    opacity: 1;
  }
  47% {
    opacity: 1;
  }
  48% {
    opacity: 0.25;
  }
  49% {
    opacity: 1;
  }
  51% {
    opacity: 0.4;
  }
  52% {
    opacity: 1;
  }
}
/* Shared one-shots: play once when a feature turns a class on. */
@keyframes pop2 {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes bwin {
  0% {
    transform: scale(0.2) rotate(-12deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.15) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: none;
  }
}
@keyframes lvin {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes shake {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-7deg);
  }
  40% {
    transform: rotate(7deg);
  }
  60% {
    transform: rotate(-5deg);
  }
  80% {
    transform: rotate(5deg);
  }
}
@keyframes ctmsg {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  12% {
    opacity: 1;
    transform: scale(1.05);
  }
  20% {
    transform: none;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}