/* =====================================================================
   Mascot cast: expressions (data-mood on the svg), idle loops,
   silly actions (data-act on .mascot) and one-shot gags (.do-*).
   Everything animates transform/opacity on SVG groups.
   ===================================================================== */
.mascot {
  display: inline-block;
  position: relative;
  width: var(--ms, 72px);
  height: calc(var(--ms, 72px) * 1.103);
  flex-shrink: 0;
  transform-origin: 50% 90%;
}
.mascot.pokeable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mascot-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform-origin: 50% 90%;
}
.mascot-svg g,
.mascot-svg path,
.mascot-svg ellipse,
.mascot-svg circle,
.mascot-svg rect,
.mascot-svg text {
  transform-box: fill-box;
}
.mascot-svg .m-all {
  transform-box: view-box;
  transform-origin: 60px 116px;
}
.mascot-svg .m-bob {
  transform-box: view-box;
  transform-origin: 60px 112px;
  animation: mBob 2.6s ease-in-out infinite;
}
.mascot-svg .m-top {
  transform-origin: 50% 100%;
}
.mascot-svg .m-leaf {
  animation: mSway 3.2s ease-in-out infinite;
}
.mascot-svg .m-wobble {
  animation: mWob 2.2s ease-in-out infinite;
}
.mascot-svg .m-tuft {
  animation: mSway 1.8s ease-in-out infinite;
}
.mascot-svg .m-bulb {
  animation: mBulb 1.6s steps(1) infinite;
}
.who-blaze .m-body,
.who-blaze .m-inner {
  transform-origin: 50% 100%;
  animation: mFlick 0.9s ease-in-out infinite alternate;
}
.who-blaze .m-inner {
  animation-duration: 0.6s;
}
.mascot-svg .m-arm {
  transform-origin: 50% 15%;
  transition: transform var(--dur-4) var(--ease-spring);
}
.mascot-svg .m-acc .acc-hat {
  transform-box: view-box;
  transform-origin: 60px 34px;
  transform: translateY(var(--hy)) scale(var(--hs));
  transition: transform var(--dur-4) var(--ease-spring);
}
.mascot-svg.has-hat .m-top {
  opacity: 0;
}
.mascot-svg .a-prop {
  transform-origin: 50% 50%;
  animation: aProp 0.35s linear infinite;
}
.mascot-svg .a-pom {
  transform-origin: 50% 100%;
  animation: mWob 1.4s ease-in-out infinite;
}

/* ---------- expressions ---------- */
.mascot-svg .f-eyes,
.mascot-svg .f-m,
.mascot-svg .f-brows,
.mascot-svg .f-tears,
.mascot-svg .f-sweat,
.mascot-svg .f-blush,
.mascot-svg .f-lids {
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}
.mascot-svg .f-open {
  transform-origin: 50% 50%;
  animation: mBlink 4.6s infinite;
}
.mascot-svg .f-pupils g,
.mascot-svg .f-lids path,
.mascot-svg .f-brows path {
  transition: transform var(--dur-3) var(--ease-out);
}
.mascot-svg .f-pl,
.mascot-svg .f-pr {
  transform-origin: 50% 50%;
}
.mascot-svg .f-lids path {
  transform-origin: 50% 100%;
}
.mascot-svg .f-brows path {
  transform-origin: 50% 50%;
}

