/* =====================================================================
   Avatar emotes: the puppet on a stage (AvatarRenderer.RenderStage, and
   AvatarRenderer.stage in avatar-renderer.js) plays the emote named in
   data-emote; wwwroot/js/avatar-emotes.js moves through data-emotes, one
   4.8 s turn each. Every loop divides 4.8 s, so a turn never ends mid-air.
   Starters are the mascot's own acts (mascot-life.css); the rest are the
   shop's dances. Pivots come from the rig: hips, shoulders, and
   --pp-core, the middle of the body that flips turn about. --pp-invert
   lifts the upside-down body onto the hands of base/arms-long.
   Arms: + raises the left (waving) arm, - raises the right. Legs: + swings
   the left leg out, - swings the right leg out. Only transform and
   opacity animate; reduced motion keeps the poses and drops the motion.
   ===================================================================== */

/* The stage plays emotes, not the landing mascot's hover tricks or the wardrobe's float */
.pp-stage { cursor: default; }
.avatar-idle > svg.pp-stage { animation: none; }
.pp-stage:hover .pp-float { animation: pp-float 4.4s ease-in-out infinite; }
.pp-stage:hover .pp-arm-l { animation: pp-wave 9s ease-in-out 1s infinite; }
.pp-stage .m-gaze,
.pp-stage .m-brow-l,
.pp-stage .m-brow-r { transition: transform 0.3s ease; }
.pp-stage .pp-spin,
.pp-stage .pp-heart,
.pp-stage .pp-z,
.pp-stage .pp-snack,
.pp-stage .pp-mouth-yawn { transform-box: fill-box; transform-origin: center; }

/* Off-screen stages wait; still tiles hold a telling frame (--em-poster) and play on hover */
.pp-stage.is-paused * { animation-play-state: paused !important; }
.pp-still * { animation-play-state: paused !important; animation-delay: var(--em-poster, -0.4s) !important; }
.em-tile:hover .pp-still *,
.em-tile:focus-visible .pp-still * { animation-play-state: running !important; }

/* Happy eyes for the cheerful moves */
.pp-stage[data-emote="giggle"] .m-eyes,
.pp-stage[data-emote="hearts"] .m-eyes,
.pp-stage[data-emote="pirouette"] .m-eyes,
.pp-stage[data-emote="shuffle"] .m-eyes,
.pp-stage[data-emote="twist"] .m-eyes,
.pp-stage[data-emote="starjumps"] .m-eyes,
.pp-stage[data-emote="sidestep"] .m-eyes { opacity: 0; }
.pp-stage[data-emote="giggle"] .m-eyes-happy,
.pp-stage[data-emote="hearts"] .m-eyes-happy,
.pp-stage[data-emote="pirouette"] .m-eyes-happy,
.pp-stage[data-emote="shuffle"] .m-eyes-happy,
.pp-stage[data-emote="twist"] .m-eyes-happy,
.pp-stage[data-emote="starjumps"] .m-eyes-happy,
.pp-stage[data-emote="sidestep"] .m-eyes-happy { opacity: 1; }

/* =====================================================================
   Starters: the mascot's own moves
   ===================================================================== */

/* ---- Wave: big friendly waves, a gentle sway ---- */
.pp-stage[data-emote="wave"] { --em-poster: -0.3s; }
.pp-stage[data-emote="wave"] .pp-arm-l { animation: em-wave 0.6s ease-in-out infinite; }
.pp-stage[data-emote="wave"] .pp-float { transform-origin: 250px 362px; animation: em-lean 2.4s ease-in-out infinite; }

/* ---- Giggle hop: a happy hop and a little bounce, blushing ---- */
.pp-stage[data-emote="giggle"] { --em-poster: -0.38s; }
.pp-stage[data-emote="giggle"] .pp-float { transform-origin: 250px 362px; animation: em-giggle 1.2s ease-out infinite; }
.pp-stage[data-emote="giggle"] .pp-shadow { animation: em-hop-shadow 1.2s ease-out infinite; }
.pp-stage[data-emote="giggle"] .m-blush { opacity: 1; }

/* ---- Juggle: a bean (My Brews) or seed (WSMConnect) tossed and caught ---- */
.pp-stage[data-emote="juggle"] { --em-poster: -0.4s; }
.pp-stage[data-emote="juggle"] .pp-snack-wrap { opacity: 1; }
.pp-stage[data-emote="juggle"] .pp-snack { animation: em-toss 0.8s ease-in-out infinite; }
.pp-stage[data-emote="juggle"] .pp-arm-l { animation: em-catch 0.8s ease-in-out infinite; }
.pp-stage[data-emote="juggle"] .m-gaze { transform: translate(-3px, -4px); }

/* ---- Foot tap: waiting, eyes to the side ---- */
.pp-stage[data-emote="foottap"] { --em-poster: -0.12s; }
.pp-stage[data-emote="foottap"] .pp-leg-r { animation: em-tap-r 0.4s ease-in-out infinite; }
.pp-stage[data-emote="foottap"] .pp-arm-l { animation: none; transform: rotate(-18deg); }
.pp-stage[data-emote="foottap"] .m-gaze { transform: translate(-4px, 1px); }

