/* ===== Minty (src/mascot.js): painted frames in a box of 120:130. Sizes in cqw so a pose moves the same at any --ms.
   Frame canvas = box x1.5: 25% spare on each side, 40% on top (zZ, hearts, light bulb), 10% under the feet (feet at 92%). */
.masc {
  position: relative;
  width: var(--ms, 90px);
  aspect-ratio: 120/130;
  flex: none;
  pointer-events: none;
  --gx: 0;
  --gy: 0;
  container-type: inline-size;
}
.masc .mRoot,
.masc .mBody,
.masc .mHead,
.masc .mCard {
  position: absolute;
  inset: 0;
}
.masc .mRoot {
  transform-origin: 50% 92%;
}
.masc .mBody {
  transform-origin: 50% 91%;
  animation: mBob 2.6s ease-in-out infinite;
}
@keyframes mBob {
  50% {
    transform: translateY(-2.1cqw) scale(1.025, 0.975);
  }
}
.masc .mHead {
  transform-origin: 50% 70%;
  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 .mCard {
  transform-origin: 50% 92%;
  rotate: calc(var(--gx) * 1deg);
  translate: calc(var(--gx) * 0.35cqw) calc(var(--gy) * 0.25cqw);
  transition:
    rotate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.masc img {
  position: absolute;
  left: -25%;
  top: -40%;
  width: 150%;
  height: 150%;
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 1.2cqw 1.6cqw rgba(20, 6, 40, 0.35));
}
.masc .mIdle,
.masc .mTalk {
  visibility: hidden;
}
/* talking: the idle face and the open-mouth face swap every 95 ms */
.masc.talk .mImg {
  visibility: hidden;
}
.masc.talk .mIdle {
  visibility: visible;
  animation: mTalkA 0.19s steps(1) infinite;
}
.masc.talk .mTalk {
  visibility: visible;
  animation: mTalkB 0.19s steps(1) infinite;
}
@keyframes mTalkA {
  50% {
    opacity: 0;
  }
}
@keyframes mTalkB {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
/* follow-through after a hop (mascWob) */
.masc.wob .mCard {
  animation: oWob 0.52s ease-out;
}
@keyframes oWob {
  20% {
    transform: rotate(-7deg);
  }
  45% {
    transform: rotate(4deg);
  }
  70% {
    transform: rotate(-2deg);
  }
  100% {
    transform: none;
  }
}

/* ---------- body poses (data-bd from MOODS) */
.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(-8cqw) scale(0.95, 1.06);
  }
}
.masc[data-bd="shiver"] .mRoot {
  animation: mShiver 0.07s linear infinite alternate;
}
@keyframes mShiver {
  from {
    transform: translateX(-1.1cqw);
  }
  to {
    transform: translateX(1.1cqw);
  }
}
.masc[data-bd="shiver"] .mBody {
  animation: none;
  transform: scale(0.95, 1.05);
}
.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(0.8cqw);
  }
}
.masc[data-bd="droop"] .mBody {
  animation: mDroop 3.6s ease-in-out infinite;
}
@keyframes mDroop {
  0%,
  100% {
    transform: translateY(0.8cqw);
  }
  50% {
    transform: translateY(2cqw) scale(1.01, 0.98);
  }
}
.masc[data-bd="droop"] .mHead {
  translate: 0 2cqw;
  scale: 1.02 0.96;
  rotate: -3deg;
}
.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(-5.5cqw) scale(0.97, 1.03);
  }
}
.masc[data-bd="bounce"] .mHead {
  animation: mRock 0.68s ease-in-out infinite alternate;
}
@keyframes mRock {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg);
  }
}
.masc[data-bd="tilt"] .mHead {
  transform: rotate(-7deg);
}
.masc[data-bd="tiltR"] .mHead {
  transform: rotate(7deg);
}
.masc[data-bd="think"] .mHead {
  transform: rotate(-5deg) translateX(-0.8cqw);
}
.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(-7deg) translateX(-1.6cqw);
  }
  50% {
    transform: rotate(7deg) translateX(1.6cqw);
  }
}
.masc[data-bd="sleepy"] .mHead {
  transform: rotate(6deg);
}
.masc[data-bd="sleepy"] .mBody {
  animation: mBreathe 3.2s ease-in-out infinite;
}
@keyframes mBreathe {
  50% {
    transform: scale(1.04, 0.97) translateY(0.8cqw);
  }
}
.masc[data-bd="proud"] .mHead {
  transform: rotate(-5deg) translateY(-1.6cqw);
}
.masc[data-bd="proud"] .mBody {
  animation: mBounce 0.5s ease-in-out infinite alternate;
}
.masc[data-bd="lean"] .mHead {
  transform: translateY(1.6cqw) rotate(3deg);
}

/* ---------- the win dance (mascDance, ACC 'dance.hop'): three hops, the last one with a spin */
.masc.dancing[data-dance] .mBody {
  animation: none;
}
.masc.dancing[data-dance] .mHead {
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
  animation: none;
}
.masc.dancing[data-dance="dance.hop"] .mRoot {
  animation: dHop 1.5s both;
}
@keyframes dHop {
  0% {
    transform: none;
  }
  8% {
    transform: scale(1.1, 0.88);
  }
  20% {
    transform: translateY(-12cqw) scale(0.94, 1.08);
  }
  32% {
    transform: scale(1.08, 0.9);
  }
  44% {
    transform: translateY(-12cqw) scale(0.94, 1.08);
  }
  56% {
    transform: scale(1.08, 0.9);
  }
  72% {
    transform: translateY(-18cqw) scale(0.94, 1.08) rotate(180deg);
  }
  86% {
    transform: scale(1.1, 0.88) rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* calm mode: no loops */
.calm .masc .mBody,
.calm .masc .mHead,
.calm .masc .mRoot {
  animation: none !important;
}
.calm .masc.talk .mIdle {
  animation: none;
}
.calm .masc.talk .mTalk {
  animation: none;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .masc .mBody,
  .masc .mHead,
  .masc .mRoot {
    animation: none !important;
  }
}
/* End of css/mascot.css */