/* ═══════════════════════════════════════════════════════════════════════
   kust.io mascot — pure CSS character with composable animations
   ═══════════════════════════════════════════════════════════════════════ */

/* Anatomy:
   .mascot
     └ .m-shadow           (sage ground oval)
     └ .m-anchor           (translateY — bob, jump, peek)
        └ .m-squish        (scaleX/scaleY — squash & stretch, surprise)
           └ .m-tilt       (rotate — wiggle, walk-lean, roll)
              └ .m-body    (border-radius morph, base color)
                 └ .m-face (eyes container — counter-rotates with tilt for stability)
                    └ .m-eye.left  > .m-eye-inner   (blink via scaleY on inner)
                    └ .m-eye.right > .m-eye-inner
   --size controls everything; mascot scales to its container.
*/

.mascot {
  --size: 240px;
  --ink: #0E0E0F;
  --eye: #FFFFFF;
  --shadow: #CFE3C6;
  --eye-x: 0px;     /* JS-driven look direction */
  --eye-y: 0px;
  --eye-blink: 1;   /* keyframe-driven (sets scaleY of inner eye) */

  position: relative;
  width: var(--size);
  height: var(--size);
  display: inline-block;
  flex-shrink: 0;
  font-size: 0;
  user-select: none;
}

.m-shadow {
  position: absolute;
  left: 18%; right: 18%; bottom: 6%;
  height: calc(var(--size) * 0.045);
  background: var(--shadow);
  border-radius: 50%;
  filter: blur(1px);
  z-index: 0;
  animation: m-shadow-pulse 5.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes m-shadow-pulse {
  0%, 100% { transform: scaleX(1); opacity: .85; }
  50%      { transform: scaleX(.75); opacity: .55; }
}

.m-anchor {
  position: absolute;
  inset: 0;
  animation: m-bob 5.4s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes m-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--size) * -0.055)); }
}

.m-squish {
  position: absolute;
  inset: 0;
  transform-origin: 50% 95%;
  transition: transform .18s cubic-bezier(.4,1.6,.6,1);
}

.m-tilt {
  position: absolute;
  inset: 0;
  transform-origin: 50% 80%;
  transition: transform .3s ease-out;
}

.m-body {
  position: absolute;
  inset: 12% 14% 8% 14%;
  background: var(--ink);
  border-radius: 64% 36% 52% 48% / 62% 56% 44% 38%;
  animation: m-morph 9s ease-in-out infinite;
  z-index: 1;
}
@keyframes m-morph {
  0%   { border-radius: 64% 36% 52% 48% / 62% 56% 44% 38%; }
  20%  { border-radius: 58% 42% 48% 52% / 55% 58% 42% 45%; }
  40%  { border-radius: 52% 48% 56% 44% / 50% 60% 40% 50%; }
  60%  { border-radius: 60% 40% 50% 50% / 58% 54% 46% 42%; }
  80%  { border-radius: 56% 44% 54% 46% / 60% 52% 48% 40%; }
  100% { border-radius: 64% 36% 52% 48% / 62% 56% 44% 38%; }
}

/* Eyes – two white ovals on the right of the face (matches reference) */
.m-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: transform .3s ease-out;
}
.m-eye {
  position: absolute;
  width: calc(var(--size) * 0.07);
  height: calc(var(--size) * 0.10);
  top: 44%;
  transform: translate(var(--eye-x), var(--eye-y));
  transition: transform .18s ease-out;
}
.m-eye.left  { left: 48%; }
.m-eye.right { left: 60%; }

.m-eye-inner {
  width: 100%; height: 100%;
  background: var(--eye);
  border-radius: 50%;
  transform: scaleY(var(--eye-blink));
  transform-origin: center;
  animation: m-blink 5.4s ease-in-out infinite;
}
.m-eye.right .m-eye-inner { animation-delay: .04s; }