.mascot-svg[data-mood="idle"] .f-open,
.mascot-svg[data-mood="idle"] .f-m-idle {
  opacity: 1;
}
.mascot-svg[data-mood="happy"] .f-arc,
.mascot-svg[data-mood="happy"] .f-m-happy {
  opacity: 1;
}
.mascot-svg[data-mood="laugh"] .f-squeeze,
.mascot-svg[data-mood="laugh"] .f-m-laugh {
  opacity: 1;
}
.mascot-svg[data-mood="laugh"] .m-bob {
  animation: mShake 0.18s linear infinite;
}
.mascot-svg[data-mood="sad"] .f-open,
.mascot-svg[data-mood="sad"] .f-m-sad,
.mascot-svg[data-mood="sad"] .f-brows {
  opacity: 1;
}
.mascot-svg[data-mood="sad"] .f-pupils g {
  transform: translateY(3px);
}
.mascot-svg[data-mood="sad"] .f-brow-l,
.mascot-svg[data-mood="cry"] .f-brow-l {
  transform: rotate(-16deg) translateY(2px);
}
.mascot-svg[data-mood="sad"] .f-brow-r,
.mascot-svg[data-mood="cry"] .f-brow-r {
  transform: rotate(16deg) translateY(2px);
}
.mascot-svg[data-mood="sad"] .m-top {
  transform: rotate(-18deg);
  animation: none;
}
.mascot-svg[data-mood="cry"] .f-squeeze,
.mascot-svg[data-mood="cry"] .f-m-cry,
.mascot-svg[data-mood="cry"] .f-brows,
.mascot-svg[data-mood="cry"] .f-tears {
  opacity: 1;
}
.mascot-svg[data-mood="cry"] .f-tear {
  transform-origin: 50% 0%;
  animation: mTear 0.9s ease-in infinite;
}
.mascot-svg[data-mood="cry"] .f-tear.t2 {
  animation-delay: -0.45s;
}
.mascot-svg[data-mood="cry"] .m-bob {
  animation: mSob 0.5s ease-in-out infinite;
}
.mascot-svg[data-mood="surprised"] .f-open,
.mascot-svg[data-mood="surprised"] .f-m-o,
.mascot-svg[data-mood="surprised"] .f-brows {
  opacity: 1;
}
.mascot-svg[data-mood="surprised"] .f-pl,
.mascot-svg[data-mood="surprised"] .f-pr {
  transform: scale(0.62);
}
.mascot-svg[data-mood="surprised"] .f-brows path,
.mascot-svg[data-mood="shocked"] .f-brows path {
  transform: translateY(-7px);
}
.mascot-svg[data-mood="wink"] .f-wink,
.mascot-svg[data-mood="wink"] .f-m-smirk {
  opacity: 1;
}
.mascot-svg[data-mood="love"] .f-heart,
.mascot-svg[data-mood="love"] .f-m-idle,
.mascot-svg[data-mood="love"] .f-blush {
  opacity: 1;
}
.mascot-svg[data-mood="love"] .f-heart path {
  transform-origin: 50% 50%;
  animation: mBeat 0.7s ease-in-out infinite;
}
.mascot-svg[data-mood="dizzy"] .f-spiral,
.mascot-svg[data-mood="dizzy"] .f-m-wavy,
.mascot-svg[data-mood="dizzy"] .x-stars {
  opacity: 1;
}
.mascot-svg[data-mood="dizzy"] .e-spin {
  transform-origin: 50% 50%;
  animation: mSpin 0.9s linear infinite;
}
.mascot-svg[data-mood="dizzy"] .m-bob {
  animation: mDizzy 1.2s ease-in-out infinite;
}
.mascot-svg[data-mood="sleepy"] .f-open,
.mascot-svg[data-mood="sleepy"] .f-m-small,
.mascot-svg[data-mood="sleepy"] .f-lids {
  opacity: 1;
}
.mascot-svg[data-mood="sleepy"] .f-lids path {
  transform: translateY(4px) scaleY(1.25);
}
.mascot-svg[data-mood="sleepy"] .f-open {
  animation: none;
}
.mascot-svg[data-mood="determined"] .f-open,
.mascot-svg[data-mood="determined"] .f-m-grin,
.mascot-svg[data-mood="determined"] .f-brows,
.mascot-svg[data-mood="determined"] .f-lids {
  opacity: 1;
}
.mascot-svg[data-mood="determined"] .f-lid-l {
  transform: translateY(-3px) rotate(10deg);
}
.mascot-svg[data-mood="determined"] .f-lid-r {
  transform: translateY(-3px) rotate(-10deg);
}
.mascot-svg[data-mood="determined"] .f-brow-l {
  transform: rotate(16deg) translateY(3px);
}
.mascot-svg[data-mood="determined"] .f-brow-r {
  transform: rotate(-16deg) translateY(3px);
}
.mascot-svg[data-mood="smug"] .f-open,
.mascot-svg[data-mood="smug"] .f-m-smirk,
.mascot-svg[data-mood="smug"] .f-lids,
.mascot-svg[data-mood="smug"] .f-brows {
  opacity: 1;
}
.mascot-svg[data-mood="smug"] .f-brow-l {
  opacity: 0;
}
.mascot-svg[data-mood="smug"] .f-brow-r {
  transform: translateY(-6px) rotate(-10deg);
}
.mascot-svg[data-mood="smug"] .f-pupils g {
  transform: translateX(3px);
}
.mascot-svg[data-mood="shocked"] .f-open,
.mascot-svg[data-mood="shocked"] .f-m-shock,
.mascot-svg[data-mood="shocked"] .f-brows,
.mascot-svg[data-mood="shocked"] .f-sweat {
  opacity: 1;
}
.mascot-svg[data-mood="shocked"] .f-pl,
.mascot-svg[data-mood="shocked"] .f-pr {
  transform: scale(0.42);
}
.mascot-svg[data-mood="shocked"] .m-top {
  transform: scaleY(1.25);
  animation: none;
}
.mascot-svg[data-mood="shocked"] .f-sweat {
  transform-origin: 50% 0;
  animation: mTear 1.2s ease-in infinite;
}
.mascot-svg[data-mood="think"] .f-open,
.mascot-svg[data-mood="think"] .f-m-flat {
  opacity: 1;
}
.mascot-svg[data-mood="think"] .f-pupils g {
  transform: translate(3px, -3px);
}
.mascot-svg[data-mood="think"] .m-arm-r {
  transform: rotate(-150deg) translate(4px, 10px);
}
.mascot-svg[data-mood="happy"] .m-arm-l,
.mascot-svg[data-mood="laugh"] .m-arm-l {
  transform: rotate(40deg) translate(-2px, -8px);
}
.mascot-svg[data-mood="happy"] .m-arm-r,
.mascot-svg[data-mood="laugh"] .m-arm-r {
  transform: rotate(-40deg) translate(2px, -8px);
}
.mascot-svg[data-mood="happy"] .m-arm-r {
  animation: aWave 0.5s ease-in-out 2 alternate;
}

