/* ---------- mascot (Linky the octopus): moods are data-* attributes set by setMood() */
.masc {
  position: relative;
  width: var(--ms, 90px);
  aspect-ratio: 120/130;
  flex: none;
  pointer-events: none;
  --gx: 0;
  --gy: 0;
}
.masc svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.masc g,
.masc path,
.masc ellipse,
.masc rect,
.masc circle,
.masc text {
  transform-box: view-box;
}
.masc .mRoot {
  transform-origin: 60px 120px;
}
.masc .mBody {
  transform-origin: 60px 118px;
  animation: mBob 2.6s ease-in-out infinite;
}
@keyframes mBob {
  50% {
    transform: translateY(-3px) scale(1.025, 0.975);
  }
}
.masc .mHead {
  transform-origin: 60px 86px;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 0.35s,
    rotate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.masc .hd {
  fill: url(#mgB);
  stroke: #8f2752;
  stroke-width: 2.5;
}
.masc .hl {
  fill: #fff;
  opacity: 0.45;
}
.masc .hl2 {
  fill: #fff;
  opacity: 0.5;
}
.masc .ao {
  fill: none;
  stroke: #a8305f;
  stroke-width: 6;
  opacity: 0.45;
  stroke-linecap: round;
}
.masc .ck {
  fill: #ff2d6b;
  opacity: 0.45;
  transition: opacity 0.3s;
}
/* tentacles: tapered front ones, darker ones behind */
.masc .tn path {
  fill: none;
  stroke-linecap: round;
}
.masc .tn .to {
  stroke: #8f2752;
}
.masc .tn .tf {
  stroke: url(#mgT);
}
.masc .tb path {
  fill: none;
  stroke-linecap: round;
}
.masc .tb .tbo {
  stroke: #7a1f45;
  stroke-width: 12;
}
.masc .tb .tbf {
  stroke: #c13a69;
  stroke-width: 9;
}
.masc .tn,
.masc .tb {
  animation: tnW 1.9s ease-in-out infinite alternate;
  transition: rotate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.masc .tn1 {
  transform-origin: 36px 82px;
}
.masc .tn2 {
  transform-origin: 50px 88px;
  animation-delay: -0.5s;
}
.masc .tn3 {
  transform-origin: 70px 88px;
  animation-delay: -1s;
}
.masc .tn4 {
  transform-origin: 84px 82px;
  animation-delay: -0.2s;
}
.masc .tb {
  animation-duration: 2.6s;
}
.masc .tb1 {
  transform-origin: 43px 86px;
  animation-delay: -0.7s;
}
.masc .tb2 {
  transform-origin: 60px 90px;
  animation-delay: -1.4s;
}
.masc .tb3 {
  transform-origin: 77px 86px;
  animation-delay: -0.3s;
}
@keyframes tnW {
  from {
    transform: rotate(-6deg);
  }
  to {
    transform: rotate(6deg);
  }
}
.masc[data-tn="splay"] .tn1 {
  rotate: 28deg;
}
.masc[data-tn="splay"] .tn2 {
  rotate: 14deg;
}
.masc[data-tn="splay"] .tn3 {
  rotate: -14deg;
}
.masc[data-tn="splay"] .tn4 {
  rotate: -28deg;
}
.masc[data-tn="splay"] .tb1 {
  rotate: 16deg;
}
.masc[data-tn="splay"] .tb3 {
  rotate: -16deg;
}
.masc[data-tn="in"] .tn1 {
  rotate: -18deg;
}
.masc[data-tn="in"] .tn2 {
  rotate: -8deg;
}
.masc[data-tn="in"] .tn3 {
  rotate: 8deg;
}
.masc[data-tn="in"] .tn4 {
  rotate: 18deg;
}
.masc[data-tn="spread"] .tn1 {
  rotate: 24deg;
}
.masc[data-tn="spread"] .tn2 {
  rotate: 10deg;
}
.masc[data-tn="spread"] .tn3 {
  rotate: -10deg;
}
.masc[data-tn="spread"] .tn4 {
  rotate: -24deg;
}
/* arms */
.masc .tp {
  fill: none;
  stroke: url(#mgT);
  stroke-width: 11;
  stroke-linecap: round;
}
.masc .tpo {
  fill: none;
  stroke: #8f2752;
  stroke-width: 14;
  stroke-linecap: round;
}
.masc .tp.tip {
  stroke-width: 7.5;
  stroke: #f37098;
}
.masc .tpo.tip {
  stroke-width: 10.5;
}
.masc .sk {
  fill: #ffb3c8;
}
.masc .cd {
  fill: url(#mgC);
  stroke: #ffe39a;
  stroke-width: 2;
}
.masc .mArm {
  transform-origin: 84px 80px;
  animation: mArm 1.6s ease-in-out infinite alternate;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mArm {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(5deg);
  }
}
.masc .mCard {
  transform-origin: 108px 47.5px;
  transition: rotate 0.35s;
}
.masc .mArmL {
  transform-origin: 31px 79px;
  animation: mArmL 2.2s ease-in-out infinite alternate;
}
@keyframes mArmL {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(6deg);
  }
}
.masc .al-up,
.masc .al-chin {
  display: none;
}
.masc[data-al="wave"] .al-rest,
.masc[data-al="point"] .al-rest,
.masc[data-al="fist"] .al-rest,
.masc[data-al="chin"] .al-rest {
  display: none;
}
.masc[data-al="wave"] .al-up,
.masc[data-al="point"] .al-up,
.masc[data-al="fist"] .al-up,
.masc[data-al="chin"] .al-chin {
  display: inline;
}
.masc[data-al="wave"] .mArmL {
  transform: rotate(0);
  animation: mWave 0.3s ease-in-out infinite alternate;
}
@keyframes mWave {
  from {
    transform: rotate(-14deg);
  }
  to {
    transform: rotate(12deg);
  }
}
.masc[data-al="point"] .mArmL {
  transform: rotate(-8deg) translateY(-4px);
  animation: mPoint 0.5s ease-in-out infinite alternate;
}
@keyframes mPoint {
  from {
    transform: rotate(-8deg) translateY(-4px);
  }
  to {
    transform: rotate(-4deg) translateY(-7px);
  }
}
.masc[data-al="fist"] .mArmL {
  transform: rotate(-8deg);
  animation: mFist 0.9s ease-in-out infinite alternate;
}
@keyframes mFist {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(-2deg) translateY(-2px);
  }
}
.masc[data-al="chin"] .mArmL {
  transform: rotate(0);
  animation: mChin 1.1s ease-in-out infinite alternate;
}
@keyframes mChin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-5deg);
  }
}
.masc[data-arm="low"] .mArm {
  animation: none;
  transform: translate(-14px, 14px) rotate(30deg);
}
.masc[data-arm="low"] .mCard {
  rotate: -30deg;
}
.masc[data-arm="chest"] .mArm {
  animation: none;
  transform: translate(-12px, 10px) rotate(25deg);
}
.masc[data-arm="show"] .mArm {
  transform: rotate(-16deg) translate(1px, -3px);
  animation: mShow 0.9s ease-in-out infinite alternate;
}
@keyframes mShow {
  from {
    transform: rotate(-14deg) translate(1px, -2px);
  }
  to {
    transform: rotate(-20deg) translate(2px, -4px);
  }
}
.masc[data-arm="up"] .mArmW {
  clip-path: url(#mcNH);
}
.masc[data-arm="up"] .mArm {
  transform: translate(11px, -34px) rotate(-3deg);
  animation: mUp 0.42s ease-in-out infinite alternate;
}
@keyframes mUp {
  from {
    transform: translate(10px, -33px) rotate(-1deg);
  }
  to {
    transform: translate(12px, -36px) rotate(-5deg);
  }
}
.masc[data-arm="flick"] .mArm {
  animation: none;
  transform: rotate(-16deg);
}
.masc[data-arm="flick"] .mCard {
  animation: mFlip 2.2s ease-in-out infinite;
}
@keyframes mFlip {
  0%,
  55%,
  100% {
    transform: scaleX(1);
  }
  65% {
    transform: scaleX(-1) rotate(-8deg);
  }
  78% {
    transform: scaleX(1) rotate(6deg);
  }
}
/* eyes */
.masc .ew {
  fill: #fff;
}
.masc .eye {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.masc .eL {
  transform-origin: 46px 55px;
}
.masc .eR {
  transform-origin: 74px 55px;
}
.masc .pup {
  --px: calc(var(--gx) * var(--gk, 1) + var(--ox, 1));
  --py: calc(var(--gy) * var(--gk, 1) + var(--oy, 0.6));
  transform: translate(calc(var(--px) * 1px), calc(var(--py) * 1px)) scale(var(--ps, 1));
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.masc .eL .pup {
  transform-origin: 46px 56px;
}
.masc .eR .pup {
  transform-origin: 74px 56px;
}
.masc .pc {
  fill: #2b1d3d;
}
.masc .g1,
.masc .g2 {
  fill: #fff;
}
.masc .ps {
  display: none;
  fill: #ffc531;
  stroke: #e08a00;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.masc .wet {
  display: none;
  fill: #9fe4ff;
  opacity: 0.85;
}
.masc .lid rect {
  fill: url(#mgB);
}
.masc .lid path {
  stroke: #8f2752;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.masc .lid {
  transform: translateY(var(--lid, -28px));
  transition: transform 0.25s;
}
/* blinks are scheduled from mascot.js: .blk closes and opens (60 + 80 ms), .blkO opens from closed to hide an eye swap */
.masc.blk .lid {
  animation: mBlink 0.14s ease-in-out;
}
@keyframes mBlink {
  0%,
  100% {
    transform: translateY(var(--lid, -28px));
  }
  43% {
    transform: translateY(0);
  }
}
.masc.blkO .lid {
  animation: mBlinkO 0.13s ease-out;
}
@keyframes mBlinkO {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--lid, -28px));
  }
}
.masc.blink2 .lid {
  animation: mBlink2 0.5s;
}
@keyframes mBlink2 {
  0%,
  100% {
    transform: translateY(var(--lid, -28px));
  }
  20%,
  70% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-28px);
  }
}
.masc .ea,
.masc .xg,
.masc .mo {
  display: none;
}
.masc .ea path {
  fill: none;
  stroke: #3a1530;
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.masc .ea-hrt path {
  fill: #ff2f5f;
  stroke: #c8103e;
  stroke-width: 1.2;
}
.masc .ea-dz .sp {
  fill: none;
  stroke: #3a1530;
  stroke-width: 3.4;
  stroke-linecap: round;
  animation: mSpin 1s linear infinite;
}
.masc .ea-dz .sp1 {
  transform-origin: 46px 55px;
}
.masc .ea-dz .sp2 {
  transform-origin: 74px 55px;
}
@keyframes mSpin {
  to {
    transform: rotate(360deg);
  }
}
.masc .ea-det .wd {
  fill: url(#mgB);
  stroke: none;
}
.masc .ea-det .wl {
  stroke: #3a1530;
  stroke-width: 2.6;
}
.masc[data-ey="big"] {
  --ps: 0.86;
}
.masc[data-ey="big"] .eye {
  transform: scale(1.1);
}
.masc[data-ey="sml"] {
  --ps: 0.5;
  --gk: 0.6;
}
.masc[data-ey="sml"] .eye {
  transform: scale(1.14);
}
.masc[data-ey="down"],
.masc[data-ey="wet"] {
  --gk: 0;
  --ox: 0;
  --oy: 3.4;
}
.masc[data-ey="wet"] .wet {
  display: inline;
}
.masc[data-ey="upl"] {
  --gk: 0;
  --ox: -2.8;
  --oy: -3.6;
}
.masc[data-ey="smug"] {
  --lid: -17px;
  --gk: 0;
  --ox: 0.5;
  --oy: -2.5;
}
.masc[data-ey="smug"] .lid {
  animation: none;
}
.masc[data-ey="star"] .pc,
.masc[data-ey="star"] .g2 {
  display: none;
}
.masc[data-ey="star"] .ps {
  display: inline;
}
.masc[data-ey="star"] .pup {
  animation: mStarP 0.6s ease-in-out infinite alternate;
}
@keyframes mStarP {
  from {
    transform: translate(calc(var(--px) * 1px), calc(var(--py) * 1px)) scale(0.92) rotate(-8deg);
  }
  to {
    transform: translate(calc(var(--px) * 1px), calc(var(--py) * 1px)) scale(1.12) rotate(8deg);
  }
}
.masc[data-ey="hap"] .eye,
.masc[data-ey="hrt"] .eye,
.masc[data-ey="dz"] .eye,
.masc[data-ey="slp"] .eye,
.masc[data-ey="eek"] .eye,
.masc[data-ey="shades"] .eye,
.masc[data-ey="wnk"] .eR {
  display: none;
}
.masc[data-ey="hap"] .ea-hap,
.masc[data-ey="wnk"] .ea-wnk,
.masc[data-ey="hrt"] .ea-hrt,
.masc[data-ey="dz"] .ea-dz,
.masc[data-ey="slp"] .ea-slp,
.masc[data-ey="eek"] .ea-eek,
.masc[data-ey="det"] .ea-det {
  display: inline;
}
.masc[data-ey="hrt"] .ea-hrt {
  transform-origin: 60px 55px;
  animation: mBeat 0.5s ease-in-out infinite alternate;
}
@keyframes mBeat {
  to {
    transform: scale(1.12);
  }
}
.masc[data-ey="shades"] .x-shades {
  display: inline;
}
.masc .x-shades rect {
  fill: #1d1530;
}
.masc .x-shades .gl {
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.55;
}
.masc[data-ey="shades"] .x-shades {
  transform-origin: 60px 54px;
  animation: mShades 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mShades {
  from {
    transform: translateY(-26px) rotate(-12deg);
    opacity: 0;
  }
}
/* brows */
.masc .br path {
  fill: none;
  stroke: #3a1530;
  stroke-width: 4.6;
  stroke-linecap: round;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.masc .bL {
  transform-origin: 46px 38px;
}
.masc .bR {
  transform-origin: 74px 38px;
}
.masc[data-br="up"] .br path {
  transform: translateY(-5px);
}
.masc[data-br="worry"] .bL {
  transform: translateY(-1px) rotate(-24deg);
}
.masc[data-br="worry"] .bR {
  transform: translateY(-1px) rotate(24deg);
}
.masc[data-br="angry"] .bL {
  transform: translateY(4px) rotate(24deg);
}
.masc[data-br="angry"] .bR {
  transform: translateY(4px) rotate(-24deg);
}
.masc[data-br="think"] .bL {
  transform: translateY(2px) rotate(6deg);
}
.masc[data-br="think"] .bR {
  transform: translateY(-6px) rotate(-12deg);
}
.masc[data-br="wnk"] .bL {
  transform: translateY(-4px);
}
.masc[data-br="wnk"] .bR {
  transform: translateY(3px) rotate(-6deg);
}
.masc[data-br="relax"] .br path {
  transform: translateY(3px);
}
.masc[data-ey="hrt"] .br path,
.masc[data-ey="shades"] .br path {
  transform: translateY(-6px);
}
/* mouths */
.masc .mo path,
.masc path.mo {
  fill: none;
  stroke: #3a1530;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.masc .mo .mf,
.masc .mo path.mf {
  fill: #4a1636;
  stroke: none;
}
.masc .mo .tg,
.masc .mo path.tg {
  fill: #ff7096;
  stroke: none;
}
.masc .mo-tng path.tg {
  stroke: #3a1530;
  stroke-width: 2.4;
}
.masc .mo-tng .tl {
  stroke: #d84a74;
  stroke-width: 1.4;
}
.masc .mo-grt rect {
  fill: #fff;
  stroke: #3a1530;
  stroke-width: 2.6;
}
.masc .mo-grt path {
  stroke-width: 1.6;
}
.masc:not([data-mo]) .mo-hap,
.masc[data-mo="hap"] .mo-hap,
.masc[data-mo="big"] .mo-big,
.masc[data-mo="o"] .mo-o,
.masc[data-mo="sad"] .mo-sad,
.masc[data-mo="wail"] .mo-wail,
.masc[data-mo="wav"] .mo-wav,
.masc[data-mo="tng"] .mo-tng,
.masc[data-mo="grt"] .mo-grt,
.masc[data-mo="smk"] .mo-smk,
.masc[data-mo="grin"] .mo-grin,
.masc[data-mo="flt"] .mo-flt,
.masc[data-mo="set"] .mo-set,
.masc[data-mo="yawn"] .mo-yawn {
  display: inline;
}
.masc.talk .mo {
  display: none !important;
}
.masc.talk .mo-talk {
  display: inline !important;
}
.masc .mo-talk {
  transform-origin: 60px 70px;
  animation: mTalk 0.19s ease-in-out infinite alternate;
}
@keyframes mTalk {
  from {
    transform: scaleY(0.3);
  }
  to {
    transform: scaleY(1);
  }
}
.masc .mo-o,
.masc .mo-big {
  transform-origin: 60px 74px;
  animation: mMouthIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mMouthIn {
  from {
    transform: scale(0.3);
  }
}
.masc .mo-wail {
  transform-origin: 60px 78px;
  animation: mWail 0.22s ease-in-out infinite alternate;
}
@keyframes mWail {
  from {
    transform: scale(1, 0.85);
  }
  to {
    transform: scale(1.05, 1.08);
  }
}
.masc .mo-yawn {
  transform-origin: 60px 72px;
  animation: mYawn 3.2s ease-in-out infinite;
}
@keyframes mYawn {
  0%,
  100% {
    transform: scale(0.45, 0.35);
  }
  40%,
  60% {
    transform: scale(1);
  }
}
.masc .mo-wav {
  transform-origin: 60px 75px;
  animation: mWav 0.14s linear infinite alternate;
}
@keyframes mWav {
  to {
    transform: translateX(1px);
  }
}
/* extras */
.masc[data-x~="blush"] .ck {
  opacity: 0.72;
}
.masc[data-x~="sweat"] .x-sweat,
.masc[data-x~="tears"] .x-tears,
.masc[data-x~="spark"] .x-spark,
.masc[data-x~="hearts"] .x-hearts,
.masc[data-x~="zz"] .x-zz,
.masc[data-x~="q"] .x-q,
.masc[data-x~="bulb"] .x-bulb {
  display: inline;
}
.masc .x-sweat path {
  fill: #9fe4ff;
  stroke: #fff;
  stroke-width: 1.2;
}
.masc .x-sweat {
  transform-origin: 94px 28px;
  animation: mSweat 1.2s ease-in infinite;
}
@keyframes mSweat {
  0% {
    transform: translateY(-3px) scale(0.6);
    opacity: 0;
  }
  20% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}
.masc .x-tears path {
  fill: none;
  stroke: #9fe4ff;
  stroke-width: 4.5;
  stroke-linecap: round;
  opacity: 0.9;
  stroke-dasharray: 6 4;
  animation: mStream 0.5s linear infinite;
}
@keyframes mStream {
  to {
    stroke-dashoffset: -10;
  }
}
.masc .x-spark path {
  fill: #ffe27a;
  stroke: #fff;
  stroke-width: 1.2;
  animation: mTw 0.7s ease-in-out infinite alternate;
}
.masc .x-spark path:nth-child(1) {
  transform-origin: 12px 26px;
}
.masc .x-spark path:nth-child(2) {
  transform-origin: 108px 18px;
  animation-delay: -0.3s;
}
.masc .x-spark path:nth-child(3) {
  transform-origin: 13px 66px;
  animation-delay: -0.5s;
}
@keyframes mTw {
  from {
    transform: scale(0.45) rotate(0);
    opacity: 0.6;
  }
  to {
    transform: scale(1.1) rotate(45deg);
    opacity: 1;
  }
}
.masc .x-hearts path {
  fill: #ff3d6e;
  stroke: #fff;
  stroke-width: 1;
}
.masc .x-hearts .h1 {
  animation: mFloat 1.6s ease-out infinite;
}
.masc .x-hearts .h2 {
  animation: mFloat 1.6s ease-out -0.8s infinite;
}
@keyframes mFloat {
  0% {
    transform: translateY(8px) scale(0.5);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateY(-14px) scale(1.1);
    opacity: 0;
  }
}
.masc .x-zz text,
.masc .x-q text {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  fill: #fff;
  stroke: #2b1d3d;
  stroke-width: 3;
  paint-order: stroke;
}
.masc .x-zz .z1 {
  font-size: 18px;
  animation: mFloat 2.4s ease-out infinite;
}
.masc .x-zz .z2 {
  font-size: 24px;
  animation: mFloat 2.4s ease-out -1.2s infinite;
}
.masc .x-q text {
  font-size: 26px;
  fill: #ffd34d;
}
.masc .x-q {
  transform-origin: 100px 14px;
  animation: mQ 1s ease-in-out infinite alternate;
}
@keyframes mQ {
  from {
    transform: rotate(-10deg) translateY(0);
  }
  to {
    transform: rotate(10deg) translateY(-3px);
  }
}
.masc .x-bulb circle {
  fill: #ffe066;
  stroke: #e8a500;
  stroke-width: 1.6;
}
.masc .x-bulb rect {
  fill: #c9c2d8;
  stroke: #8d84a3;
  stroke-width: 1;
}
.masc .x-bulb .ry {
  stroke: #ffe066;
  stroke-width: 2.6;
  stroke-linecap: round;
  fill: none;
  animation: mTw 0.4s ease-in-out infinite alternate;
  transform-origin: 36px -3px;
}
.masc .x-bulb {
  transform-origin: 36px 10px;
  animation: mBulb 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mBulb {
  from {
    transform: scale(0) translateY(8px);
  }
}
/* small mascots (coach, map): props a bit bigger so they still read */
.masc.sm .x-sweat,
.masc.sm .x-q,
.masc.sm .x-zz,
.masc.sm .x-hearts,
.masc.sm .x-bulb,
.masc.sm .x-spark {
  scale: 1.45;
}
.masc.sm .x-zz {
  transform-origin: 92px 18px;
}
.masc.sm .x-hearts {
  transform-origin: 100px 24px;
}
.masc.sm .x-spark {
  transform-origin: 60px 45px;
}
/* body */
.masc[data-bd="hop"] .mBody {
  animation: mHop 0.5s ease-out infinite;
}
@keyframes mHop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  15% {
    transform: translateY(0) scale(1.08, 0.9);
  }
  50% {
    transform: translateY(-12px) scale(0.95, 1.06);
  }
}
.masc[data-bd="shiver"] .mRoot {
  animation: mShiver 0.07s linear infinite alternate;
}
@keyframes mShiver {
  from {
    transform: translateX(-1.3px);
  }
  to {
    transform: translateX(1.3px);
  }
}
.masc[data-bd="shiver"] .mBody {
  animation: none;
  transform: scale(0.93, 1.08);
}
.masc[data-bd="shiver"] .tn {
  animation-duration: 0.3s;
}
.masc[data-bd="squash"] .mBody {
  animation: mSquash 0.5s ease-in-out infinite alternate;
  transform: scale(1.08, 0.9);
}
@keyframes mSquash {
  from {
    transform: scale(1.08, 0.9);
  }
  to {
    transform: scale(1.1, 0.88) translateY(1px);
  }
}
.masc[data-bd="droop"] .mBody {
  animation: mDroop 3.6s ease-in-out infinite;
}
@keyframes mDroop {
  0%,
  100% {
    transform: translateY(1px);
  }
  50% {
    transform: translateY(2.5px) scale(1.01, 0.98);
  }
}
.masc[data-bd="droop"] .mHead {
  translate: 0 5px;
  scale: 1.03 0.92;
  rotate: -4deg;
}
.masc[data-bd="droop"] .tn {
  animation-duration: 3.2s;
}
.masc[data-bd="bounce"] .mBody {
  animation: mBounce 0.34s ease-in-out infinite alternate;
}
@keyframes mBounce {
  from {
    transform: translateY(0) scale(1.04, 0.96);
  }
  to {
    transform: translateY(-7px) scale(0.97, 1.03);
  }
}
.masc[data-bd="bounce"] .mHead {
  animation: mRock 0.68s ease-in-out infinite alternate;
}
@keyframes mRock {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(5deg);
  }
}
.masc[data-bd="tilt"] .mHead {
  transform: rotate(-9deg);
}
.masc[data-bd="tiltR"] .mHead {
  transform: rotate(9deg);
}
.masc[data-bd="think"] .mHead {
  transform: rotate(-7deg) translateX(-1px);
}
.masc[data-bd="sway"] .mHead {
  animation: mRock 1.1s ease-in-out infinite alternate;
}
.masc[data-bd="wobble"] .mHead {
  animation: mWob 0.9s ease-in-out infinite;
}
@keyframes mWob {
  0%,
  100% {
    transform: rotate(-9deg) translateX(-2px);
  }
  50% {
    transform: rotate(9deg) translateX(2px);
  }
}
.masc[data-bd="sleepy"] .mHead {
  transform: rotate(12deg);
}
.masc[data-bd="sleepy"] .mBody {
  animation: mBreathe 3.2s ease-in-out infinite;
}
@keyframes mBreathe {
  50% {
    transform: scale(1.04, 0.97) translateY(1px);
  }
}
.masc[data-bd="proud"] .mHead {
  transform: rotate(-6deg) translateY(-2px);
}
.masc[data-bd="proud"] .mBody {
  animation: mBounce 0.5s ease-in-out infinite alternate;
}
.masc[data-bd="lean"] .mHead {
  transform: translateY(2px) rotate(3deg);
}
.masc.jump {
  animation: mJump 0.55s cubic-bezier(0.3, 1.5, 0.6, 1);
}
@keyframes mJump {
  30% {
    transform: translateY(-16px) scale(0.95, 1.07);
  }
  60% {
    transform: translateY(0) scale(1.08, 0.92);
  }
}
body.calm .masc * {
  animation: none !important;
}
/* End of css/mascot.css */