@keyframes m-blink {
  0%, 92%, 96.5%, 100% { transform: scaleY(1); }
  94%, 95% { transform: scaleY(0.08); }
}

/* ─────────────────────────────────────────────
   Variant: tiny logo mascot — faster blink, no shadow
   ───────────────────────────────────────────── */
.mascot.tiny {
  --size: 28px;
}
.mascot.tiny .m-shadow { display: none; }
.mascot.tiny .m-body { inset: 6% 8% 4% 8%; }
.mascot.tiny .m-anchor { animation-duration: 3s; }
.mascot.tiny .m-eye-inner { animation-duration: 4.2s; }

/* ─────────────────────────────────────────────
   Variant: no shadow (for in-card placement)
   ───────────────────────────────────────────── */
.mascot.no-shadow .m-shadow { display: none; }

/* ─────────────────────────────────────────────
   Variant: pale (philosophy section / dark bg)
   ───────────────────────────────────────────── */
.mascot.pale { --ink: #1A1B1E; }
.mascot.inverted { --ink: #FAF9F5; --eye: #0E0E0F; --shadow: rgba(207, 227, 198, 0.3); }

/* ═══════════════════════════════════════════════════════════════════════
   STATE CLASSES — toggle via JS to produce specific behaviours
   ═══════════════════════════════════════════════════════════════════════ */

/* ▼ Jump — squat → launch → midair stretch → landing impact → settle */
.mascot.jumping .m-anchor {
  animation: m-jump 1.1s cubic-bezier(.36,.07,.19,.97);
}
.mascot.jumping .m-squish {
  animation: m-jump-squish 1.1s cubic-bezier(.36,.07,.19,.97);
}
.mascot.jumping .m-shadow {
  animation: m-jump-shadow 1.1s cubic-bezier(.36,.07,.19,.97);
}
@keyframes m-jump {
  0%   { transform: translateY(0); }
  12%  { transform: translateY(calc(var(--size) * 0.04)); }      /* squat */
  18%  { transform: translateY(calc(var(--size) * 0.04)); }
  55%  { transform: translateY(calc(var(--size) * -0.45)); }     /* apex */
  88%  { transform: translateY(calc(var(--size) * 0.05)); }      /* impact */
  100% { transform: translateY(0); }
}
@keyframes m-jump-squish {
  0%, 100% { transform: scale(1); }
  12%      { transform: scaleX(1.15) scaleY(0.78); }  /* squat anticipation */
  22%      { transform: scaleX(0.88) scaleY(1.18); }  /* launch stretch */
  55%      { transform: scaleX(0.9) scaleY(1.1); }    /* midair */
  88%      { transform: scaleX(1.3) scaleY(0.7); }    /* impact squash */
  96%      { transform: scaleX(0.95) scaleY(1.04); }  /* overshoot */
}
@keyframes m-jump-shadow {
  0%, 100% { transform: scaleX(1); opacity: .85; }
  55%      { transform: scaleX(.45); opacity: .25; }
  88%      { transform: scaleX(1.15); opacity: 1; }
}

/* ▼ Surprised — eyes pop, body stretches up briefly */
.mascot.surprised .m-squish {
  animation: m-surprised-squish .9s cubic-bezier(.36,.07,.19,.97);
}
.mascot.surprised .m-face { animation: m-surprised-face .9s ease-out; }
@keyframes m-surprised-squish {
  0%, 100% { transform: scale(1); }
  18% { transform: scaleX(0.85) scaleY(1.18); }
  40% { transform: scaleX(0.92) scaleY(1.1); }
}
@keyframes m-surprised-face {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.35); }
  60% { transform: scale(1.1); }
}

/* ▼ Wiggle — quick back-and-forth tilt */
.mascot.wiggling .m-tilt {
  animation: m-wiggle .9s ease-in-out;
}
@keyframes m-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(3deg); }
}