/* extras hidden until an action/mood needs them */
.mascot-svg .x {
  opacity: 0;
  pointer-events: none;
}
.mascot-svg .x-stars .xs {
  transform-box: view-box;
  transform-origin: 60px 20px;
}
.mascot-svg[data-mood="dizzy"] .x-stars .s1 {
  animation: xOrbit 1.2s linear infinite;
}
.mascot-svg[data-mood="dizzy"] .x-stars .s2 {
  animation: xOrbit 1.2s linear infinite -0.4s;
}
.mascot-svg[data-mood="dizzy"] .x-stars .s3 {
  animation: xOrbit 1.2s linear infinite -0.8s;
}

/* ---------- actions (data-act on .mascot) ---------- */
.mascot[data-act="dance"] .m-bob {
  animation: aDance 0.55s ease-in-out infinite alternate;
}
.mascot[data-act="dance"] .m-arm-l {
  animation: aArmL 0.55s ease-in-out infinite alternate;
}
.mascot[data-act="dance"] .m-arm-r {
  animation: aArmR 0.55s ease-in-out infinite alternate;
}
.mascot[data-act="dance"] .m-foot:first-of-type {
  animation: aStomp 0.55s ease-in-out infinite alternate;
}

.mascot[data-act="juggle"] .x-balls {
  opacity: 1;
}
.mascot[data-act="juggle"] .xb {
  transform-box: view-box;
  animation: aJuggle 1.5s linear infinite;
}
.mascot[data-act="juggle"] .xb.b2 {
  animation-delay: -0.5s;
}
.mascot[data-act="juggle"] .xb.b3 {
  animation-delay: -1s;
}
.mascot[data-act="juggle"] .m-arm-l {
  animation: aJugArm 0.375s ease-in-out infinite alternate;
}
.mascot[data-act="juggle"] .m-arm-r {
  animation: aJugArm 0.375s ease-in-out infinite alternate-reverse;
}

.mascot[data-act="sleep"] .x-zzz {
  opacity: 1;
}
.mascot[data-act="sleep"] .xz {
  animation: aZzz 2.4s ease-out infinite;
}
.mascot[data-act="sleep"] .xz.z2 {
  animation-delay: 0.8s;
}
.mascot[data-act="sleep"] .xz.z3 {
  animation-delay: 1.6s;
}
.mascot[data-act="sleep"] .m-bob {
  animation: aBreathe 2.4s ease-in-out infinite;
}

.mascot[data-act="skate"] .x-skate {
  opacity: 1;
}
.mascot[data-act="skate"] .m-all {
  animation: aSkate 3.2s ease-in-out infinite;
}
.mascot[data-act="skate"] .xw {
  transform-origin: 50% 50%;
  animation: mSpin 0.4s linear infinite;
}
.mascot[data-act="skate"] .m-bob {
  animation: none;
}

.mascot[data-act="headbang"] .x-notes {
  opacity: 1;
}
.mascot[data-act="headbang"] .m-bob {
  animation: aNod 0.32s ease-in-out infinite alternate;
}
.mascot[data-act="headbang"] .xn {
  animation: aZzz 1.6s ease-out infinite;
}
.mascot[data-act="headbang"] .xn.n2 {
  animation-delay: 0.8s;
}

.mascot[data-act="spin"] .m-all {
  animation: aSpin 2.6s var(--ease-out) infinite;
}
.mascot[data-act="wave"] .m-arm-r {
  animation: aWaveBig 0.45s ease-in-out infinite alternate;
}
.mascot[data-act="peek"] .m-all {
  animation: aPeek 5s ease-in-out infinite;
}
.mascot[data-act="cry"] .m-bob {
  animation: mSob 0.5s ease-in-out infinite;
}