/* ---------- one-shot gags (.do-*) ---------- */
.mascot.do-look .f-pupils g {
  animation: gLook 1.4s ease-in-out;
}
.mascot.do-hattip .acc-hat {
  animation: gHat 1.2s var(--ease-spring);
}
.mascot.do-hattip .mascot-svg:not(.has-hat) .m-top {
  animation: mWob 0.6s ease-in-out 2;
}
.mascot.do-jump .m-all {
  animation: gJump 0.9s var(--ease-out);
}
.mascot.do-sneeze .m-all {
  animation: gSneeze 1.2s ease-in-out;
}
.mascot.do-sneeze .x-puff {
  animation: gPuff 1.2s ease-out;
}
.mascot.do-sneeze .acc-hat {
  animation: gHatFly 1.4s var(--ease-out);
}
.mascot.do-trip .m-all {
  animation: gTrip 1.2s var(--ease-out);
}
.mascot.do-wiggle .m-bob {
  animation: mShake 0.12s linear 8;
}

/* ---------- keyframes ---------- */
@keyframes mBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes mSway {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes mWob {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.12);
  }
}
@keyframes mBulb {
  0%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0.35;
  }
}
@keyframes mFlick {
  from {
    transform: scale(1, 1) skewX(0deg);
  }
  to {
    transform: scale(0.97, 1.05) skewX(2deg);
  }
}
@keyframes mBlink {
  0%,
  93%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}
@keyframes mShake {
  0%,
  100% {
    transform: rotate(0) translateY(0);
  }
  25% {
    transform: rotate(-3deg) translateY(-1px);
  }
  75% {
    transform: rotate(3deg) translateY(-1px);
  }
}
@keyframes mSob {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  50% {
    transform: translateY(2px) scale(1.02, 0.97);
  }
}
@keyframes mTear {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(26px) scale(1);
    opacity: 0;
  }
}
@keyframes mBeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}
@keyframes mSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes mDizzy {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes aProp {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes aWave {
  from {
    transform: rotate(-40deg) translate(2px, -8px);
  }
  to {
    transform: rotate(-70deg) translate(2px, -10px);
  }
}
@keyframes aWaveBig {
  from {
    transform: rotate(-120deg) translate(4px, 6px);
  }
  to {
    transform: rotate(-160deg) translate(4px, 8px);
  }
}
@keyframes aDance {
  from {
    transform: translateY(0) rotate(-9deg) scale(1.04, 0.96);
  }
  to {
    transform: translateY(-7px) rotate(9deg) scale(0.96, 1.04);
  }
}
@keyframes aArmL {
  from {
    transform: rotate(60deg) translate(-2px, -10px);
  }
  to {
    transform: rotate(-10deg);
  }
}
@keyframes aArmR {
  from {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(-60deg) translate(2px, -10px);
  }
}
@keyframes aStomp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}
@keyframes aJuggle {
  0% {
    transform: translate(22px, 70px);
  }
  25% {
    transform: translate(40px, -10px);
  }
  50% {
    transform: translate(98px, 70px);
  }
  75% {
    transform: translate(80px, -10px);
  }
  100% {
    transform: translate(22px, 70px);
  }
}
@keyframes aJugArm {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(0) translateY(-6px);
  }
}
@keyframes aZzz {
  0% {
    transform: translate(0, 6px) scale(0.6);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translate(10px, -18px) scale(1.2);
    opacity: 0;
  }
}
@keyframes aBreathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.03, 0.97) translateY(1px);
  }
}
@keyframes aSkate {
  0%,
  100% {
    transform: translateX(-22px) rotate(-4deg);
  }
  50% {
    transform: translateX(22px) rotate(4deg);
  }
}
@keyframes aNod {
  from {
    transform: rotate(-10deg) translateY(0);
  }
  to {
    transform: rotate(8deg) translateY(2px);
  }
}
@keyframes aSpin {
  0%,
  55% {
    transform: translateY(0) rotate(0);
  }
  70% {
    transform: translateY(-34px) rotate(180deg);
  }
  85% {
    transform: translateY(0) rotate(360deg) scale(1.08, 0.92);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}
@keyframes aPeek {
  0%,
  100% {
    transform: translateY(80%);
  }
  15%,
  45% {
    transform: translateY(8%) rotate(-6deg);
  }
  55%,
  80% {
    transform: translateY(8%) rotate(6deg);
  }
  90% {
    transform: translateY(80%);
  }
}
@keyframes xOrbit {
  from {
    transform: rotate(0deg) translateX(30px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(30px) rotate(-360deg);
  }
}
@keyframes gLook {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25%,
  40% {
    transform: translate(-5px, 0);
  }
  60%,
  80% {
    transform: translate(5px, -1px);
  }
}
@keyframes gHat {
  0%,
  100% {
    transform: translateY(var(--hy, 0)) scale(var(--hs, 1));
  }
  30%,
  60% {
    transform: translateY(calc(var(--hy, 0px) - 16px)) rotate(-18deg) scale(var(--hs, 1));
  }
}
@keyframes gHatFly {
  0%,
  30% {
    transform: translateY(var(--hy, 0)) scale(var(--hs, 1));
  }
  55% {
    transform: translate(20px, -60px) rotate(40deg) scale(var(--hs, 1));
  }
  80% {
    transform: translate(6px, -8px) rotate(-10deg) scale(var(--hs, 1));
  }
  100% {
    transform: translateY(var(--hy, 0)) scale(var(--hs, 1));
  }
}
@keyframes gJump {
  0% {
    transform: translateY(0) scale(1);
  }
  20% {
    transform: scale(1.1, 0.9);
  }
  50% {
    transform: translateY(-28px) scale(0.95, 1.06);
  }
  80% {
    transform: translateY(0) scale(1.08, 0.92);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes gSneeze {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.06, 1.08) rotate(-8deg) translateY(-3px);
  }
  40% {
    transform: scale(0.94, 1.02) rotate(10deg) translateX(6px);
  }
  60%,
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes gPuff {
  0%,
  35% {
    opacity: 0;
    transform: scale(0.3);
  }
  45% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(18px) scale(1.5);
  }
}
@keyframes gTrip {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(18deg) translateX(8px);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-svg *,
  .mascot,
  .mascot * {
    animation: none !important;
  }
}

/* scrolled well out of view: idle loops pause (js/cast.js sets data-off) */
.mascot[data-off],
.mascot[data-off] * {
  animation-play-state: paused !important;
}