/* ▼ Roll — translateX + spin (one-shot) */
.mascot.rolling .m-anchor {
  animation: m-roll 1.4s cubic-bezier(.5,.1,.5,1);
}
@keyframes m-roll {
  0%   { transform: translateX(0) rotate(0); }
  100% { transform: translateX(0) rotate(360deg); }
}

/* ▼ Spin — slow gentle rotation (loops, used in philosophy) */
.mascot.spinning .m-tilt {
  animation: m-spin 18s linear infinite;
}
@keyframes m-spin {
  to { transform: rotate(360deg); }
}

/* ▼ Sleeping — eyes closed (no blink), slow bob, zzZ floats up */
.mascot.sleeping .m-eye-inner {
  animation: m-sleep-eye 3s ease-in-out infinite;
}
.mascot.sleeping .m-anchor {
  animation: m-sleep-breathe 4s ease-in-out infinite;
}
@keyframes m-sleep-eye {
  0%, 100% { transform: scaleY(0.08); }
  50%      { transform: scaleY(0.12); }
}
@keyframes m-sleep-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--size) * -0.02)); }
}

/* zzz ornament */
.m-zzz {
  position: absolute;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-weight: 600;
  font-size: calc(var(--size) * 0.12);
  color: var(--ink);
  top: 18%;
  right: 12%;
  opacity: 0;
  pointer-events: none;
}
.mascot.sleeping .m-zzz {
  animation: m-zzz-float 2.6s ease-out infinite;
}
@keyframes m-zzz-float {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20%  { opacity: .8; }
  100% { opacity: 0; transform: translate(20%, -80%) scale(1.1); }
}

/* ▼ Listening — gentle wiggle + accentuated shadow pulse */
.mascot.listening .m-tilt {
  animation: m-listen 1.8s ease-in-out infinite;
}
.mascot.listening .m-shadow {
  animation: m-listen-shadow 1.8s ease-in-out infinite;
}
@keyframes m-listen {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}
@keyframes m-listen-shadow {
  0%, 100% { transform: scaleX(1); opacity: .9; }
  50%      { transform: scaleX(1.2); opacity: 1; }
}

/* Headphones for the listening pose */
.m-headphones {
  position: absolute;
  inset: 4% 8% auto 8%;
  height: 25%;
  z-index: 3;
  pointer-events: none;
  display: none;
}
.mascot.with-headphones .m-headphones { display: block; }
.m-headphones::before, .m-headphones::after {
  content: '';
  position: absolute;
  width: 22%; height: 70%;
  background: var(--shadow);
  border-radius: 30% / 50%;
  top: 30%;
  border: 2px solid #B5CCA8;
}
.m-headphones::before { left: -4%; }
.m-headphones::after  { right: -4%; }
.m-headphones-band {
  position: absolute;
  left: 8%; right: 8%; top: 0; height: 60%;
  border: 4px solid var(--shadow);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ▼ Thinking — body morphs faster + slight tilt + eyes look up */
.mascot.thinking .m-body { animation-duration: 3.5s; }
.mascot.thinking .m-tilt { transform: rotate(-4deg); }
.mascot.thinking .m-face { transform: translateY(calc(var(--size) * -0.02)); }

/* ▼ Excited — fast continuous mini-jumps */
.mascot.excited .m-anchor {
  animation: m-excited 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
}
.mascot.excited .m-squish {
  animation: m-excited-squish 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes m-excited {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--size) * -0.12)); }
}
@keyframes m-excited-squish {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  20%  { transform: scaleX(1.1) scaleY(0.88); }
  50%  { transform: scaleX(0.93) scaleY(1.08); }
  85%  { transform: scaleX(1.08) scaleY(0.9); }
}