/* ---- Big stretch: arms up, eyes shut, reaching tall ---- */
.pp-stage[data-emote="stretch"] { --em-poster: -1.2s; }
.pp-stage[data-emote="stretch"] .m-eyes { opacity: 0; }
.pp-stage[data-emote="stretch"] .pp-eyes-closed { opacity: 1; }
.pp-stage[data-emote="stretch"] .pp-arm-l { animation: em-reach-l 2.4s ease-in-out infinite; }
.pp-stage[data-emote="stretch"] .pp-arm-r { animation: em-reach-r 2.4s ease-in-out infinite; }
.pp-stage[data-emote="stretch"] .pp-float { transform-origin: 250px 362px; animation: em-stretch 2.4s ease-in-out infinite; }

/* ---- Yawn ---- */
.pp-stage[data-emote="yawn"] { --em-poster: -1.2s; }
.pp-stage[data-emote="yawn"] .m-eyes,
.pp-stage[data-emote="yawn"] .m-mouth { opacity: 0; }
.pp-stage[data-emote="yawn"] .pp-eyes-closed,
.pp-stage[data-emote="yawn"] .pp-mouth-yawn { opacity: 1; }
.pp-stage[data-emote="yawn"] .pp-mouth-yawn { animation: em-yawn 2.4s ease-in-out infinite; }
.pp-stage[data-emote="yawn"] .pp-arm-l { animation: em-yawn-l 2.4s ease-in-out infinite; }
.pp-stage[data-emote="yawn"] .pp-arm-r { animation: em-yawn-r 2.4s ease-in-out infinite; }

/* ---- Time check: a look at the tiny watch, foot tapping ---- */
.pp-stage[data-emote="watch"] { --em-poster: -1.2s; }
.pp-stage[data-emote="watch"] .pp-watch-wrap { opacity: 1; }
.pp-stage[data-emote="watch"] .pp-arm-r { animation: em-check 2.4s ease-in-out infinite; }
.pp-stage[data-emote="watch"] .pp-leg-l { animation: em-tap-l 0.4s ease-in-out infinite; }
.pp-stage[data-emote="watch"] .m-gaze { transform: translate(4px, -3px); }
.pp-stage[data-emote="watch"] .m-brow-l,
.pp-stage[data-emote="watch"] .m-brow-r { transform: translateY(-4px); }

/* ---- Love hearts: the petting purr, hearts rising ---- */
.pp-stage[data-emote="hearts"] { --em-poster: -0.6s; }
.pp-stage[data-emote="hearts"] .m-blush,
.pp-stage[data-emote="hearts"] .pp-hearts { opacity: 1; }
.pp-stage[data-emote="hearts"] .pp-float { transform-origin: 250px 362px; animation: em-purr 1.2s ease-in-out infinite; }
.pp-stage[data-emote="hearts"] .pp-heart { animation: em-heart 1.6s ease-out infinite; }
.pp-stage[data-emote="hearts"] .pp-heart2 { animation-delay: -0.55s; }
.pp-stage[data-emote="hearts"] .pp-heart3 { animation-delay: -1.1s; }

/* ---- Dizzy: spiral eyes, wobbling, arms flailing ---- */
.pp-stage[data-emote="dizzy"] { --em-poster: -0.2s; }
.pp-stage[data-emote="dizzy"] .m-eyes,
.pp-stage[data-emote="dizzy"] .m-mouth { opacity: 0; }
.pp-stage[data-emote="dizzy"] .pp-eyes-dizzy,
.pp-stage[data-emote="dizzy"] .m-mouth-o { opacity: 1; }
.pp-stage[data-emote="dizzy"] .pp-spin { animation: em-spiral 0.8s linear infinite; }
.pp-stage[data-emote="dizzy"] .pp-float { transform-origin: 250px 362px; animation: em-wobble 1.2s ease-in-out infinite; }
.pp-stage[data-emote="dizzy"] .pp-arm-l { animation: em-flail-l 0.6s ease-in-out infinite; }
.pp-stage[data-emote="dizzy"] .pp-arm-r { animation: em-flail-r 0.6s ease-in-out infinite; }

/* ---- Snooze: sits with legs splayed, Zzz rising, slow breathing ---- */
.pp-stage[data-emote="snooze"] { --em-poster: -1s; }
.pp-stage[data-emote="snooze"] .pp-float { translate: 0 var(--pp-sit, 20px); transform-origin: 250px 362px; animation: em-breathe 2.4s ease-in-out infinite; }
.pp-stage[data-emote="snooze"] .pp-shadow { animation: none; }
.pp-stage[data-emote="snooze"] .pp-leg-l { transform: rotate(62deg); }
.pp-stage[data-emote="snooze"] .pp-leg-r { transform: rotate(-62deg); }
.pp-stage[data-emote="snooze"] .pp-arm-l { animation: none; transform: rotate(-48deg); }
.pp-stage[data-emote="snooze"] .pp-arm-r { animation: none; transform: rotate(18deg); }
.pp-stage[data-emote="snooze"] .m-eyes { opacity: 0; }
.pp-stage[data-emote="snooze"] .pp-eyes-closed,
.pp-stage[data-emote="snooze"] .pp-zzz { opacity: 1; }
.pp-stage[data-emote="snooze"] .pp-z { animation: em-z 2.4s ease-out infinite; }
.pp-stage[data-emote="snooze"] .pp-z2 { animation-delay: -0.8s; }
.pp-stage[data-emote="snooze"] .pp-z3 { animation-delay: -1.6s; }

