/* ---------- Linky's Closet: accessory, aura and dance styles (items in src/outfits.js) */
/* hats hang from the top of his head; the card from the grip */
.masc .mHat {
  transform-origin: 60px 14px;
}
/* follow-through: the app adds .wob for 520 ms after a hop, landing or head turn */
.masc.wob .mHat,
.masc.wob .mCard {
  animation: oWob 0.52s ease-out;
}
@keyframes oWob {
  0% {
    transform: rotate(0);
  }
  18% {
    transform: rotate(-7deg);
  }
  48% {
    transform: rotate(4deg);
  }
  74% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0);
  }
}
/* the idea bulb clears any hat */
.masc[data-hat]:not([data-hat="hat.none"]):not([data-hat=""]) .x-bulb {
  translate: 0 -16px;
}
/* shades: the lens glint follows his gaze */
.masc .x-shades .gl {
  translate: calc(var(--gx) * 0.7px) calc(var(--gy) * 0.5px);
  transition: translate 0.28s;
}
/* idle life of the items */
.masc .o-crS {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: oTwinkle 3s ease-in-out infinite;
}
@keyframes oTwinkle {
  0%,
  70% {
    transform: scale(0.2) rotate(0);
    opacity: 0;
  }
  84% {
    transform: scale(1.15) rotate(40deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.2) rotate(90deg);
    opacity: 0;
  }
}
.masc .o-wiz {
  transform-origin: 60px 15px;
  animation: oSway 2.4s ease-in-out infinite;
}
@keyframes oSway {
  0%,
  100% {
    transform: skewX(-6deg);
  }
  50% {
    transform: skewX(6deg);
  }
}
.masc .o-sheen {
  animation: oSheen 4s ease-in-out infinite;
}
@keyframes oSheen {
  0%,
  84% {
    transform: translateX(-16px);
  }
  99%,
  100% {
    transform: translateX(26px);
  }
}
/* propeller cap: the blades turn edge-on and back (a scaleX loop reads as spinning); fire card: the flame flickers from its base */
.masc .o-prop {
  transform-origin: 60px -9.6px;
  animation: oProp 0.46s ease-in-out infinite;
}
@keyframes oProp {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
}
.masc .o-flm {
  transform-origin: 108px 55px;
  animation: oFlm 1.1s ease-in-out infinite;
}
@keyframes oFlm {
  0%,
  100% {
    transform: scale(1, 1) skewX(0);
  }
  25% {
    transform: scale(0.96, 1.07) skewX(-5deg);
  }
  50% {
    transform: scale(1.03, 0.96) skewX(1deg);
  }
  75% {
    transform: scale(0.97, 1.05) skewX(5deg);
  }
}
.masc .o-flm2 {
  transform-origin: 108px 55px;
  animation: oFlm2 0.55s ease-in-out infinite alternate;
}
@keyframes oFlm2 {
  from {
    transform: scale(1.04, 0.94);
  }
  to {
    transform: scale(0.9, 1.12);
  }
}
/* round glasses: the lens glint follows his gaze; shades (the cool mood) swap them out */
.masc .o-glasses .gl {
  translate: calc(var(--gx) * 0.6px) calc(var(--gy) * 0.5px);
  transition: translate 0.28s;
}
.masc[data-ey="shades"] .o-glasses {
  display: none;
}
/* auras: never brighter than .85; in matches .6 and 1.5x slower (--auk); hidden in matches in calm mode */
.masc {
  --auk: 1;
}
.masc.buddy {
  --auk: 1.5;
}
.masc.buddy .mFx,
.masc.buddy .mFxF {
  opacity: 0.6;
}
body.calm .masc.buddy .mFx,
body.calm .masc.buddy .mFxF {
  display: none;
}
.masc .o-spk,
.masc .o-hrt,
.masc .o-note {
  opacity: 0.85;
}
.masc .o-spk {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: oSpk calc(2.4s * var(--auk)) ease-in-out calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oSpk {
  0%,
  100% {
    transform: scale(0.45) rotate(0);
    opacity: 0.35;
  }
  45% {
    transform: scale(1.12) rotate(45deg);
    opacity: 0.85;
  }
  60% {
    transform: scale(1) rotate(60deg);
    opacity: 0.85;
  }
}
.masc .o-bub {
  animation: oBub calc(var(--d, 4s) * var(--auk)) linear calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oBub {
  0% {
    transform: translate(0, var(--y0)) scale(0.5);
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  25% {
    transform: translate(5px, calc(var(--y0) * 0.75 + var(--y1) * 0.25)) scale(0.85);
  }
  50% {
    transform: translate(0, calc(var(--y0) * 0.5 + var(--y1) * 0.5)) scale(1);
  }
  75% {
    transform: translate(-5px, calc(var(--y0) * 0.25 + var(--y1) * 0.75)) scale(1.05);
    opacity: 0.85;
  }
  100% {
    transform: translate(0, var(--y1)) scale(1.15);
    opacity: 0;
  }
}
.masc .o-note {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: oNote calc(3.2s * var(--auk)) ease-out calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oNote {
  0% {
    transform: translateY(6px) rotate(0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  28% {
    transform: translateY(-2px) rotate(12deg) scale(1);
  }
  46% {
    transform: translateY(-9px) rotate(-12deg) scale(1);
  }
  58% {
    opacity: 0.85;
  }
  64%,
  100% {
    transform: translateY(-16px) rotate(4deg) scale(1);
    opacity: 0;
  }
}
.masc .o-hrt {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: oHrt calc(3.2s * var(--auk)) ease-in-out calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oHrt {
  0% {
    transform: translate(0, 14px) scale(0.4) rotate(0);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  50% {
    transform: translate(3px, 0) scale(1) rotate(8deg);
  }
  82% {
    opacity: 0.85;
  }
  100% {
    transform: translate(-2px, -16px) scale(0.9) rotate(-6deg);
    opacity: 0;
  }
}
.masc[data-m="love"] .o-hrt {
  animation-play-state: paused;
  visibility: hidden;
}
.masc .o-rbw {
  transform-origin: 60px 58px;
  animation: oRbw calc(4s * var(--auk)) ease-in-out infinite;
}
@keyframes oRbw {
  0%,
  100% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(1.02);
  }
}
/* falling auras: each particle rests where it is drawn (calm mode) and falls from --y0 to --y1 around that spot */
.masc .o-cf,
.masc .o-ptl,
.masc .o-coin,
.masc .o-bfy,
.masc .o-snow,
.masc .o-shs {
  opacity: 0.85;
}
.masc .o-cf {
  animation: oCf calc(var(--d, 3s) * var(--auk)) linear calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oCf {
  0% {
    transform: translate(0, var(--y0));
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  35% {
    transform: translate(4px, calc(var(--y0) * 0.65 + var(--y1) * 0.35));
  }
  65% {
    transform: translate(-3px, calc(var(--y0) * 0.35 + var(--y1) * 0.65));
  }
  88% {
    opacity: 0.85;
  }
  100% {
    transform: translate(1px, var(--y1));
    opacity: 0;
  }
}
.masc .o-cfi {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: oCfi calc(1.1s * var(--auk)) linear calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oCfi {
  0% {
    transform: rotate(0) scaleX(1);
  }
  25% {
    transform: rotate(90deg) scaleX(0);
  }
  50% {
    transform: rotate(180deg) scaleX(-1);
  }
  75% {
    transform: rotate(270deg) scaleX(0);
  }
  100% {
    transform: rotate(360deg) scaleX(1);
  }
}
.masc .o-ptl {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: oPtl calc(var(--d, 4.6s) * var(--auk)) ease-in-out calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oPtl {
  0% {
    transform: translate(0, var(--y0)) rotate(-28deg);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  25% {
    transform: translate(7px, calc(var(--y0) * 0.75 + var(--y1) * 0.25)) rotate(26deg);
  }
  50% {
    transform: translate(0, calc(var(--y0) * 0.5 + var(--y1) * 0.5)) rotate(-26deg);
  }
  75% {
    transform: translate(7px, calc(var(--y0) * 0.25 + var(--y1) * 0.75)) rotate(26deg);
  }
  90% {
    opacity: 0.85;
  }
  100% {
    transform: translate(0, var(--y1)) rotate(-28deg);
    opacity: 0;
  }
}
.masc .o-coin {
  animation: oCoin calc(var(--d, 2.4s) * var(--auk)) cubic-bezier(0.5, 0.1, 0.85, 0.6)
    calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oCoin {
  0% {
    transform: translateY(var(--y0));
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  86% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(var(--y1));
    opacity: 0;
  }
}
.masc .o-coini {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: oFlipX calc(0.8s * var(--auk)) ease-in-out calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oFlipX {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
}
.masc .o-bfy {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: oBfy calc(var(--d, 4s) * var(--auk)) ease-in-out calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oBfy {
  0%,
  100% {
    transform: translate(0, 0) rotate(-6deg);
  }
  25% {
    transform: translate(var(--fx), calc(var(--fy) * -1)) rotate(8deg);
  }
  50% {
    transform: translate(calc(var(--fx) * 0.3), calc(var(--fy) * -1.6)) rotate(-4deg);
  }
  75% {
    transform: translate(calc(var(--fx) * -0.7), calc(var(--fy) * -0.6)) rotate(7deg);
  }
}
.masc .o-wing {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: oWing calc(0.3s * var(--auk)) ease-in-out infinite alternate;
}
@keyframes oWing {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0.3);
  }
}
.masc .o-snow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: oSnow calc(var(--d, 5s) * var(--auk)) ease-in-out calc(var(--dl, 0s) * var(--auk)) infinite;
}
@keyframes oSnow {
  0% {
    transform: translate(0, var(--y0)) rotate(0);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  30% {
    transform: translate(5px, calc(var(--y0) * 0.7 + var(--y1) * 0.3)) rotate(40deg);
  }
  62% {
    transform: translate(-4px, calc(var(--y0) * 0.38 + var(--y1) * 0.62)) rotate(85deg);
  }
  88% {
    opacity: 0.85;
  }
  100% {
    transform: translate(0, var(--y1)) rotate(130deg);
    opacity: 0;
  }
}
.masc .o-shs {
  animation: oShs calc(2.4s * var(--auk)) cubic-bezier(0.3, 0.3, 0.6, 1) calc(var(--dl, 0s) * var(--auk))
    infinite;
}
@keyframes oShs {
  0% {
    transform: translate(18px, -12.5px);
    opacity: 0;
  }
  7% {
    opacity: 0.85;
  }
  44% {
    opacity: 0.85;
  }
  56%,
  100% {
    transform: translate(-18px, 12.5px);
    opacity: 0;
  }
}
/* ---------- dances: mascDance() sets .dancing[data-dance=id] on .masc for ACC[id].dur ms
   tentacle side factor --s (+ spreads out, - tucks in); props from ACC[id].fx live in .o-dfx */
.masc .o-dfx {
  display: none;
}
.masc.dancing .o-dfx {
  display: inline;
}
body.calm .masc .o-dfx,
.masc.still .o-dfx {
  display: none;
}
/* while dancing the dance owns the body: mood body loops and head poses step aside (the head eases back on its transition) */
.masc.dancing[data-dance] .mBody {
  animation: none;
}
.masc.dancing[data-dance] .mHead {
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
  animation: none;
}
.masc.dancing .tn1 {
  --s: 1;
}
.masc.dancing .tn2 {
  --s: 0.55;
}
.masc.dancing .tn3 {
  --s: -0.55;
}
.masc.dancing .tn4 {
  --s: -1;
}
/* Happy hop: 3 hops (0, .5, 1 s), the 3rd one higher with arms up, then a wink */
.masc.dancing[data-dance="dance.hop"] .mRoot {
  animation: dHop 1.5s both;
}
@keyframes dHop {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-in;
  }
  5% {
    transform: translateY(0) scale(1.1, 0.9);
    animation-timing-function: ease-out;
  }
  10% {
    transform: translateY(-9px) scale(0.94, 1.07);
    animation-timing-function: ease-out;
  }
  16% {
    transform: translateY(-14px) scale(0.98, 1.02);
    animation-timing-function: ease-in;
  }
  24% {
    transform: translateY(0) scale(1.08, 0.92);
    animation-timing-function: ease-out;
  }
  29% {
    transform: translateY(0) scale(0.98, 1.02);
    animation-timing-function: ease-in-out;
  }
  33.3% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-in;
  }
  38.3% {
    transform: translateY(0) scale(1.1, 0.9);
    animation-timing-function: ease-out;
  }
  43.3% {
    transform: translateY(-9px) scale(0.94, 1.07);
    animation-timing-function: ease-out;
  }
  49.3% {
    transform: translateY(-14px) scale(0.98, 1.02);
    animation-timing-function: ease-in;
  }
  57.3% {
    transform: translateY(0) scale(1.08, 0.92);
    animation-timing-function: ease-out;
  }
  62.3% {
    transform: translateY(0) scale(0.98, 1.02);
    animation-timing-function: ease-in-out;
  }
  66.7% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-in;
  }
  71% {
    transform: translateY(0) scale(1.12, 0.88);
    animation-timing-function: ease-out;
  }
  76% {
    transform: translateY(-13px) scale(0.92, 1.1);
    animation-timing-function: ease-out;
  }
  82% {
    transform: translateY(-20px) scale(0.98, 1.02);
    animation-timing-function: ease-in;
  }
  89% {
    transform: translateY(0) scale(1.1, 0.9);
    animation-timing-function: ease-out;
  }
  94% {
    transform: translateY(0) scale(0.97, 1.03);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.hop"] .tn {
  animation: dHopT 1.5s both;
}
.masc.dancing[data-dance="dance.hop"] .tn2,
.masc.dancing[data-dance="dance.hop"] .tn3 {
  animation-delay: 40ms;
}
@keyframes dHopT {
  0%,
  33.3%,
  66.7%,
  100% {
    transform: rotate(0);
  }
  5%,
  38.3% {
    transform: rotate(calc(var(--s) * 8deg));
  }
  12%,
  45% {
    transform: rotate(calc(var(--s) * -9deg));
  }
  24%,
  57.3% {
    transform: rotate(calc(var(--s) * 14deg));
  }
  29%,
  62.3% {
    transform: rotate(calc(var(--s) * -4deg));
  }
  71% {
    transform: rotate(calc(var(--s) * 10deg));
  }
  79% {
    transform: rotate(calc(var(--s) * -12deg));
  }
  89% {
    transform: rotate(calc(var(--s) * 16deg));
  }
  94% {
    transform: rotate(calc(var(--s) * -5deg));
  }
}
.masc.dancing[data-dance="dance.hop"] .mHat,
.masc.dancing[data-dance="dance.hop"] .mCard {
  animation:
    oWob 0.48s ease-out 0.36s,
    oWob 0.48s ease-out 0.86s,
    oWob 0.5s ease-out 1.33s;
}
.masc.dancing[data-dance="dance.hop"] .mArm {
  animation: dHopArm 1.5s both;
}
@keyframes dHopArm {
  0%,
  68% {
    transform: translate(0, 0) rotate(0);
  }
  76% {
    transform: translate(4px, -22px) rotate(-10deg);
  }
  90% {
    transform: translate(4px, -24px) rotate(-3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.masc.dancing[data-dance="dance.hop"] .mArmL {
  animation: dHopL 1.5s both;
}
@keyframes dHopL {
  0%,
  70% {
    transform: rotate(0);
  }
  78% {
    transform: rotate(-12deg);
  }
  88% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(0);
  }
}
.masc.dancing[data-dance="dance.hop"]:not([data-al]) .al-up {
  display: inline;
  animation: dHopUp 1.5s both;
}
.masc.dancing[data-dance="dance.hop"]:not([data-al]) .al-rest {
  animation: dHopDown 1.5s both;
}
@keyframes dHopUp {
  0%,
  70% {
    opacity: 0;
  }
  70.5%,
  97% {
    opacity: 1;
  }
  97.5%,
  100% {
    opacity: 0;
  }
}
@keyframes dHopDown {
  0%,
  70% {
    opacity: 1;
  }
  70.5%,
  97% {
    opacity: 0;
  }
  97.5%,
  100% {
    opacity: 1;
  }
}
/* the closing wink, only when his eyes are open ones */
.masc.dancing[data-dance="dance.hop"]:not([data-ey="hap"]):not([data-ey="hrt"]):not([data-ey="dz"]):not(
    [data-ey="slp"]
  ):not([data-ey="eek"]):not([data-ey="shades"]):not([data-ey="det"]):not([data-ey="wnk"])
  .ea-wnk {
  display: inline;
  animation: dWinkOn 1.5s both;
}
.masc.dancing[data-dance="dance.hop"]:not([data-ey="hap"]):not([data-ey="hrt"]):not([data-ey="dz"]):not(
    [data-ey="slp"]
  ):not([data-ey="eek"]):not([data-ey="shades"]):not([data-ey="det"]):not([data-ey="wnk"])
  .eR {
  animation: dWinkOff 1.5s both;
}
@keyframes dWinkOn {
  0%,
  89% {
    opacity: 0;
  }
  89.5%,
  99% {
    opacity: 1;
  }
  99.5%,
  100% {
    opacity: 0;
  }
}
@keyframes dWinkOff {
  0%,
  89% {
    opacity: 1;
  }
  89.5%,
  99% {
    opacity: 0;
  }
  99.5%,
  100% {
    opacity: 1;
  }
}
/* Wiggle: body sways ±8° on 4 beats of .4 s, head counters, tentacles ripple tn1→tn4 */
.masc.dancing[data-dance="dance.wiggle"] .mRoot {
  animation: dWig 1.6s ease-in-out both;
}
@keyframes dWig {
  0% {
    transform: rotate(0) scale(1, 1);
  }
  12.5% {
    transform: rotate(8deg) scale(0.98, 1.02);
  }
  25% {
    transform: rotate(0) scale(1.05, 0.95);
  }
  37.5% {
    transform: rotate(-8deg) scale(0.98, 1.02);
  }
  50% {
    transform: rotate(0) scale(1.05, 0.95);
  }
  62.5% {
    transform: rotate(8deg) scale(0.98, 1.02);
  }
  75% {
    transform: rotate(0) scale(1.05, 0.95);
  }
  87.5% {
    transform: rotate(-8deg) scale(0.98, 1.02);
  }
  100% {
    transform: rotate(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.wiggle"] .mHead {
  animation: dWigH 1.6s ease-in-out 60ms both;
}
@keyframes dWigH {
  0%,
  100% {
    transform: rotate(0) translateY(0);
  }
  12.5%,
  62.5% {
    transform: rotate(-4deg) translateY(-1px);
  }
  25%,
  50%,
  75% {
    transform: rotate(0) translateY(1px);
  }
  37.5%,
  87.5% {
    transform: rotate(4deg) translateY(-1px);
  }
}
.masc.dancing[data-dance="dance.wiggle"] .tn {
  animation: dWigT 1.6s ease-in-out both;
}
.masc.dancing[data-dance="dance.wiggle"] .tn2 {
  animation-delay: 90ms;
}
.masc.dancing[data-dance="dance.wiggle"] .tn3 {
  animation-delay: 180ms;
}
.masc.dancing[data-dance="dance.wiggle"] .tn4 {
  animation-delay: 270ms;
}
@keyframes dWigT {
  0%,
  100% {
    transform: rotate(0);
  }
  12.5%,
  62.5% {
    transform: rotate(-18deg);
  }
  37.5%,
  87.5% {
    transform: rotate(18deg);
  }
}
.masc.dancing[data-dance="dance.wiggle"] .mArm,
.masc.dancing[data-dance="dance.wiggle"] .mArmL {
  animation: dWigA 1.6s ease-in-out 120ms both;
}
@keyframes dWigA {
  0%,
  100% {
    transform: rotate(0);
  }
  12.5%,
  62.5% {
    transform: rotate(-7deg);
  }
  37.5%,
  87.5% {
    transform: rotate(7deg);
  }
}
.masc.dancing[data-dance="dance.wiggle"] .mHat {
  animation: dWigHat 1.6s ease-in-out 140ms both;
}
@keyframes dWigHat {
  0%,
  100% {
    transform: rotate(0);
  }
  12.5%,
  62.5% {
    transform: rotate(-5deg);
  }
  37.5%,
  87.5% {
    transform: rotate(5deg);
  }
}
/* Spin: crouch, jump 18 with a full turn (rotateY on the svg), land squash, ta-da */
.masc.dancing[data-dance="dance.spin"] > svg {
  animation: dSpinY 1.2s both;
}
@keyframes dSpinY {
  0%,
  12.5% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1);
  }
  62.5%,
  100% {
    transform: perspective(400px) rotateY(360deg);
  }
}
.masc.dancing[data-dance="dance.spin"] .mRoot {
  animation: dSpin 1.2s both;
}
@keyframes dSpin {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-in;
  }
  12.5% {
    transform: translateY(1px) scale(1.12, 0.86);
    animation-timing-function: ease-out;
  }
  20% {
    transform: translateY(-8px) scale(0.9, 1.12);
    animation-timing-function: ease-out;
  }
  37.5% {
    transform: translateY(-18px) scale(0.98, 1.02);
    animation-timing-function: ease-in;
  }
  55% {
    transform: translateY(-5px) scale(0.96, 1.05);
    animation-timing-function: ease-in;
  }
  62.5% {
    transform: translateY(0) scale(1.14, 0.86);
    animation-timing-function: ease-out;
  }
  70% {
    transform: translateY(-2px) scale(0.95, 1.06);
    animation-timing-function: ease-in-out;
  }
  78% {
    transform: translateY(0) scale(1.02, 0.98);
  }
  85%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.spin"] .tn {
  animation: dSpinT 1.2s both;
}
@keyframes dSpinT {
  0%,
  100% {
    transform: rotate(0);
  }
  12.5% {
    transform: rotate(calc(var(--s) * 10deg));
  }
  20% {
    transform: rotate(calc(var(--s) * -10deg));
  }
  32%,
  52% {
    transform: rotate(calc(var(--s) * 22deg));
  }
  62.5% {
    transform: rotate(calc(var(--s) * 16deg));
  }
  72% {
    transform: rotate(calc(var(--s) * -5deg));
  }
  82% {
    transform: rotate(calc(var(--s) * 4deg));
  }
}
.masc.dancing[data-dance="dance.spin"] .mHat,
.masc.dancing[data-dance="dance.spin"] .mCard {
  animation: oWob 0.5s ease-out 0.75s;
}
.masc.dancing[data-dance="dance.spin"] .mArm {
  animation: dSpinArm 1.2s both;
}
@keyframes dSpinArm {
  0%,
  62% {
    transform: translate(0, 0) rotate(0);
  }
  72%,
  94% {
    transform: translate(4px, -19px) rotate(-14deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.masc.dancing[data-dance="dance.spin"] .mArmL {
  animation: dSpinL 1.2s both;
}
@keyframes dSpinL {
  0%,
  64% {
    transform: rotate(0);
  }
  72% {
    transform: rotate(-16deg);
  }
  82%,
  94% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0);
  }
}
.masc.dancing[data-dance="dance.spin"]:not([data-al]) .al-up {
  display: inline;
  animation: dSpinUp 1.2s both;
}
.masc.dancing[data-dance="dance.spin"]:not([data-al]) .al-rest {
  animation: dSpinDown 1.2s both;
}
@keyframes dSpinUp {
  0%,
  64% {
    opacity: 0;
  }
  64.5%,
  97% {
    opacity: 1;
  }
  97.5%,
  100% {
    opacity: 0;
  }
}
@keyframes dSpinDown {
  0%,
  64% {
    opacity: 1;
  }
  64.5%,
  97% {
    opacity: 0;
  }
  97.5%,
  100% {
    opacity: 1;
  }
}
.masc.dancing[data-dance="dance.spin"] .x-spark {
  display: inline;
  transform-origin: 60px 45px;
  animation: dTada 1.2s both;
}
@keyframes dTada {
  0%,
  64% {
    transform: scale(0.5);
    opacity: 0;
  }
  74% {
    transform: scale(1.08);
    opacity: 1;
  }
  92% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
/* Jet: crouch, shoot up 28 stretched with tentacles in (bubbles puff out), parachute down with tentacles spread */
.masc.dancing[data-dance="dance.jet"] .mRoot {
  animation: dJet 1.8s both;
}
@keyframes dJet {
  0% {
    transform: translateY(0) rotate(0) scale(1, 1);
    animation-timing-function: ease-in;
  }
  11% {
    transform: translateY(2px) rotate(0) scale(1.12, 0.86);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  25% {
    transform: translateY(-28px) rotate(0) scale(0.85, 1.18);
    animation-timing-function: ease-out;
  }
  31% {
    transform: translateY(-31px) rotate(0) scale(1.05, 0.95);
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: translateY(-29px) rotate(0) scale(1, 1);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translateY(-21px) rotate(3deg) scale(1, 1);
    animation-timing-function: ease-in-out;
  }
  64% {
    transform: translateY(-13px) rotate(-3deg) scale(1, 1);
    animation-timing-function: ease-in-out;
  }
  78% {
    transform: translateY(-5px) rotate(2deg) scale(1, 1);
    animation-timing-function: ease-in;
  }
  86% {
    transform: translateY(0) rotate(0) scale(1.1, 0.9);
    animation-timing-function: ease-out;
  }
  93% {
    transform: translateY(0) rotate(0) scale(0.97, 1.03);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0) rotate(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.jet"] .tn {
  animation: dJetT 1.8s both;
}
.masc.dancing[data-dance="dance.jet"] .tn2,
.masc.dancing[data-dance="dance.jet"] .tn3 {
  animation-delay: 30ms;
}
@keyframes dJetT {
  0%,
  100% {
    transform: rotate(0);
  }
  11% {
    transform: rotate(calc(var(--s) * 10deg));
  }
  15%,
  27% {
    transform: rotate(calc(var(--s) * -20deg));
  }
  36% {
    transform: rotate(calc(var(--s) * 34deg));
  }
  44% {
    transform: rotate(calc(var(--s) * 26deg));
  }
  52% {
    transform: rotate(calc(var(--s) * 32deg));
  }
  60% {
    transform: rotate(calc(var(--s) * 25deg));
  }
  68% {
    transform: rotate(calc(var(--s) * 31deg));
  }
  78% {
    transform: rotate(calc(var(--s) * 24deg));
  }
  86% {
    transform: rotate(calc(var(--s) * 16deg));
  }
  94% {
    transform: rotate(calc(var(--s) * -4deg));
  }
}
.masc.dancing[data-dance="dance.jet"] .mHead {
  animation: dJetH 1.8s ease-in-out both;
}
@keyframes dJetH {
  0%,
  36%,
  100% {
    transform: rotate(0);
  }
  52% {
    transform: rotate(-3deg);
  }
  66% {
    transform: rotate(3deg);
  }
  80% {
    transform: rotate(-2deg);
  }
}
.masc.dancing[data-dance="dance.jet"] .mHat,
.masc.dancing[data-dance="dance.jet"] .mCard {
  animation:
    oWob 0.5s ease-out 0.45s,
    oWob 0.5s ease-out 1.55s;
}
.masc.dancing[data-dance="dance.jet"] .mArm {
  animation: dJetArm 1.8s ease-in-out both;
}
@keyframes dJetArm {
  0%,
  11%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(8deg);
  }
  40%,
  80% {
    transform: translate(2px, -6px) rotate(-12deg);
  }
}
.masc.dancing[data-dance="dance.jet"] .o-jb {
  animation: dJetB 1.8s ease-out both;
}
@keyframes dJetB {
  0%,
  12% {
    transform: translate(0, 0) scale(0.3);
    opacity: 0;
  }
  16% {
    transform: translate(calc(var(--bx) * 0.4), calc(var(--by) * 0.4)) scale(0.9);
    opacity: 0.85;
  }
  36% {
    transform: translate(var(--bx), var(--by)) scale(1.2);
    opacity: 0.75;
  }
  55%,
  100% {
    transform: translate(calc(var(--bx) * 1.3), calc(var(--by) - 8px)) scale(1.4);
    opacity: 0;
  }
}
.masc .o-jb,
.masc .o-dust {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
/* Disco: 4 beats of .5 s; left arm points up, then down-left; hips shift, head bobs on half-beats, tentacles tap */
.masc.dancing[data-dance="dance.disco"] .mRoot {
  animation: dDisco 1s 2 both;
}
@keyframes dDisco {
  0% {
    transform: translateX(0) rotate(0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  12%,
  46% {
    transform: translateX(4px) rotate(-3deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  62%,
  96% {
    transform: translateX(-4px) rotate(3deg);
  }
  100% {
    transform: translateX(0) rotate(0);
  }
}
.masc.dancing[data-dance="dance.disco"] .mBody {
  animation: dDiscoB 0.25s ease-in-out 8 both;
}
@keyframes dDiscoB {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  50% {
    transform: translateY(1.5px) scale(1.03, 0.97);
  }
}
.masc.dancing[data-dance="dance.disco"] .mHead {
  animation: dDiscoH 1s ease-in-out 2 both;
}
@keyframes dDiscoH {
  0%,
  100% {
    transform: rotate(0) translateY(0);
  }
  12.5%,
  37.5% {
    transform: rotate(5deg) translateY(2px);
  }
  25% {
    transform: rotate(5deg) translateY(0);
  }
  62.5%,
  87.5% {
    transform: rotate(-5deg) translateY(2px);
  }
  75% {
    transform: rotate(-5deg) translateY(0);
  }
}
.masc.dancing[data-dance="dance.disco"] .al-up {
  display: inline;
}
.masc.dancing[data-dance="dance.disco"] .al-rest,
.masc.dancing[data-dance="dance.disco"] .al-chin {
  display: none;
}
.masc.dancing[data-dance="dance.disco"] .mArmL {
  animation: dDiscoL 1s 2 both;
}
@keyframes dDiscoL {
  0% {
    transform: rotate(-40deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  12% {
    transform: rotate(10deg);
  }
  46% {
    transform: rotate(5deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  60% {
    transform: rotate(-118deg);
  }
  94% {
    transform: rotate(-110deg);
  }
  100% {
    transform: rotate(-40deg);
  }
}
.masc.dancing[data-dance="dance.disco"] .mArm {
  animation: dDiscoC 1s ease-in-out 2 both;
}
@keyframes dDiscoC {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  12%,
  46% {
    transform: translate(-2px, 4px) rotate(12deg);
  }
  62%,
  94% {
    transform: translate(2px, -7px) rotate(-20deg);
  }
}
.masc.dancing[data-dance="dance.disco"] .tn {
  animation: dDiscoT 1s ease-out 2 both;
}
.masc.dancing[data-dance="dance.disco"] .tn2,
.masc.dancing[data-dance="dance.disco"] .tn4 {
  animation-delay: 0.5s;
}
@keyframes dDiscoT {
  0%,
  32%,
  100% {
    transform: translateY(0) rotate(0);
  }
  14% {
    transform: translateY(-5px) rotate(calc(var(--s) * 14deg));
  }
  24% {
    transform: translateY(0) rotate(calc(var(--s) * -3deg));
  }
}
.masc.dancing[data-dance="dance.disco"] .x-spark {
  display: inline;
  transform-origin: 60px 45px;
  animation: dDiscoS 1s 2 both;
}
@keyframes dDiscoS {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
  15%,
  40% {
    opacity: 1;
    transform: scale(1);
  }
  55% {
    opacity: 0.2;
    transform: scale(0.85);
  }
  70%,
  90% {
    opacity: 1;
    transform: scale(1.05);
  }
}
.masc.dancing[data-dance="dance.disco"] .mHat {
  animation: dDiscoHat 1s ease-in-out 2 both;
}
@keyframes dDiscoHat {
  0%,
  100% {
    transform: rotate(0);
  }
  18% {
    transform: rotate(-5deg);
  }
  40% {
    transform: rotate(2deg);
  }
  68% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-2deg);
  }
}
/* Backflip: crouch, jump 26 with a full backwards turn about his middle, land with dust, arms up */
.masc.dancing[data-dance="dance.flip"] .mRoot {
  transform-origin: 60px 70px;
  animation: dFlip 1.3s both;
}
@keyframes dFlip {
  0%,
  14% {
    transform: translateY(0) rotate(0);
    animation-timing-function: linear;
  }
  24% {
    transform: translateY(-19px) rotate(-90deg);
    animation-timing-function: linear;
  }
  34% {
    transform: translateY(-26px) rotate(-180deg);
    animation-timing-function: linear;
  }
  44% {
    transform: translateY(-19px) rotate(-270deg);
    animation-timing-function: linear;
  }
  54%,
  100% {
    transform: translateY(0) rotate(-360deg);
  }
}
.masc.dancing[data-dance="dance.flip"] .mBody {
  animation: dFlipB 1.3s both;
}
@keyframes dFlipB {
  0% {
    transform: scale(1, 1);
    animation-timing-function: ease-in;
  }
  14% {
    transform: scale(1.12, 0.88);
    animation-timing-function: ease-out;
  }
  20% {
    transform: scale(0.9, 1.12);
  }
  30%,
  40% {
    transform: scale(0.95, 0.95);
  }
  50% {
    transform: scale(0.96, 1.05);
    animation-timing-function: ease-in;
  }
  54% {
    transform: scale(1.15, 0.85);
    animation-timing-function: ease-out;
  }
  61% {
    transform: scale(0.95, 1.06);
    animation-timing-function: ease-in-out;
  }
  67% {
    transform: scale(1.02, 0.98);
  }
  72%,
  100% {
    transform: scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.flip"] .tn {
  animation: dFlipT 1.3s both;
}
@keyframes dFlipT {
  0%,
  100% {
    transform: rotate(0);
  }
  14% {
    transform: rotate(calc(var(--s) * 10deg));
  }
  22%,
  46% {
    transform: rotate(calc(var(--s) * -22deg));
  }
  54% {
    transform: rotate(calc(var(--s) * 18deg));
  }
  62% {
    transform: rotate(calc(var(--s) * -5deg));
  }
  70% {
    transform: rotate(calc(var(--s) * 3deg));
  }
}
.masc.dancing[data-dance="dance.flip"] .mHat,
.masc.dancing[data-dance="dance.flip"] .mCard {
  animation: oWob 0.52s ease-out 0.7s;
}
.masc.dancing[data-dance="dance.flip"] .mArm {
  animation: dFlipArm 1.3s both;
}
@keyframes dFlipArm {
  0%,
  14%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  22%,
  46% {
    transform: translate(-6px, 6px) rotate(24deg);
  }
  56% {
    transform: translate(0, 0) rotate(0);
  }
  66%,
  94% {
    transform: translate(4px, -23px) rotate(-8deg);
  }
}
.masc.dancing[data-dance="dance.flip"] .mArmL {
  animation: dFlipL 1.3s both;
}
@keyframes dFlipL {
  0%,
  62%,
  100% {
    transform: rotate(0);
  }
  70% {
    transform: rotate(-14deg);
  }
  82% {
    transform: rotate(4deg);
  }
  92% {
    transform: rotate(-4deg);
  }
}
.masc.dancing[data-dance="dance.flip"]:not([data-al]) .al-up {
  display: inline;
  animation: dFlipUp 1.3s both;
}
.masc.dancing[data-dance="dance.flip"]:not([data-al]) .al-rest {
  animation: dFlipDown 1.3s both;
}
@keyframes dFlipUp {
  0%,
  60% {
    opacity: 0;
  }
  60.5%,
  97% {
    opacity: 1;
  }
  97.5%,
  100% {
    opacity: 0;
  }
}
@keyframes dFlipDown {
  0%,
  60% {
    opacity: 1;
  }
  60.5%,
  97% {
    opacity: 0;
  }
  97.5%,
  100% {
    opacity: 1;
  }
}
.masc.dancing[data-dance="dance.flip"] .o-dust {
  animation: dDust 1.3s ease-out both;
}
@keyframes dDust {
  0%,
  53% {
    transform: translate(0, 0) scale(0.3);
    opacity: 0;
  }
  57% {
    transform: translate(calc(var(--bx) * 0.4), -1px) scale(0.9);
    opacity: 0.85;
  }
  76%,
  100% {
    transform: translate(var(--bx), -5px) scale(1.3);
    opacity: 0;
  }
}
/* back tentacles join some of the new dances: their side factor */
.masc.dancing .tb1 {
  --s: 0.7;
}
.masc.dancing .tb2 {
  --s: 0;
}
.masc.dancing .tb3 {
  --s: -0.7;
}
/* Jelly wobble: a little plop (up 10), then a damped squash-and-stretch jiggle; the body sways from his feet like set jelly */
.masc.dancing[data-dance="dance.jelly"] .mRoot {
  animation: dJel 1.5s both;
}
@keyframes dJel {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-in;
  }
  7% {
    transform: translateY(0) scale(1.1, 0.9);
    animation-timing-function: ease-out;
  }
  15% {
    transform: translateY(-10px) scale(0.92, 1.09);
    animation-timing-function: ease-in;
  }
  22% {
    transform: translateY(0) scale(1.22, 0.8);
    animation-timing-function: ease-out;
  }
  31% {
    transform: translateY(0) scale(0.86, 1.15);
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: translateY(0) scale(1.14, 0.88);
    animation-timing-function: ease-in-out;
  }
  49% {
    transform: translateY(0) scale(0.91, 1.09);
    animation-timing-function: ease-in-out;
  }
  58% {
    transform: translateY(0) scale(1.08, 0.93);
    animation-timing-function: ease-in-out;
  }
  67% {
    transform: translateY(0) scale(0.95, 1.05);
    animation-timing-function: ease-in-out;
  }
  76% {
    transform: translateY(0) scale(1.04, 0.97);
    animation-timing-function: ease-in-out;
  }
  85% {
    transform: translateY(0) scale(0.98, 1.02);
    animation-timing-function: ease-in-out;
  }
  93%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.jelly"] .mBody {
  animation: dJelB 1.5s ease-in-out both;
}
@keyframes dJelB {
  0%,
  22% {
    transform: skewX(0);
  }
  29% {
    transform: skewX(6deg);
  }
  38% {
    transform: skewX(-5deg);
  }
  47% {
    transform: skewX(4deg);
  }
  56% {
    transform: skewX(-3deg);
  }
  65% {
    transform: skewX(2deg);
  }
  75% {
    transform: skewX(-1deg);
  }
  86%,
  100% {
    transform: skewX(0);
  }
}
.masc.dancing[data-dance="dance.jelly"] .mHead {
  animation: dJelH 1.5s ease-in-out both;
}
@keyframes dJelH {
  0%,
  18% {
    transform: translateY(0) scale(1, 1);
  }
  25% {
    transform: translateY(3px) scale(1.05, 0.95);
  }
  34% {
    transform: translateY(-2px) scale(0.96, 1.04);
  }
  43% {
    transform: translateY(1.5px) scale(1.03, 0.97);
  }
  52% {
    transform: translateY(-1px) scale(0.98, 1.02);
  }
  62%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.jelly"] .tn {
  animation: dJelT 1.5s ease-in-out both;
}
.masc.dancing[data-dance="dance.jelly"] .tn2,
.masc.dancing[data-dance="dance.jelly"] .tn3 {
  animation-delay: 40ms;
}
@keyframes dJelT {
  0%,
  100% {
    transform: rotate(0);
  }
  7% {
    transform: rotate(calc(var(--s) * 8deg));
  }
  15% {
    transform: rotate(calc(var(--s) * -12deg));
  }
  22% {
    transform: rotate(calc(var(--s) * 22deg));
  }
  31% {
    transform: rotate(calc(var(--s) * -9deg));
  }
  40% {
    transform: rotate(calc(var(--s) * 13deg));
  }
  49% {
    transform: rotate(calc(var(--s) * -6deg));
  }
  58% {
    transform: rotate(calc(var(--s) * 7deg));
  }
  67% {
    transform: rotate(calc(var(--s) * -3deg));
  }
  78% {
    transform: rotate(calc(var(--s) * 2deg));
  }
}
.masc.dancing[data-dance="dance.jelly"] .mArm {
  animation: dJelA 1.5s ease-in-out both;
}
@keyframes dJelA {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  15% {
    transform: translate(0, -2px) rotate(-10deg);
  }
  22% {
    transform: translate(0, 3px) rotate(14deg);
  }
  31% {
    transform: translate(0, 0) rotate(-9deg);
  }
  40% {
    transform: translate(0, 0) rotate(7deg);
  }
  49% {
    transform: translate(0, 0) rotate(-5deg);
  }
  58% {
    transform: translate(0, 0) rotate(3deg);
  }
  70% {
    transform: translate(0, 0) rotate(-1deg);
  }
}
.masc.dancing[data-dance="dance.jelly"] .mArmL {
  animation: dJelL 1.5s ease-in-out both;
}
@keyframes dJelL {
  0%,
  100% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(10deg);
  }
  22% {
    transform: rotate(-14deg);
  }
  31% {
    transform: rotate(9deg);
  }
  40% {
    transform: rotate(-7deg);
  }
  49% {
    transform: rotate(5deg);
  }
  58% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(1deg);
  }
}
.masc.dancing[data-dance="dance.jelly"] .mHat,
.masc.dancing[data-dance="dance.jelly"] .mCard {
  animation:
    oWob 0.52s ease-out 0.32s,
    oWob 0.5s ease-out 0.78s;
}
/* Robot: 8 stiff beats of .2 s (steps): side steps with head ticks, the arms swap at right angles, a dip and a pop, rest */
.masc.dancing[data-dance="dance.robot"] .mRoot {
  animation: dRob 1.6s steps(1, end) both;
}
@keyframes dRob {
  0% {
    transform: translate(0, 0) rotate(0) scale(1, 1);
  }
  12.5% {
    transform: translate(-4px, 0) rotate(-3deg) scale(1, 1);
  }
  25% {
    transform: translate(4px, 0) rotate(3deg) scale(1, 1);
  }
  37.5% {
    transform: translate(0, 2px) rotate(0) scale(1.06, 0.94);
  }
  50% {
    transform: translate(0, -4px) rotate(0) scale(0.97, 1.04);
  }
  62.5% {
    transform: translate(-4px, 0) rotate(-3deg) scale(1, 1);
  }
  75% {
    transform: translate(4px, 0) rotate(3deg) scale(1, 1);
  }
  87.5%,
  100% {
    transform: translate(0, 0) rotate(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.robot"] .mHead {
  animation: dRobH 1.6s steps(1, end) both;
}
@keyframes dRobH {
  0% {
    transform: translateY(0) rotate(0);
  }
  12.5% {
    transform: translateY(0) rotate(9deg);
  }
  25% {
    transform: translateY(0) rotate(-9deg);
  }
  37.5% {
    transform: translateY(2px) rotate(0);
  }
  50% {
    transform: translateY(-2px) rotate(0);
  }
  56.25% {
    transform: translateY(0) rotate(-6deg);
  }
  62.5% {
    transform: translateY(0) rotate(9deg);
  }
  68.75% {
    transform: translateY(0) rotate(3deg);
  }
  75% {
    transform: translateY(0) rotate(-9deg);
  }
  81.25% {
    transform: translateY(0) rotate(-3deg);
  }
  87.5%,
  100% {
    transform: translateY(0) rotate(0);
  }
}
.masc.dancing[data-dance="dance.robot"] .mArm {
  animation: dRobA 1.6s steps(1, end) both;
}
@keyframes dRobA {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  12.5% {
    transform: translate(0, 0) rotate(-42deg);
  }
  25% {
    transform: translate(0, 0) rotate(18deg);
  }
  37.5% {
    transform: translate(0, 0) rotate(-42deg);
  }
  50% {
    transform: translate(4px, -22px) rotate(-12deg);
  }
  62.5% {
    transform: translate(0, 0) rotate(18deg);
  }
  75% {
    transform: translate(0, 0) rotate(-42deg);
  }
  87.5%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.masc.dancing[data-dance="dance.robot"] .mArmL {
  animation: dRobL 1.6s steps(1, end) both;
}
@keyframes dRobL {
  0% {
    transform: rotate(0);
  }
  12.5% {
    transform: rotate(16deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  37.5% {
    transform: rotate(16deg);
  }
  50% {
    transform: rotate(-8deg);
  }
  62.5% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(16deg);
  }
  87.5%,
  100% {
    transform: rotate(0);
  }
}
.masc.dancing[data-dance="dance.robot"]:not([data-al]) .al-up {
  display: inline;
  animation: dRobUp 1.6s steps(1, end) both;
}
.masc.dancing[data-dance="dance.robot"]:not([data-al]) .al-rest {
  animation: dRobDown 1.6s steps(1, end) both;
}
@keyframes dRobUp {
  0%,
  12.5% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  50%,
  62.5% {
    opacity: 1;
  }
  75%,
  100% {
    opacity: 0;
  }
}
@keyframes dRobDown {
  0%,
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  37.5% {
    opacity: 1;
  }
  50%,
  62.5% {
    opacity: 0;
  }
  75%,
  100% {
    opacity: 1;
  }
}
.masc.dancing[data-dance="dance.robot"] .tn,
.masc.dancing[data-dance="dance.robot"] .tb {
  animation: dRobT 1.6s steps(1, end) both;
}
@keyframes dRobT {
  0% {
    transform: rotate(0);
  }
  12.5% {
    transform: rotate(7deg);
  }
  25% {
    transform: rotate(-7deg);
  }
  37.5% {
    transform: rotate(calc(var(--s) * 12deg));
  }
  50% {
    transform: rotate(calc(var(--s) * -5deg));
  }
  62.5% {
    transform: rotate(7deg);
  }
  75% {
    transform: rotate(-7deg);
  }
  87.5%,
  100% {
    transform: rotate(0);
  }
}
/* Trampoline: a trampoline pops up under him (fxb behind, fx in front); he presses it, bounces 15, lands deep, bounces 30
   with arms up, lands and settles while it folds away */
.masc.dancing[data-dance="dance.bounce"] .mRoot {
  animation: dBnc 1.8s both;
}
@keyframes dBnc {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-in-out;
  }
  7% {
    transform: translateY(-2px) scale(0.97, 1.03);
    animation-timing-function: ease-in;
  }
  13% {
    transform: translateY(5px) scale(1.15, 0.85);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }
  19% {
    transform: translateY(-8px) scale(0.9, 1.12);
    animation-timing-function: ease-out;
  }
  27% {
    transform: translateY(-15px) scale(0.98, 1.02);
    animation-timing-function: ease-in;
  }
  34% {
    transform: translateY(-4px) scale(0.93, 1.08);
    animation-timing-function: ease-in;
  }
  38% {
    transform: translateY(6px) scale(1.2, 0.81);
    animation-timing-function: ease-out;
  }
  42% {
    transform: translateY(7px) scale(1.22, 0.79);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }
  48% {
    transform: translateY(-14px) scale(0.87, 1.15);
    animation-timing-function: ease-out;
  }
  59% {
    transform: translateY(-30px) scale(0.98, 1.02);
    animation-timing-function: ease-in;
  }
  68% {
    transform: translateY(-11px) scale(0.92, 1.08);
    animation-timing-function: ease-in;
  }
  73% {
    transform: translateY(5px) scale(1.15, 0.86);
    animation-timing-function: ease-out;
  }
  80% {
    transform: translateY(-5px) scale(0.97, 1.03);
    animation-timing-function: ease-in;
  }
  86% {
    transform: translateY(1px) scale(1.05, 0.95);
    animation-timing-function: ease-out;
  }
  92%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.bounce"] .o-tr {
  transform-origin: 60px 124px;
  animation: dTr 1.8s both;
}
@keyframes dTr {
  0% {
    transform: scale(0.3, 0.1);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  7%,
  88% {
    transform: scale(1, 1);
    opacity: 1;
    animation-timing-function: ease-in;
  }
  97%,
  100% {
    transform: scale(0.3, 0.1);
    opacity: 0;
  }
}
.masc.dancing[data-dance="dance.bounce"] .o-trB {
  transform-origin: 60px 121.5px;
  animation: dTrB 1.8s ease-in-out both;
}
@keyframes dTrB {
  0%,
  8%,
  24%,
  36%,
  52%,
  70%,
  84%,
  92%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  13% {
    transform: translateY(3px) scale(1, 1.5);
  }
  18% {
    transform: translateY(-1px) scale(1, 0.85);
  }
  40% {
    transform: translateY(4px) scale(1, 1.7);
  }
  46% {
    transform: translateY(-1.5px) scale(1, 0.8);
  }
  73% {
    transform: translateY(3px) scale(1, 1.5);
  }
  78% {
    transform: translateY(-1px) scale(1, 0.9);
  }
  87% {
    transform: translateY(1px) scale(1, 1.15);
  }
}
.masc.dancing[data-dance="dance.bounce"] .tn {
  animation: dBncT 1.8s both;
}
.masc.dancing[data-dance="dance.bounce"] .tn2,
.masc.dancing[data-dance="dance.bounce"] .tn3 {
  animation-delay: 30ms;
}
@keyframes dBncT {
  0%,
  100% {
    transform: rotate(0);
  }
  7% {
    transform: rotate(calc(var(--s) * -4deg));
  }
  13% {
    transform: rotate(calc(var(--s) * 16deg));
  }
  21% {
    transform: rotate(calc(var(--s) * -14deg));
  }
  30% {
    transform: rotate(calc(var(--s) * 8deg));
  }
  38%,
  42% {
    transform: rotate(calc(var(--s) * 20deg));
  }
  50% {
    transform: rotate(calc(var(--s) * -16deg));
  }
  59% {
    transform: rotate(calc(var(--s) * 28deg));
  }
  68% {
    transform: rotate(calc(var(--s) * 20deg));
  }
  73% {
    transform: rotate(calc(var(--s) * 16deg));
  }
  80% {
    transform: rotate(calc(var(--s) * -5deg));
  }
  88% {
    transform: rotate(calc(var(--s) * 4deg));
  }
}
.masc.dancing[data-dance="dance.bounce"] .mArm {
  animation: dBncArm 1.8s ease-in-out both;
}
@keyframes dBncArm {
  0%,
  8%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  13% {
    transform: translate(-2px, 3px) rotate(10deg);
  }
  22% {
    transform: translate(0, -3px) rotate(-8deg);
  }
  38% {
    transform: translate(-2px, 4px) rotate(12deg);
  }
  50%,
  70% {
    transform: translate(4px, -22px) rotate(-10deg);
  }
  76% {
    transform: translate(4px, -20px) rotate(-6deg);
  }
  92% {
    transform: translate(0, 0) rotate(0);
  }
}
.masc.dancing[data-dance="dance.bounce"] .mArmL {
  animation: dBncL 1.8s both;
}
@keyframes dBncL {
  0%,
  44% {
    transform: rotate(0);
  }
  52% {
    transform: rotate(-12deg);
  }
  62% {
    transform: rotate(6deg);
  }
  74% {
    transform: rotate(-6deg);
  }
  84%,
  100% {
    transform: rotate(0);
  }
}
.masc.dancing[data-dance="dance.bounce"]:not([data-al]) .al-up {
  display: inline;
  animation: dBncUp 1.8s both;
}
.masc.dancing[data-dance="dance.bounce"]:not([data-al]) .al-rest {
  animation: dBncDown 1.8s both;
}
@keyframes dBncUp {
  0%,
  45% {
    opacity: 0;
  }
  45.5%,
  88% {
    opacity: 1;
  }
  88.5%,
  100% {
    opacity: 0;
  }
}
@keyframes dBncDown {
  0%,
  45% {
    opacity: 1;
  }
  45.5%,
  88% {
    opacity: 0;
  }
  88.5%,
  100% {
    opacity: 1;
  }
}
.masc.dancing[data-dance="dance.bounce"] .mHat,
.masc.dancing[data-dance="dance.bounce"] .mCard {
  animation:
    oWob 0.48s ease-out 0.24s,
    oWob 0.5s ease-out 0.7s,
    oWob 0.52s ease-out 1.32s;
}
/* Moonwalk: leans and glides 16 to his left in four slides (the tentacles take turns sliding back), scoots home, then a
   hat tip with the left arm up and a wink */
.masc.dancing[data-dance="dance.moon"] .mRoot {
  animation: dMoon 2s both;
}
@keyframes dMoon {
  0% {
    transform: translate(0, 0) rotate(0);
    animation-timing-function: ease-out;
  }
  6% {
    transform: translate(0, 0) rotate(4deg);
    animation-timing-function: linear;
  }
  12.25% {
    transform: translate(-2px, -1.5px) rotate(4deg);
    animation-timing-function: linear;
  }
  18.5% {
    transform: translate(-4px, 0) rotate(4deg);
    animation-timing-function: linear;
  }
  24.75% {
    transform: translate(-6px, -1.5px) rotate(4deg);
    animation-timing-function: linear;
  }
  31% {
    transform: translate(-8px, 0) rotate(4deg);
    animation-timing-function: linear;
  }
  37.25% {
    transform: translate(-10px, -1.5px) rotate(4deg);
    animation-timing-function: linear;
  }
  43.5% {
    transform: translate(-12px, 0) rotate(4deg);
    animation-timing-function: linear;
  }
  49.75% {
    transform: translate(-14px, -1.5px) rotate(4deg);
    animation-timing-function: linear;
  }
  56% {
    transform: translate(-16px, 0) rotate(4deg);
    animation-timing-function: ease-in-out;
  }
  66% {
    transform: translate(1px, 0) rotate(-5deg);
    animation-timing-function: ease-out;
  }
  72% {
    transform: translate(0, 0) rotate(0);
    animation-timing-function: ease-in-out;
  }
  78%,
  90% {
    transform: translate(0, -2px) rotate(-3deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.masc.dancing[data-dance="dance.moon"] .mHead {
  animation: dMoonH 2s ease-in-out both;
}
@keyframes dMoonH {
  0%,
  100% {
    transform: rotate(0);
  }
  6%,
  56% {
    transform: rotate(-3deg);
  }
  66% {
    transform: rotate(4deg);
  }
  72% {
    transform: rotate(0);
  }
  78%,
  90% {
    transform: rotate(-8deg);
  }
}
.masc.dancing[data-dance="dance.moon"] .tn1,
.masc.dancing[data-dance="dance.moon"] .tn3,
.masc.dancing[data-dance="dance.moon"] .tb2 {
  animation: dMoonA 2s both;
}
.masc.dancing[data-dance="dance.moon"] .tn2,
.masc.dancing[data-dance="dance.moon"] .tb1,
.masc.dancing[data-dance="dance.moon"] .tb3 {
  animation: dMoonB 2s both;
}
.masc.dancing[data-dance="dance.moon"] .tn4 {
  animation:
    dMoonB 2s both,
    dMoonK 0.52s ease-in-out 1.5s forwards;
}
@keyframes dMoonA {
  0% {
    transform: translateY(0) rotate(0);
  }
  6% {
    transform: translateY(0) rotate(-10deg);
    animation-timing-function: linear;
  }
  18.5% {
    transform: translateY(0) rotate(14deg);
    animation-timing-function: ease-out;
  }
  22% {
    transform: translateY(-3px) rotate(-3deg);
  }
  31% {
    transform: translateY(0) rotate(-10deg);
    animation-timing-function: linear;
  }
  43.5% {
    transform: translateY(0) rotate(14deg);
    animation-timing-function: ease-out;
  }
  47% {
    transform: translateY(-3px) rotate(-3deg);
  }
  56% {
    transform: translateY(0) rotate(-4deg);
  }
  64% {
    transform: translateY(0) rotate(8deg);
  }
  72%,
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes dMoonB {
  0% {
    transform: translateY(0) rotate(0);
  }
  6% {
    transform: translateY(-3px) rotate(-3deg);
  }
  18.5% {
    transform: translateY(0) rotate(-10deg);
    animation-timing-function: linear;
  }
  31% {
    transform: translateY(0) rotate(14deg);
    animation-timing-function: ease-out;
  }
  34.5% {
    transform: translateY(-3px) rotate(-3deg);
  }
  43.5% {
    transform: translateY(0) rotate(-10deg);
    animation-timing-function: linear;
  }
  56% {
    transform: translateY(0) rotate(14deg);
  }
  64% {
    transform: translateY(0) rotate(8deg);
  }
  72%,
  100% {
    transform: translateY(0) rotate(0);
  }
}
@keyframes dMoonK {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  25%,
  75% {
    transform: translateY(-3px) rotate(-22deg);
  }
}
.masc.dancing[data-dance="dance.moon"] .mArm {
  animation: dMoonC 2s ease-in-out both;
}
@keyframes dMoonC {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  6%,
  56% {
    transform: translate(0, 0) rotate(6deg);
  }
  66%,
  72% {
    transform: translate(0, 0) rotate(0);
  }
  78%,
  90% {
    transform: translate(1px, -3px) rotate(-16deg);
  }
}
.masc.dancing[data-dance="dance.moon"] .mArmL {
  animation: dMoonL 2s ease-in-out both;
}
@keyframes dMoonL {
  0%,
  72%,
  100% {
    transform: rotate(0);
  }
  78%,
  90% {
    transform: rotate(16deg);
  }
}
.masc.dancing[data-dance="dance.moon"]:not([data-al]) .al-up {
  display: inline;
  animation: dMoonUp 2s both;
}
.masc.dancing[data-dance="dance.moon"]:not([data-al]) .al-rest {
  animation: dMoonDown 2s both;
}
@keyframes dMoonUp {
  0%,
  73% {
    opacity: 0;
  }
  73.5%,
  95% {
    opacity: 1;
  }
  95.5%,
  100% {
    opacity: 0;
  }
}
@keyframes dMoonDown {
  0%,
  73% {
    opacity: 1;
  }
  73.5%,
  95% {
    opacity: 0;
  }
  95.5%,
  100% {
    opacity: 1;
  }
}
.masc.dancing[data-dance="dance.moon"] .mHat {
  animation: dMoonHat 2s both;
}
@keyframes dMoonHat {
  0%,
  74% {
    transform: translate(0, 0) rotate(0);
  }
  80%,
  88% {
    transform: translate(-3px, -8px) rotate(-16deg);
  }
  94% {
    transform: translate(0, 1px) rotate(3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
.masc.dancing[data-dance="dance.moon"] .mCard {
  animation: oWob 0.5s ease-out 1.32s;
}
.masc.dancing[data-dance="dance.moon"]:not([data-ey="hap"]):not([data-ey="hrt"]):not([data-ey="dz"]):not(
    [data-ey="slp"]
  ):not([data-ey="eek"]):not([data-ey="shades"]):not([data-ey="det"]):not([data-ey="wnk"])
  .ea-wnk {
  display: inline;
  animation: dMoonWk 2s both;
}
.masc.dancing[data-dance="dance.moon"]:not([data-ey="hap"]):not([data-ey="hrt"]):not([data-ey="dz"]):not(
    [data-ey="slp"]
  ):not([data-ey="eek"]):not([data-ey="shades"]):not([data-ey="det"]):not([data-ey="wnk"])
  .eR {
  animation: dMoonWo 2s both;
}
@keyframes dMoonWk {
  0%,
  79% {
    opacity: 0;
  }
  79.5%,
  91% {
    opacity: 1;
  }
  91.5%,
  100% {
    opacity: 0;
  }
}
@keyframes dMoonWo {
  0%,
  79% {
    opacity: 1;
  }
  79.5%,
  91% {
    opacity: 0;
  }
  91.5%,
  100% {
    opacity: 1;
  }
}
/* Tentacle wave: a stadium wave runs left to right through his left arm, all seven tentacles and the card arm, bounces
   back right to left, then both arms go up with a hop. --wi = each tentacle's place from the left */
.masc.dancing[data-dance="dance.wave"] .tn1 {
  --wi: 0;
}
.masc.dancing[data-dance="dance.wave"] .tb1 {
  --wi: 1;
}
.masc.dancing[data-dance="dance.wave"] .tn2 {
  --wi: 2;
}
.masc.dancing[data-dance="dance.wave"] .tb2 {
  --wi: 3;
}
.masc.dancing[data-dance="dance.wave"] .tn3 {
  --wi: 4;
}
.masc.dancing[data-dance="dance.wave"] .tb3 {
  --wi: 5;
}
.masc.dancing[data-dance="dance.wave"] .tn4 {
  --wi: 6;
}
.masc.dancing[data-dance="dance.wave"] .tn,
.masc.dancing[data-dance="dance.wave"] .tb {
  animation:
    dWvT 0.38s ease-in-out calc(80ms + var(--wi) * 60ms) forwards,
    dWvT 0.38s ease-in-out calc(840ms + (6 - var(--wi)) * 60ms) forwards,
    dWvT2 0.6s ease-in-out 1.36s forwards;
}
@keyframes dWvT {
  0%,
  100% {
    transform: translateY(0) rotate(0) scale(1, 1);
  }
  40% {
    transform: translateY(-16px) rotate(calc(var(--s) * 30deg)) scale(1, 1.08);
  }
  72% {
    transform: translateY(2px) rotate(calc(var(--s) * -6deg)) scale(1, 0.96);
  }
}
@keyframes dWvT2 {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  30% {
    transform: translateY(1px) rotate(calc(var(--s) * -6deg));
  }
  55% {
    transform: translateY(-5px) rotate(calc(var(--s) * 26deg));
  }
  80% {
    transform: translateY(0) rotate(calc(var(--s) * 8deg));
  }
}
.masc.dancing[data-dance="dance.wave"] .mRoot {
  animation: dWvR 2s ease-in-out both;
}
@keyframes dWvR {
  0% {
    transform: translateY(0) rotate(0) scale(1, 1);
  }
  10% {
    transform: translateY(-1px) rotate(-3deg) scale(1, 1);
  }
  30%,
  42% {
    transform: translateY(-1px) rotate(3deg) scale(1, 1);
  }
  62% {
    transform: translateY(-1px) rotate(-3deg) scale(1, 1);
  }
  70% {
    transform: translateY(1px) rotate(0) scale(1.06, 0.94);
    animation-timing-function: ease-out;
  }
  78% {
    transform: translateY(-9px) rotate(0) scale(0.96, 1.05);
    animation-timing-function: ease-in;
  }
  86% {
    transform: translateY(0) rotate(0) scale(1.06, 0.94);
  }
  92% {
    transform: translateY(0) rotate(0) scale(0.98, 1.02);
  }
  97%,
  100% {
    transform: translateY(0) rotate(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.wave"] .mHead {
  animation: dWvH 2s ease-in-out both;
}
@keyframes dWvH {
  0%,
  72%,
  100% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(-6deg);
  }
  30%,
  42% {
    transform: rotate(6deg);
  }
  62% {
    transform: rotate(-6deg);
  }
}
.masc.dancing[data-dance="dance.wave"] .mArm {
  animation: dWvA 2s ease-in-out both;
}
@keyframes dWvA {
  0%,
  26%,
  52%,
  68%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  33%,
  44% {
    transform: translate(4px, -22px) rotate(-10deg);
  }
  75%,
  92% {
    transform: translate(4px, -22px) rotate(-10deg);
  }
}
.masc.dancing[data-dance="dance.wave"] .mArmL {
  animation: dWvL 2s ease-in-out both;
}
@keyframes dWvL {
  0%,
  19%,
  67%,
  95%,
  100% {
    transform: rotate(0);
  }
  4%,
  72% {
    transform: rotate(-14deg);
  }
  10%,
  80% {
    transform: rotate(8deg);
  }
  16%,
  88% {
    transform: rotate(-6deg);
  }
}
.masc.dancing[data-dance="dance.wave"]:not([data-al]) .al-up {
  display: inline;
  animation: dWvUp 2s both;
}
.masc.dancing[data-dance="dance.wave"]:not([data-al]) .al-rest {
  animation: dWvDown 2s both;
}
@keyframes dWvUp {
  0% {
    opacity: 0;
  }
  1%,
  19% {
    opacity: 1;
  }
  19.5%,
  67% {
    opacity: 0;
  }
  67.5%,
  95% {
    opacity: 1;
  }
  95.5%,
  100% {
    opacity: 0;
  }
}
@keyframes dWvDown {
  0% {
    opacity: 1;
  }
  1%,
  19% {
    opacity: 0;
  }
  19.5%,
  67% {
    opacity: 1;
  }
  67.5%,
  95% {
    opacity: 0;
  }
  95.5%,
  100% {
    opacity: 1;
  }
}
.masc.dancing[data-dance="dance.wave"] .mHat,
.masc.dancing[data-dance="dance.wave"] .mCard {
  animation:
    oWob 0.5s ease-out 0.3s,
    oWob 0.5s ease-out 1.1s,
    oWob 0.5s ease-out 1.72s;
}
/* Ballerina: rises en pointe (the inner tentacles stretch down to a point, the outer ones fan out like a tutu), arms up,
   a scaleX twirl, a held pose with a sparkle, then a curtsy */
.masc.dancing[data-dance="dance.ballet"] .mRoot {
  animation: dBal 1.8s both;
}
@keyframes dBal {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: ease-in-out;
  }
  11%,
  20% {
    transform: translateY(-8px) scale(0.94, 1.07);
    animation-timing-function: ease-in-out;
  }
  33% {
    transform: translateY(-9px) scale(-0.94, 1.07);
    animation-timing-function: ease-in-out;
  }
  46% {
    transform: translateY(-8px) scale(0.94, 1.07);
    animation-timing-function: ease-out;
  }
  51% {
    transform: translateY(-9px) scale(0.95, 1.06);
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: translateY(-8px) scale(0.94, 1.07);
    animation-timing-function: ease-in-out;
  }
  68% {
    transform: translateY(0) scale(1.02, 0.98);
    animation-timing-function: ease-in-out;
  }
  77%,
  86% {
    transform: translateY(3px) scale(1.05, 0.94);
    animation-timing-function: ease-in-out;
  }
  94% {
    transform: translateY(0) scale(0.99, 1.01);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.ballet"] .tn2,
.masc.dancing[data-dance="dance.ballet"] .tn3,
.masc.dancing[data-dance="dance.ballet"] .tb2 {
  animation: dBalI 1.8s ease-in-out both;
}
@keyframes dBalI {
  0%,
  100% {
    transform: rotate(0) scale(1, 1);
  }
  11%,
  60% {
    transform: rotate(calc(var(--s) * -14deg)) scale(1, 1.3);
  }
  68% {
    transform: rotate(0) scale(1, 1);
  }
  77%,
  86% {
    transform: rotate(calc(var(--s) * 8deg)) scale(1, 1);
  }
}
.masc.dancing[data-dance="dance.ballet"] .tn3 {
  animation-name: dBalX;
}
@keyframes dBalX {
  0%,
  100% {
    transform: rotate(0) scale(1, 1);
  }
  11%,
  60% {
    transform: rotate(calc(var(--s) * -14deg)) scale(1, 1.3);
  }
  68% {
    transform: rotate(0) scale(1, 1);
  }
  77%,
  86% {
    transform: rotate(22deg) scale(1, 0.94);
  }
}
.masc.dancing[data-dance="dance.ballet"] .tn1,
.masc.dancing[data-dance="dance.ballet"] .tn4,
.masc.dancing[data-dance="dance.ballet"] .tb1,
.masc.dancing[data-dance="dance.ballet"] .tb3 {
  animation: dBalO 1.8s ease-in-out both;
}
@keyframes dBalO {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  11%,
  20% {
    transform: translateY(-3px) rotate(calc(var(--s) * 52deg));
  }
  33% {
    transform: translateY(-4px) rotate(calc(var(--s) * 62deg));
  }
  46%,
  60% {
    transform: translateY(-3px) rotate(calc(var(--s) * 50deg));
  }
  68% {
    transform: translateY(0) rotate(calc(var(--s) * 8deg));
  }
  77%,
  86% {
    transform: translateY(0) rotate(calc(var(--s) * 16deg));
  }
}
.masc.dancing[data-dance="dance.ballet"] .mHead {
  animation: dBalH 1.8s ease-in-out both;
}
@keyframes dBalH {
  0%,
  68%,
  100% {
    transform: translateY(0) rotate(0) scale(1, 1);
  }
  11%,
  20% {
    transform: translateY(0) rotate(-4deg) scale(1, 1);
  }
  46%,
  60% {
    transform: translateY(-1px) rotate(-6deg) scale(1, 1);
  }
  77%,
  86% {
    transform: translateY(3px) rotate(-6deg) scale(1, 0.97);
  }
}
.masc.dancing[data-dance="dance.ballet"] .mArm {
  animation: dBalA 1.8s ease-in-out both;
}
@keyframes dBalA {
  0%,
  12%,
  68%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  20%,
  60% {
    transform: translate(4px, -22px) rotate(-10deg);
  }
  77%,
  86% {
    transform: translate(-2px, 3px) rotate(14deg);
  }
}
.masc.dancing[data-dance="dance.ballet"] .mArmL {
  animation: dBalL 1.8s ease-in-out both;
}
@keyframes dBalL {
  0%,
  13%,
  66%,
  100% {
    transform: rotate(0);
  }
  20%,
  60% {
    transform: rotate(12deg);
  }
  76%,
  88% {
    transform: rotate(20deg);
  }
}
.masc.dancing[data-dance="dance.ballet"]:not([data-al]) .al-up {
  display: inline;
  animation: dBalUp 1.8s both;
}
.masc.dancing[data-dance="dance.ballet"]:not([data-al]) .al-rest {
  animation: dBalDown 1.8s both;
}
@keyframes dBalUp {
  0%,
  13% {
    opacity: 0;
  }
  13.5%,
  64% {
    opacity: 1;
  }
  64.5%,
  100% {
    opacity: 0;
  }
}
@keyframes dBalDown {
  0%,
  13% {
    opacity: 1;
  }
  13.5%,
  64% {
    opacity: 0;
  }
  64.5%,
  100% {
    opacity: 1;
  }
}
.masc.dancing[data-dance="dance.ballet"] .x-spark {
  display: inline;
  transform-origin: 60px 45px;
  animation: dBalS 1.8s both;
}
@keyframes dBalS {
  0%,
  44% {
    transform: scale(0.5);
    opacity: 0;
  }
  52% {
    transform: scale(1.08);
    opacity: 1;
  }
  62% {
    transform: scale(1);
    opacity: 1;
  }
  70%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.masc.dancing[data-dance="dance.ballet"] .mHat,
.masc.dancing[data-dance="dance.ballet"] .mCard {
  animation:
    oWob 0.5s ease-out 0.86s,
    oWob 0.52s ease-out 1.3s;
}
/* auras ride along with the dance's vertical travel (but are never squashed or spun with him) */
.masc.dancing[data-dance="dance.hop"] .mFx,
.masc.dancing[data-dance="dance.hop"] .mFxF {
  animation: dHopFx 1.5s both;
}
@keyframes dHopFx {
  0%,
  5%,
  24%,
  38.3%,
  57.3%,
  71%,
  89%,
  100% {
    transform: translateY(0);
  }
  10%,
  43.3% {
    transform: translateY(-9px);
  }
  16%,
  49.3% {
    transform: translateY(-14px);
  }
  76% {
    transform: translateY(-13px);
  }
  82% {
    transform: translateY(-20px);
  }
}
.masc.dancing[data-dance="dance.spin"] .mFx,
.masc.dancing[data-dance="dance.spin"] .mFxF {
  animation: dSpinFx 1.2s both;
}
@keyframes dSpinFx {
  0%,
  12.5%,
  62.5%,
  100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-8px);
  }
  37.5% {
    transform: translateY(-18px);
  }
  55% {
    transform: translateY(-5px);
  }
}
.masc.dancing[data-dance="dance.jet"] .mFx,
.masc.dancing[data-dance="dance.jet"] .mFxF {
  animation: dJetFx 1.8s both;
}
@keyframes dJetFx {
  0%,
  11%,
  86%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-28px);
    animation-timing-function: ease-out;
  }
  31% {
    transform: translateY(-31px);
  }
  36% {
    transform: translateY(-29px);
  }
  50% {
    transform: translateY(-21px);
  }
  64% {
    transform: translateY(-13px);
  }
  78% {
    transform: translateY(-5px);
    animation-timing-function: ease-in;
  }
}
.masc.dancing[data-dance="dance.flip"] .mFx,
.masc.dancing[data-dance="dance.flip"] .mFxF {
  animation: dFlipFx 1.3s both;
}
@keyframes dFlipFx {
  0%,
  14%,
  54%,
  100% {
    transform: translateY(0);
  }
  24%,
  44% {
    transform: translateY(-19px);
  }
  34% {
    transform: translateY(-26px);
  }
}
.masc.dancing[data-dance="dance.jelly"] .mFx,
.masc.dancing[data-dance="dance.jelly"] .mFxF {
  animation: dJelFx 1.5s both;
}
@keyframes dJelFx {
  0%,
  7% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  15% {
    transform: translateY(-10px);
    animation-timing-function: ease-in;
  }
  22%,
  100% {
    transform: translateY(0);
  }
}
.masc.dancing[data-dance="dance.robot"] .mFx,
.masc.dancing[data-dance="dance.robot"] .mFxF {
  animation: dRobFx 1.6s steps(1, end) both;
}
@keyframes dRobFx {
  0% {
    transform: translate(0, 0);
  }
  12.5%,
  62.5% {
    transform: translate(-4px, 0);
  }
  25%,
  75% {
    transform: translate(4px, 0);
  }
  37.5% {
    transform: translate(0, 2px);
  }
  50% {
    transform: translate(0, -4px);
  }
  87.5%,
  100% {
    transform: translate(0, 0);
  }
}
.masc.dancing[data-dance="dance.bounce"] .mFx,
.masc.dancing[data-dance="dance.bounce"] .mFxF {
  animation: dBncFx 1.8s both;
}
@keyframes dBncFx {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-in-out;
  }
  7% {
    transform: translateY(-2px);
    animation-timing-function: ease-in;
  }
  13% {
    transform: translateY(5px);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }
  19% {
    transform: translateY(-8px);
    animation-timing-function: ease-out;
  }
  27% {
    transform: translateY(-15px);
    animation-timing-function: ease-in;
  }
  34% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }
  38% {
    transform: translateY(6px);
    animation-timing-function: ease-out;
  }
  42% {
    transform: translateY(7px);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }
  48% {
    transform: translateY(-14px);
    animation-timing-function: ease-out;
  }
  59% {
    transform: translateY(-30px);
    animation-timing-function: ease-in;
  }
  68% {
    transform: translateY(-11px);
    animation-timing-function: ease-in;
  }
  73% {
    transform: translateY(5px);
    animation-timing-function: ease-out;
  }
  80% {
    transform: translateY(-5px);
    animation-timing-function: ease-in;
  }
  86% {
    transform: translateY(1px);
    animation-timing-function: ease-out;
  }
  92%,
  100% {
    transform: translateY(0);
  }
}
.masc.dancing[data-dance="dance.moon"] .mFx,
.masc.dancing[data-dance="dance.moon"] .mFxF {
  animation: dMoonFx 2s both;
}
@keyframes dMoonFx {
  0%,
  6% {
    transform: translate(0, 0);
    animation-timing-function: linear;
  }
  56% {
    transform: translate(-16px, 0);
    animation-timing-function: ease-in-out;
  }
  66% {
    transform: translate(1px, 0);
    animation-timing-function: ease-out;
  }
  72%,
  100% {
    transform: translate(0, 0);
  }
}
.masc.dancing[data-dance="dance.wave"] .mFx,
.masc.dancing[data-dance="dance.wave"] .mFxF {
  animation: dWvFx 2s both;
}
@keyframes dWvFx {
  0%,
  70% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  78% {
    transform: translateY(-9px);
    animation-timing-function: ease-in;
  }
  86%,
  100% {
    transform: translateY(0);
  }
}
.masc.dancing[data-dance="dance.ballet"] .mFx,
.masc.dancing[data-dance="dance.ballet"] .mFxF {
  animation: dBalFx 1.8s ease-in-out both;
}
@keyframes dBalFx {
  0%,
  100% {
    transform: translateY(0);
  }
  11%,
  60% {
    transform: translateY(-8px);
  }
  68% {
    transform: translateY(0);
  }
  77%,
  86% {
    transform: translateY(3px);
  }
}
/* static previews (closet tiles) and calm mode: everything holds its resting pose */
.masc.still * {
  animation: none !important;
  transition: none !important;
}
/* End of css/outfits.css */