/* ▼ Walk — bobs forward (used as transitional state) */
.mascot.walking .m-tilt {
  animation: m-walk 0.8s ease-in-out infinite;
}
@keyframes m-walk {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ▼ Peeking — only the top half visible from below (used for "popping in") */
.mascot.peeking { overflow: hidden; }
.mascot.peeking .m-anchor {
  animation: m-peek 4s cubic-bezier(.4,1.4,.6,1) infinite;
}
@keyframes m-peek {
  0%, 100% { transform: translateY(60%); }
  30%, 70% { transform: translateY(0%); }
}

/* ▼ Morph-dramatic — body cycles through more extreme shapes */
.mascot.morphing .m-body {
  animation: m-morph-dramatic 7s cubic-bezier(.5,.1,.5,1) infinite;
}
@keyframes m-morph-dramatic {
  0%   { border-radius: 64% 36% 52% 48% / 62% 56% 44% 38%; transform: scale(1); }
  20%  { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: scaleX(1.05) scaleY(0.95); }
  40%  { border-radius: 75% 25% 30% 70% / 50% 50% 50% 50%; transform: scaleX(0.95) scaleY(1.05); }
  60%  { border-radius: 50% 50% 25% 75% / 60% 40% 60% 40%; transform: scaleX(1.04) scaleY(0.96); }
  80%  { border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%; transform: scaleX(0.97) scaleY(1.03); }
  100% { border-radius: 64% 36% 52% 48% / 62% 56% 44% 38%; transform: scale(1); }
}

/* ▼ Float — drifts up slowly as if levitating */
.mascot.floating .m-anchor {
  animation: m-float 6s ease-in-out infinite;
}
.mascot.floating .m-shadow {
  animation: m-float-shadow 6s ease-in-out infinite;
}
@keyframes m-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--size) * -0.16)) rotate(2deg); }
}
@keyframes m-float-shadow {
  0%, 100% { transform: scaleX(1); opacity: .9; }
  50%      { transform: scaleX(0.6); opacity: .35; }
}

/* ▼ Sparkle ornament (4-point star) — combine with .with-sparkle */
.m-sparkle {
  position: absolute;
  top: 12%;
  right: 8%;
  width: calc(var(--size) * 0.1);
  height: calc(var(--size) * 0.1);
  z-index: 3;
  display: none;
  color: var(--ink);
  animation: m-sparkle 2.4s ease-in-out infinite;
}
.mascot.with-sparkle .m-sparkle { display: block; }
.m-sparkle svg { width: 100%; height: 100%; display: block; }
@keyframes m-sparkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  25%      { transform: scale(0.4) rotate(45deg); opacity: 0.4; }
  50%      { transform: scale(1.1) rotate(90deg); opacity: 1; }
  75%      { transform: scale(0.6) rotate(135deg); opacity: 0.6; }
}

/* ▼ Beret — sage cap on top */
.m-beret {
  position: absolute;
  top: -2%;
  left: 18%;
  width: 60%;
  height: 22%;
  z-index: 3;
  display: none;
  pointer-events: none;
}
.mascot.with-beret .m-beret { display: block; }
.m-beret-cap {
  position: absolute;
  inset: 30% 0 0 0;
  background: var(--shadow);
  border-radius: 80% 80% 50% 50% / 100% 100% 30% 30%;
  border: 2px solid #B5CCA8;
  border-bottom: 0;
}
.m-beret-stem {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16%;
  height: 36%;
  background: var(--ink);
  border-radius: 50%;
}