/* =====================================================================
   Premium dances (the shop's Emotes shelf)
   ===================================================================== */

/* ---- Backflip: crouch, leap, flip, stick the landing, ta-da ---- */
.pp-stage[data-emote="backflip"] { --em-poster: -0.86s; }
.pp-stage[data-emote="backflip"] .pp-float { transform-origin: var(--pp-core); animation: em-backflip 2.4s linear infinite; }
.pp-stage[data-emote="backflip"] .pp-shadow { animation: em-flip-shadow 2.4s linear infinite; }
.pp-stage[data-emote="backflip"] .pp-arm-l { animation: em-flip-arm-l 2.4s ease-in-out infinite; }
.pp-stage[data-emote="backflip"] .pp-arm-r { animation: em-flip-arm-r 2.4s ease-in-out infinite; }
.pp-stage[data-emote="backflip"] .pp-leg-l { animation: em-tuck-l 2.4s ease-in-out infinite; }
.pp-stage[data-emote="backflip"] .pp-leg-r { animation: em-tuck-r 2.4s ease-in-out infinite; }
.pp-stage[data-emote="backflip"] .m-mouth { animation: em-flip-mouth 2.4s step-end infinite; }
.pp-stage[data-emote="backflip"] .m-mouth-o { animation: em-flip-mouth-o 2.4s step-end infinite; }
.pp-stage[data-emote="backflip"] .m-eyes { animation: em-flip-eyes 2.4s step-end infinite; }
.pp-stage[data-emote="backflip"] .m-eyes-happy { animation: em-flip-happy 2.4s step-end infinite; }

/* ---- Handstand: arms up, kick over onto the hands, scissor kicks, walk back over ---- */
.pp-stage[data-emote="handstand"] { --em-poster: -2.4s; }
.pp-stage[data-emote="handstand"] .pp-float { transform-origin: var(--pp-core); animation: em-handstand 4.8s ease-in-out infinite; }
.pp-stage[data-emote="handstand"] .pp-shadow { animation: em-handstand-shadow 4.8s ease-in-out infinite; }
.pp-stage[data-emote="handstand"] .pp-arm-l,
.pp-stage[data-emote="handstand"] .pp-arm-r { animation: em-handstand-arms 4.8s step-end infinite; }
.pp-stage[data-emote="handstand"] .pp-arms-long { animation: em-handstand-arms-long 4.8s step-end infinite; }
.pp-stage[data-emote="handstand"] .pp-leg-l { animation: em-scissor-l 4.8s ease-in-out infinite; }
.pp-stage[data-emote="handstand"] .pp-leg-r { animation: em-scissor-r 4.8s ease-in-out infinite; }

/* ---- Cartwheel: in a star, over to the right, all the way left, and home. The long arms
        reach overhead for each roll, so upside down it's on its hands ---- */
.pp-stage[data-emote="cartwheel"] { --em-poster: -0.67s; }
.pp-stage[data-emote="cartwheel"] .pp-float { transform-origin: var(--pp-core); animation: em-cartwheel 4.8s linear infinite; }
.pp-stage[data-emote="cartwheel"] .pp-shadow { animation: em-cartwheel-shadow 4.8s linear infinite; }
.pp-stage[data-emote="cartwheel"] .pp-arm-l { transform: rotate(48deg); animation: em-cartwheel-arms 4.8s step-end infinite; }
.pp-stage[data-emote="cartwheel"] .pp-arm-r { transform: rotate(-62deg); animation: em-cartwheel-arms 4.8s step-end infinite; }
.pp-stage[data-emote="cartwheel"] .pp-arms-long { animation: em-cartwheel-arms-long 4.8s step-end infinite; }
.pp-stage[data-emote="cartwheel"] .pp-leg-l { transform: rotate(26deg); }
.pp-stage[data-emote="cartwheel"] .pp-leg-r { transform: rotate(-26deg); }

/* ---- Pirouette: arms overhead, two turns on tiptoe, and a bow of the arms ---- */
.pp-stage[data-emote="pirouette"] { --em-poster: -1.9s; }
.pp-stage[data-emote="pirouette"] .pp-float { transform-origin: 250px 362px; animation: em-pirouette 2.4s ease-in-out infinite; }
.pp-stage[data-emote="pirouette"] .pp-arm-l { animation: em-ballet-l 2.4s ease-in-out infinite; }
.pp-stage[data-emote="pirouette"] .pp-arm-r { animation: em-ballet-r 2.4s ease-in-out infinite; }
.pp-stage[data-emote="pirouette"] .pp-leg-r { animation: em-ballet-leg 2.4s ease-in-out infinite; }

/* ---- Moonwalk: gliding while the feet step ---- */
.pp-stage[data-emote="moonwalk"] { --em-poster: -0.3s; }
.pp-stage[data-emote="moonwalk"] .pp-float { transform-origin: 250px 362px; animation: em-glide 2.4s ease-in-out infinite; }
.pp-stage[data-emote="moonwalk"] .pp-shadow { animation: em-glide-shadow 2.4s ease-in-out infinite; }
.pp-stage[data-emote="moonwalk"] .pp-leg-l { animation: em-moonstep 0.6s ease-in-out infinite; }
.pp-stage[data-emote="moonwalk"] .pp-leg-r { animation: em-moonstep 0.6s ease-in-out -0.3s infinite; }
.pp-stage[data-emote="moonwalk"] .pp-arm-l { animation: em-moon-arm 0.6s ease-in-out infinite; }
.pp-stage[data-emote="moonwalk"] .pp-arm-r { animation: em-moon-arm 0.6s ease-in-out -0.3s infinite; }

/* ---- The Floss: both arms swing side to side, hips the other way ---- */
.pp-stage[data-emote="floss"] { --em-poster: 0s; }
.pp-stage[data-emote="floss"] .pp-float { transform-origin: 250px 362px; animation: em-floss-hips 0.8s ease-in-out infinite; }
.pp-stage[data-emote="floss"] .pp-arm-l { animation: em-floss-l 0.8s ease-in-out infinite; }
.pp-stage[data-emote="floss"] .pp-arm-r { animation: em-floss-r 0.8s ease-in-out infinite; }
.pp-stage[data-emote="floss"] .pp-leg-l,
.pp-stage[data-emote="floss"] .pp-leg-r { animation: em-floss-legs 0.8s ease-in-out infinite; }

/* ---- Shuffle: bouncing, kicking out one foot then the other, arms pumping ---- */
.pp-stage[data-emote="shuffle"] { --em-poster: -0.2s; }
.pp-stage[data-emote="shuffle"] .pp-float { transform-origin: 250px 362px; animation: em-bounce 0.4s ease-in-out infinite; }
.pp-stage[data-emote="shuffle"] .pp-leg-l { animation: em-kick-l 0.8s ease-in-out infinite; }
.pp-stage[data-emote="shuffle"] .pp-leg-r { animation: em-kick-r 0.8s ease-in-out infinite; }
.pp-stage[data-emote="shuffle"] .pp-arm-l { animation: em-pump-l 0.4s ease-in-out infinite; }
.pp-stage[data-emote="shuffle"] .pp-arm-r { animation: em-pump-r 0.4s ease-in-out infinite; }

/* ---- The Robot: snapping from pose to pose ---- */
.pp-stage[data-emote="robot"] { --em-poster: -0.4s; }
.pp-stage[data-emote="robot"] .pp-float { transform-origin: 250px 362px; animation: em-robot 1.6s step-end infinite; }
.pp-stage[data-emote="robot"] .pp-arm-l { animation: em-robot-l 1.6s step-end infinite; }
.pp-stage[data-emote="robot"] .pp-arm-r { animation: em-robot-r 1.6s step-end infinite; }
.pp-stage[data-emote="robot"] .pp-leg-l { animation: em-robot-leg 1.6s step-end infinite; }
.pp-stage[data-emote="robot"] .pp-leg-r { animation: em-robot-leg 1.6s step-end -0.8s infinite; }
.pp-stage[data-emote="robot"] .m-gaze { animation: em-robot-gaze 1.6s step-end infinite; }

/* ---- Disco Fever: point up, point down, hips swinging ---- */
.pp-stage[data-emote="disco"] { --em-poster: 0s; }
.pp-stage[data-emote="disco"] .pp-float { transform-origin: 250px 362px; animation: em-disco-hips 1.2s ease-in-out infinite; }
.pp-stage[data-emote="disco"] .pp-arm-l { animation: em-disco-point 1.2s ease-in-out infinite; }
.pp-stage[data-emote="disco"] .pp-arm-r { animation: none; transform: rotate(62deg); }
.pp-stage[data-emote="disco"] .pp-leg-l { animation: em-disco-step 1.2s ease-in-out infinite; }
.pp-stage[data-emote="disco"] .m-gaze { animation: em-disco-gaze 1.2s ease-in-out infinite; }

/* ---- The Twist: body one way, knees the other ---- */
.pp-stage[data-emote="twist"] { --em-poster: 0s; }
.pp-stage[data-emote="twist"] .pp-float { transform-origin: 250px 362px; animation: em-twist 0.8s ease-in-out infinite; }
.pp-stage[data-emote="twist"] .pp-leg-l,
.pp-stage[data-emote="twist"] .pp-leg-r { animation: em-twist-legs 0.8s ease-in-out infinite; }
.pp-stage[data-emote="twist"] .pp-arm-l { animation: em-twist-arm-l 0.8s ease-in-out infinite; }
.pp-stage[data-emote="twist"] .pp-arm-r { animation: em-twist-arm-r 0.8s ease-in-out infinite; }