/* ▼ Click ripple effect (sage halo on click) */
.m-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.mascot.rippled .m-ripple {
  animation: m-ripple 0.8s ease-out;
}
@keyframes m-ripple {
  0%   { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* ▼ Helper — pause idle bob/morph (for surprise/jump etc. to take over cleanly) */
.mascot.paused-idle .m-anchor { animation: none; }
.mascot.paused-idle .m-body   { animation: none; }

/* ─────────────────────────────────────────────
   Eye expressions (data-eye attribute set via JS)
   ───────────────────────────────────────────── */
.mascot[data-eye="happy"] .m-eye-inner { animation: none; transform: scaleY(0.35); border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%; }
.mascot[data-eye="closed"] .m-eye-inner { animation: none; transform: scaleY(0.08); }
.mascot[data-eye="wide"] .m-eye-inner { animation: none; transform: scaleY(1.25); }

/* ═══════════════════════════════════════════════════════════════════════
   ADVANCED STATES — split/melt/jelly/inflate/glitch/echo
   ═══════════════════════════════════════════════════════════════════════ */

/* ▼ Splitting — body briefly splits into 3 (parent + two ghosts) and reunites */
.mascot.splitting .m-body { position: relative; }
.mascot.splitting .m-body::before,
.mascot.splitting .m-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: inherit;
  z-index: -1;
}
.mascot.splitting .m-body::before { animation: m-split-left  1.4s cubic-bezier(.4,1.6,.5,1); }
.mascot.splitting .m-body::after  { animation: m-split-right 1.4s cubic-bezier(.4,1.6,.5,1); }
@keyframes m-split-left {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  25%      { transform: translate(-65%, 12%) scale(0.55); opacity: 1; }
  60%      { transform: translate(-65%, 12%) scale(0.55); opacity: 1; }
}
@keyframes m-split-right {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  25%      { transform: translate(65%, 12%) scale(0.55); opacity: 1; }
  60%      { transform: translate(65%, 12%) scale(0.55); opacity: 1; }
}

/* ▼ Jelly — wobble with skew like a soft jelly */
.mascot.jelly .m-squish {
  animation: m-jelly 1s ease-in-out;
}
@keyframes m-jelly {
  0%, 100% { transform: skewX(0) scale(1); }
  15% { transform: skewX(-12deg) scaleX(1.1) scaleY(0.9); }
  30% { transform: skewX(10deg) scaleX(0.95) scaleY(1.05); }
  45% { transform: skewX(-6deg) scaleX(1.05) scaleY(0.95); }
  60% { transform: skewX(4deg) scaleX(0.98) scaleY(1.02); }
  75% { transform: skewX(-2deg) scaleX(1.02) scaleY(0.98); }
}

/* ▼ Inflate — body balloons up then deflates */
.mascot.inflating .m-squish {
  animation: m-inflate 1.6s cubic-bezier(.45,1.6,.55,1);
}
.mascot.inflating .m-body {
  animation: m-inflate-body 1.6s cubic-bezier(.45,1.6,.55,1);
}
@keyframes m-inflate {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.35); }
  55% { transform: scale(1.32); }
  75% { transform: scaleX(0.78) scaleY(1.15); }
}
@keyframes m-inflate-body {
  0%, 100% { border-radius: 64% 36% 52% 48% / 62% 56% 44% 38%; }
  40%      { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  75%      { border-radius: 70% 30% 56% 44% / 64% 58% 42% 36%; }
}

/* ▼ Glitch — flicker + chromatic split */
.mascot.glitching .m-body {
  animation: m-glitch-body 0.6s steps(8);
}
.mascot.glitching .m-face {
  animation: m-glitch-face 0.6s steps(8);
}
@keyframes m-glitch-body {
  0%   { transform: translate(0); filter: none; }
  12%  { transform: translate(-4%, 2%); filter: drop-shadow(3px 0 0 #EF4444); }
  24%  { transform: translate(3%, -1%); filter: drop-shadow(-3px 0 0 #06B6D4); }
  36%  { transform: translate(-2%, -2%); filter: drop-shadow(2px 2px 0 #8B5CF6); }
  48%  { transform: translate(2%, 1%); filter: none; }
  60%  { transform: translate(-3%, 0); filter: drop-shadow(-2px 0 0 #EF4444); }
  100% { transform: translate(0); filter: none; }
}
@keyframes m-glitch-face {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(6%, 0); }
  40% { transform: translate(-4%, 0); }
  60% { transform: translate(3%, 2%); }
}

/* ▼ Melt — sags downward like wax */
.mascot.melting .m-body {
  animation: m-melt-body 2.2s ease-in-out;
}
.mascot.melting .m-squish {
  animation: m-melt-squish 2.2s ease-in-out;
}
@keyframes m-melt-body {
  0%, 100% { border-radius: 64% 36% 52% 48% / 62% 56% 44% 38%; }
  40%      { border-radius: 50% 50% 18% 18% / 70% 70% 10% 10%; }
  60%      { border-radius: 50% 50% 8% 8% / 78% 78% 6% 6%; }
}
@keyframes m-melt-squish {
  0%, 100% { transform: scale(1); }
  50%      { transform: scaleX(1.25) scaleY(0.65); }
}

/* ▼ Echo / trail — leaves fading copies behind (used with .jumping) */
.mascot.echo .m-anchor { filter: drop-shadow(0 0 0 transparent); }
.mascot.echo .m-body::before,
.mascot.echo .m-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
}
.mascot.echo.jumping .m-body::before {
  animation: m-echo-1 1.1s ease-out;
}
.mascot.echo.jumping .m-body::after {
  animation: m-echo-2 1.1s ease-out;
}
@keyframes m-echo-1 {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: 0.3; transform: translate(0, 30%); }
  60% { opacity: 0; transform: translate(0, 50%); }
}
@keyframes m-echo-2 {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  45% { opacity: 0.18; transform: translate(0, 18%); }
  75% { opacity: 0; transform: translate(0, 40%); }
}

/* ▼ Hatch — burst out from below (used as entrance) */
.mascot.hatching .m-anchor {
  animation: m-hatch 1.2s cubic-bezier(.36,.07,.19,.97);
}
.mascot.hatching .m-squish {
  animation: m-hatch-squish 1.2s cubic-bezier(.36,.07,.19,.97);
}
@keyframes m-hatch {
  0%   { transform: translateY(80%); }
  60%  { transform: translateY(calc(var(--size) * -0.2)); }
  100% { transform: translateY(0); }
}
@keyframes m-hatch-squish {
  0%   { transform: scaleY(0.4); }
  25%  { transform: scaleX(0.7) scaleY(1.4); }
  70%  { transform: scaleX(1.3) scaleY(0.75); }
  100% { transform: scale(1); }
}

/* ▼ Spinout — spins fast and shrinks (used as exit) */
.mascot.spinout .m-anchor {
  animation: m-spinout 1s ease-in forwards;
}
@keyframes m-spinout {
  0%   { transform: rotate(0) scale(1); opacity: 1; }
  100% { transform: rotate(720deg) scale(0); opacity: 0; }
}

/* ▼ Dribble — quick mini-jumps in place (3x) */
.mascot.dribbling .m-anchor {
  animation: m-dribble 1.2s cubic-bezier(.5,.05,.5,.95);
}
@keyframes m-dribble {
  0%, 100% { transform: translateY(0); }
  17%      { transform: translateY(calc(var(--size) * -0.2)); }
  34%      { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--size) * -0.14)); }
  67%      { transform: translateY(0); }
  84%      { transform: translateY(calc(var(--size) * -0.08)); }
}

/* ▼ Pulse-stack — many concentric rings explode out (like sonar) */
.mascot.pulsing .m-ripple {
  animation: m-pulse-out 1.4s ease-out;
}
.mascot.pulsing .m-body { box-shadow: 0 0 0 0 rgba(207,227,198,.7); animation: m-sonar 1.4s ease-out; }
@keyframes m-pulse-out {
  0%   { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes m-sonar {
  0%   { box-shadow: 0 0 0 0   rgba(207,227,198,.7); }
  100% { box-shadow: 0 0 0 80px rgba(207,227,198,0); }
}

/* ▼ Inverted-eyes — eyes turn black on white body (rare, used for surprise/hover) */
.mascot.inverted-flash { transition: --ink .3s; }
.mascot.inverted-flash .m-body { transition: background .3s; background: #FAF9F5; }
.mascot.inverted-flash .m-eye-inner { background: var(--ink); }