/* ---- Star Jumps: jumping jacks ---- */
.pp-stage[data-emote="starjumps"] { --em-poster: -0.4s; }
.pp-stage[data-emote="starjumps"] .pp-float { transform-origin: 250px 362px; animation: em-jack 0.8s ease-in-out infinite; }
.pp-stage[data-emote="starjumps"] .pp-shadow { animation: em-jack-shadow 0.8s ease-in-out infinite; }
.pp-stage[data-emote="starjumps"] .pp-arm-l { animation: em-jack-arm-l 0.8s ease-in-out infinite; }
.pp-stage[data-emote="starjumps"] .pp-arm-r { animation: em-jack-arm-r 0.8s ease-in-out infinite; }
.pp-stage[data-emote="starjumps"] .pp-leg-l { animation: em-jack-leg-l 0.8s ease-in-out infinite; }
.pp-stage[data-emote="starjumps"] .pp-leg-r { animation: em-jack-leg-r 0.8s ease-in-out infinite; }

/* ---- Side Step: step-touch right and left, arms swinging ---- */
.pp-stage[data-emote="sidestep"] { --em-poster: -0.4s; }
.pp-stage[data-emote="sidestep"] .pp-float { transform-origin: 250px 362px; animation: em-sidestep 1.6s ease-in-out infinite; }
.pp-stage[data-emote="sidestep"] .pp-shadow { animation: em-sidestep-shadow 1.6s ease-in-out infinite; }
.pp-stage[data-emote="sidestep"] .pp-leg-l { animation: em-step-l 1.6s ease-in-out infinite; }
.pp-stage[data-emote="sidestep"] .pp-leg-r { animation: em-step-r 1.6s ease-in-out infinite; }
.pp-stage[data-emote="sidestep"] .pp-arm-l { animation: em-swing-l 1.6s ease-in-out infinite; }
.pp-stage[data-emote="sidestep"] .pp-arm-r { animation: em-swing-r 1.6s ease-in-out infinite; }

/* ---- Vuvuzela: a deep breath, then the long blast (the horn and its arm are props/vuvu, the real arm hides) ---- */
.pp-stage .pp-vuvu-blast { transform-box: fill-box; transform-origin: 100% 50%; }
.pp-stage[data-emote="vuvuzela"] { --em-poster: -1.1s; }
.pp-stage[data-emote="vuvuzela"] .pp-vuvu-wrap { opacity: 1; }
.pp-stage[data-emote="vuvuzela"] .pp-arm-l { opacity: 0; }
.pp-stage[data-emote="vuvuzela"] .pp-float { transform-origin: 250px 362px; animation: em-vuvu-body 2.2s ease-in-out infinite; }
.pp-stage[data-emote="vuvuzela"] .pp-vuvu-blast { animation: em-vuvu-blast 2.2s ease-out infinite; }
.pp-stage[data-emote="vuvuzela"] .pp-arm-r { animation: em-vuvu-arm 2.2s ease-in-out infinite; }
.pp-stage[data-emote="vuvuzela"] .m-eyes { animation: em-vuvu-eyes 2.2s step-end infinite; }
.pp-stage[data-emote="vuvuzela"] .pp-eyes-closed { animation: em-vuvu-shut 2.2s step-end infinite; }

/* Reduced motion: poses still change with each emote, nothing moves */
@media (prefers-reduced-motion: reduce) {
    .pp-stage,
    .pp-stage * { animation: none !important; transition: none !important; }
    .pp-stage[data-emote="vuvuzela"] .pp-vuvu-blast { opacity: 1; }
}

/* ---- Starters ---- */
@keyframes em-wave { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(40deg); } }
@keyframes em-lean { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes em-giggle {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    12% { transform: translateY(0) rotate(0deg) scale(1.06, 0.94); }
    32% { transform: translateY(-26px) rotate(-5deg) scale(0.97, 1.04); }
    52% { transform: translateY(0) rotate(4deg) scale(1.04, 0.96); }
    68% { transform: translateY(-8px) rotate(-2deg) scale(1, 1); }
    82% { transform: translateY(0) rotate(0deg) scale(1, 1); }
}
@keyframes em-hop-shadow { 0%, 12%, 52%, 82%, 100% { transform: scale(1); opacity: 1; } 32% { transform: scale(0.75); opacity: 0.5; } 68% { transform: scale(0.92); opacity: 0.85; } }
@keyframes em-toss { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-78px) rotate(200deg); } }
@keyframes em-catch { 0%, 100% { transform: rotate(-8deg); } 15% { transform: rotate(6deg); } 50% { transform: rotate(0deg); } }
@keyframes em-tap-r { 0%, 60%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-14deg); } }
@keyframes em-tap-l { 0%, 60%, 100% { transform: rotate(0deg); } 30% { transform: rotate(14deg); } }
@keyframes em-reach-l { 0%, 100% { transform: rotate(0deg); } 35%, 75% { transform: rotate(58deg); } }
@keyframes em-reach-r { 0%, 100% { transform: rotate(0deg); } 35%, 75% { transform: rotate(-78deg); } }
@keyframes em-stretch { 0%, 100% { transform: scale(1, 1); } 40%, 70% { transform: scale(0.96, 1.07); } }
@keyframes em-yawn { 0%, 100% { transform: scaleY(0.4); } 35%, 70% { transform: scaleY(1.1); } }
@keyframes em-yawn-l { 0%, 100% { transform: rotate(0deg); } 35%, 70% { transform: rotate(22deg); } }
@keyframes em-yawn-r { 0%, 100% { transform: rotate(0deg); } 35%, 70% { transform: rotate(-30deg); } }
@keyframes em-check { 0%, 100% { transform: rotate(0deg); } 25%, 80% { transform: rotate(-62deg); } }
@keyframes em-purr { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes em-heart { 0% { transform: translateY(10px) scale(0.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-46px) scale(1); opacity: 0; } }
@keyframes em-spiral { to { transform: rotate(360deg); } }
@keyframes em-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes em-flail-l { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(25deg); } }
@keyframes em-flail-r { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-25deg); } }
@keyframes em-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 0.985); } }
@keyframes em-z { 0% { transform: translate(-6px, 14px) scale(0.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(12px, -40px) scale(1.1); opacity: 0; } }

/* ---- Backflip (2.4 s) ---- */
@keyframes em-backflip {
    0%, 8% { transform: translateY(0) rotate(0deg) scale(1, 1); animation-timing-function: ease-in-out; }
    16% { transform: translateY(10px) rotate(0deg) scale(1.08, 0.9); animation-timing-function: ease-out; }
    26% { transform: translateY(-82px) rotate(-100deg) scale(0.96, 1.04); animation-timing-function: linear; }
    36% { transform: translateY(-112px) rotate(-200deg) scale(1, 1); animation-timing-function: ease-in; }
    48% { transform: translateY(0) rotate(-360deg) scale(1, 1); animation-timing-function: ease-out; }
    54% { transform: translateY(10px) rotate(-360deg) scale(1.1, 0.88); animation-timing-function: ease-in-out; }
    64%, 100% { transform: translateY(0) rotate(-360deg) scale(1, 1); }
}
@keyframes em-flip-shadow { 0%, 16%, 50%, 100% { transform: scale(1); opacity: 1; } 28%, 40% { transform: scale(0.6); opacity: 0.4; } }
@keyframes em-flip-arm-l { 0%, 8% { transform: rotate(0deg); } 16% { transform: rotate(-45deg); } 24%, 46% { transform: rotate(62deg); } 56% { transform: rotate(15deg); } 66%, 88% { transform: rotate(58deg); } 100% { transform: rotate(0deg); } }
@keyframes em-flip-arm-r { 0%, 8% { transform: rotate(0deg); } 16% { transform: rotate(45deg); } 24%, 46% { transform: rotate(-80deg); } 56% { transform: rotate(-15deg); } 66%, 88% { transform: rotate(-78deg); } 100% { transform: rotate(0deg); } }
@keyframes em-tuck-l { 0%, 22%, 50%, 100% { transform: rotate(0deg); } 30%, 42% { transform: rotate(-22deg); } }
@keyframes em-tuck-r { 0%, 22%, 50%, 100% { transform: rotate(0deg); } 30%, 42% { transform: rotate(22deg); } }
@keyframes em-flip-mouth { 0% { opacity: 1; } 18% { opacity: 0; } 50% { opacity: 1; } }
@keyframes em-flip-mouth-o { 0% { opacity: 0; } 18% { opacity: 1; } 50% { opacity: 0; } }
@keyframes em-flip-eyes { 0% { opacity: 1; } 56% { opacity: 0; } 96% { opacity: 1; } }
@keyframes em-flip-happy { 0% { opacity: 0; } 56% { opacity: 1; } 96% { opacity: 0; } }

/* ---- Handstand (4.8 s) ---- */
@keyframes em-handstand {
    0%, 6% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    11% { transform: translateY(10px) rotate(0deg) scale(1.06, 0.92); }
    24% { transform: translateY(var(--pp-invert, 0px)) rotate(180deg) scale(1, 1); }
    38% { transform: translateY(var(--pp-invert, 0px)) rotate(178deg) scale(1, 1); }
    52% { transform: translateY(var(--pp-invert, 0px)) rotate(182deg) scale(1, 1); }
    66% { transform: translateY(var(--pp-invert, 0px)) rotate(179deg) scale(1, 1); }
    76% { transform: translateY(var(--pp-invert, 0px)) rotate(180deg) scale(1, 1); }
    88% { transform: translateY(0) rotate(360deg) scale(1, 1); }
    93% { transform: translateY(10px) rotate(360deg) scale(1.08, 0.9); }
    100% { transform: translateY(0) rotate(360deg) scale(1, 1); }
}
@keyframes em-handstand-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 15%, 84% { transform: scale(0.8); opacity: 0.6; } 24%, 76% { transform: scale(1.15, 1); opacity: 1; } }
@keyframes em-handstand-arms { 0% { opacity: 1; } 10% { opacity: 0; } 89% { opacity: 1; } }
@keyframes em-handstand-arms-long { 0% { opacity: 0; } 10% { opacity: 1; } 89% { opacity: 0; } }
@keyframes em-scissor-l { 0%, 24%, 76%, 100% { transform: rotate(0deg); } 34%, 54% { transform: rotate(24deg); } 44%, 64% { transform: rotate(-6deg); } }
@keyframes em-scissor-r { 0%, 24%, 76%, 100% { transform: rotate(0deg); } 34%, 54% { transform: rotate(6deg); } 44%, 64% { transform: rotate(-24deg); } }

/* ---- Cartwheel (4.8 s): one to the right, two to the left, one home ---- */
@keyframes em-cartwheel {
    0%, 4% { transform: translateX(0) translateY(0) rotate(0deg); animation-timing-function: ease-in; }
    14% { transform: translateX(35px) translateY(var(--pp-invert, 0px)) rotate(180deg); animation-timing-function: ease-out; }
    24%, 30% { transform: translateX(70px) translateY(0) rotate(360deg); animation-timing-function: ease-in; }
    40% { transform: translateX(35px) translateY(var(--pp-invert, 0px)) rotate(180deg); }
    50% { transform: translateX(0) translateY(0) rotate(0deg); }
    60% { transform: translateX(-35px) translateY(var(--pp-invert, 0px)) rotate(-180deg); animation-timing-function: ease-out; }
    70%, 76% { transform: translateX(-70px) translateY(0) rotate(-360deg); animation-timing-function: ease-in; }
    86% { transform: translateX(-35px) translateY(var(--pp-invert, 0px)) rotate(-180deg); animation-timing-function: ease-out; }
    96%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
}
@keyframes em-cartwheel-arms { 0% { opacity: 1; } 4% { opacity: 0; } 24% { opacity: 1; } 30% { opacity: 0; } 70% { opacity: 1; } 76% { opacity: 0; } 96% { opacity: 1; } }
@keyframes em-cartwheel-arms-long { 0% { opacity: 0; } 4% { opacity: 1; } 24% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 0; } 76% { opacity: 1; } 96% { opacity: 0; } }
@keyframes em-cartwheel-shadow {
    0%, 4% { transform: translateX(0) scale(1); animation-timing-function: ease-in; }
    14% { transform: translateX(35px) scale(0.85); animation-timing-function: ease-out; }
    24%, 30% { transform: translateX(70px) scale(1); animation-timing-function: ease-in; }
    40% { transform: translateX(35px) scale(0.85); }
    50% { transform: translateX(0) scale(1); }
    60% { transform: translateX(-35px) scale(0.85); animation-timing-function: ease-out; }
    70%, 76% { transform: translateX(-70px) scale(1); animation-timing-function: ease-in; }
    86% { transform: translateX(-35px) scale(0.85); animation-timing-function: ease-out; }
    96%, 100% { transform: translateX(0) scale(1); }
}

/* ---- Pirouette (2.4 s): each turn runs the width 1 to -1 and back ---- */
@keyframes em-pirouette {
    0%, 12% { transform: translateY(0) scale(1, 1); }
    20% { transform: translateY(-10px) scale(-1, 1); }
    28% { transform: translateY(-10px) scale(1, 1); }
    36% { transform: translateY(-10px) scale(-1, 1); }
    44% { transform: translateY(-10px) scale(1, 1); }
    52%, 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes em-ballet-l { 0%, 100% { transform: rotate(0deg); } 12%, 48% { transform: rotate(70deg); } 60%, 88% { transform: rotate(18deg); } }
@keyframes em-ballet-r { 0%, 100% { transform: rotate(0deg); } 12%, 48% { transform: rotate(-100deg); } 60%, 88% { transform: rotate(-22deg); } }
@keyframes em-ballet-leg { 0%, 8%, 52%, 100% { transform: rotate(0deg) scaleY(1); } 14%, 46% { transform: rotate(-14deg) scaleY(0.82); } }

/* ---- Moonwalk (2.4 s) ---- */
@keyframes em-glide { 0%, 100% { transform: translateX(0) rotate(0deg); } 45%, 50% { transform: translateX(-50px) rotate(-3deg); } 95% { transform: translateX(0) rotate(0deg); } }
@keyframes em-glide-shadow { 0%, 100% { transform: translateX(0); } 45%, 50% { transform: translateX(-50px); } 95% { transform: translateX(0); } }
@keyframes em-moonstep { 0%, 100% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(-8deg) scaleY(0.82); } }
@keyframes em-moon-arm { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

/* ---- The Floss (0.8 s) ---- */
@keyframes em-floss-l { 0%, 100% { transform: rotate(-80deg); } 50% { transform: rotate(-145deg); } }
@keyframes em-floss-r { 0%, 100% { transform: rotate(105deg); } 50% { transform: rotate(40deg); } }
@keyframes em-floss-hips { 0%, 100% { transform: translateX(8px) rotate(-4deg); } 50% { transform: translateX(-8px) rotate(4deg); } }
@keyframes em-floss-legs { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }

/* ---- Shuffle (0.8 s) ---- */
@keyframes em-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-9px) scale(0.98, 1.02); } }
@keyframes em-kick-l { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(34deg); } }
@keyframes em-kick-r { 0%, 50%, 100% { transform: rotate(0deg); } 75% { transform: rotate(-34deg); } }
@keyframes em-pump-l { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(10deg); } }
@keyframes em-pump-r { 0%, 100% { transform: rotate(30deg); } 50% { transform: rotate(-10deg); } }

/* ---- The Robot (1.6 s, snapping) ---- */
@keyframes em-robot { 0% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-5px) rotate(-3deg); } 50% { transform: translateX(0) rotate(0deg); } 75% { transform: translateX(5px) rotate(3deg); } }
@keyframes em-robot-l { 0% { transform: rotate(-22deg); } 25% { transform: rotate(-112deg); } 50% { transform: rotate(68deg); } 75% { transform: rotate(-22deg); } }
@keyframes em-robot-r { 0% { transform: rotate(78deg); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(-102deg); } }
@keyframes em-robot-leg { 0% { transform: scaleY(1); } 25% { transform: scaleY(0.86); } 50% { transform: scaleY(1); } }
@keyframes em-robot-gaze { 0% { transform: translate(0, 0); } 25% { transform: translate(-4px, 0); } 50% { transform: translate(0, -2px); } 75% { transform: translate(4px, 0); } }

/* ---- Disco Fever (1.2 s) ---- */
@keyframes em-disco-point { 0%, 30%, 100% { transform: rotate(48deg); } 50%, 80% { transform: rotate(-118deg); } }
@keyframes em-disco-hips { 0%, 30%, 100% { transform: translateX(-6px) rotate(-5deg); } 50%, 80% { transform: translateX(6px) rotate(4deg); } }
@keyframes em-disco-step { 0%, 30%, 100% { transform: rotate(16deg); } 50%, 80% { transform: rotate(0deg); } }
@keyframes em-disco-gaze { 0%, 30%, 100% { transform: translate(-4px, -4px); } 50%, 80% { transform: translate(-3px, 4px); } }

/* ---- The Twist (0.8 s) ---- */
@keyframes em-twist { 0%, 100% { transform: translateY(4px) rotate(-8deg); } 25%, 75% { transform: translateY(-2px) rotate(0deg); } 50% { transform: translateY(4px) rotate(8deg); } }
@keyframes em-twist-legs { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes em-twist-arm-l { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(10deg); } }
@keyframes em-twist-arm-r { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(30deg); } }

/* ---- Star Jumps (0.8 s) ---- */
@keyframes em-jack { 0%, 100% { transform: translateY(0) scale(1.04, 0.96); } 50% { transform: translateY(-28px) scale(1, 1); } }
@keyframes em-jack-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.78); opacity: 0.55; } }
@keyframes em-jack-arm-l { 0%, 100% { transform: rotate(-62deg); } 50% { transform: rotate(60deg); } }
@keyframes em-jack-arm-r { 0%, 100% { transform: rotate(48deg); } 50% { transform: rotate(-82deg); } }
@keyframes em-jack-leg-l { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(28deg); } }
@keyframes em-jack-leg-r { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-28deg); } }

/* ---- Side Step (1.6 s) ---- */
@keyframes em-sidestep { 0%, 50%, 100% { transform: translateX(0) translateY(0) rotate(0deg); } 25% { transform: translateX(18px) translateY(4px) rotate(4deg); } 75% { transform: translateX(-18px) translateY(4px) rotate(-4deg); } }
@keyframes em-sidestep-shadow { 0%, 50%, 100% { transform: translateX(0); } 25% { transform: translateX(18px); } 75% { transform: translateX(-18px); } }
@keyframes em-vuvu-body {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    20% { transform: translateY(-4px) rotate(-3deg) scale(1.04, 1.04); }
    35% { transform: translateY(2px) rotate(4deg) scale(0.98, 1.01); }
    55% { transform: translateY(0) rotate(5deg) scale(0.97, 1.02); }
    75% { transform: translateY(1px) rotate(2deg) scale(1, 1); }
    88% { transform: translateX(-4px) rotate(-3deg) scale(1, 1); }
}
@keyframes em-vuvu-blast { 0%, 30% { opacity: 0; transform: scale(0.4); } 36% { opacity: 1; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } 56% { opacity: 0.3; transform: scale(0.9); } 62% { opacity: 1; transform: scale(1.25); } 80%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes em-vuvu-arm { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-20deg); } 40%, 75% { transform: rotate(30deg); } }
@keyframes em-vuvu-eyes { 0%, 30% { opacity: 1; } 34%, 78% { opacity: 0; } 80% { opacity: 1; } }
@keyframes em-vuvu-shut { 0%, 30% { opacity: 0; } 34%, 78% { opacity: 1; } 80% { opacity: 0; } }
@keyframes em-step-l { 0%, 50%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-10deg); } 70% { transform: rotate(16deg); } }
@keyframes em-step-r { 0%, 50%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-16deg); } 70% { transform: rotate(10deg); } }
@keyframes em-swing-l { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-35deg); } 75% { transform: rotate(40deg); } }
@keyframes em-swing-r { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-40deg); } 75% { transform: rotate(35deg); } }