/* Built-in characters (see mascots.js). States: .run .idle .happy .sad, plus .flip */
.mascot {
  --c: #00e5ff;
  --skin: #f2c29b;
  --hair: #1e1412;
  --pants: #2a2550;
  --m-ink: #16112b;
  position: absolute;
  inset: 0;
}
.mascot.flip { transform: scaleX(-1); }
.mascot.flip .m-prop span, .mascot.flip .prop text { display: inline-block; }

/* ================= water drop ================= */
.m-drop .m-body { position: absolute; left: 15%; width: 70%; aspect-ratio: 1 / 1.05; bottom: 16%; }
.m-drop .m-body::before {
  content: '';
  position: absolute;
  inset: 12% 8% 0;
  background: radial-gradient(circle at 35% 35%, #fff9 0 8%, transparent 9%),
              linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  border: 4px solid var(--m-ink);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  box-shadow: inset -10px -10px 0 #0001;
}
.m-drop .m-eyes { position: absolute; top: 48%; left: 0; right: 0; display: flex; justify-content: center; gap: 22%; }
.m-drop .m-eyes i { width: 9%; aspect-ratio: 1 / 1.3; min-width: 6px; background: var(--m-ink); border-radius: 50%; animation: m-blink 3.2s infinite; }
.m-drop .m-mouth {
  position: absolute; top: 64%; left: 50%; width: 20%; aspect-ratio: 2 / 1;
  border: 4px solid var(--m-ink); border-top: 0; border-radius: 0 0 999px 999px; transform: translateX(-50%);
}
.m-drop .m-blush { position: absolute; top: 60%; left: 0; right: 0; display: flex; justify-content: center; gap: 42%; }
.m-drop .m-blush i { width: 10%; aspect-ratio: 2 / 1; background: #ff3d8b66; border-radius: 50%; }
.m-drop .m-legs { position: absolute; bottom: 4%; left: 34%; right: 34%; height: 16%; display: flex; justify-content: space-between; }
.m-drop .m-legs i { width: 30%; height: 100%; background: var(--m-ink); border-radius: 999px; transform-origin: 50% 0; }
.m-drop .m-shadow { position: absolute; bottom: 1%; left: 22%; width: 56%; height: 5%; background: #0003; border-radius: 50%; filter: blur(2px); }
.m-drop .m-prop {
  position: absolute; right: 0; bottom: 34%; width: 28%; aspect-ratio: 1;
  display: grid; place-items: center; background: #fff; border: 4px solid var(--m-ink); border-radius: 50%;
  transform: rotate(12deg); container-type: inline-size;
}
.m-drop .m-prop span { font-size: 52cqw; line-height: 1; }

.m-drop.run .m-body { animation: m-dbob 0.32s ease-in-out infinite alternate; }
.m-drop.run .m-legs i:first-child { animation: m-dleg 0.32s ease-in-out infinite alternate; }
.m-drop.run .m-legs i:last-child { animation: m-dleg 0.32s ease-in-out infinite alternate-reverse; }
.m-drop.idle .m-body { animation: m-float 1.8s ease-in-out infinite; }
.m-drop.idle .m-prop { animation: m-present 1.8s ease-in-out infinite; }
.m-drop.happy .m-body { animation: m-hop 0.45s ease-in-out infinite alternate; }
.m-drop.happy .m-legs i:first-child { animation: m-dleg 0.22s ease-in-out infinite alternate; }
.m-drop.happy .m-legs i:last-child { animation: m-dleg 0.22s ease-in-out infinite alternate-reverse; }
.m-drop.happy .m-eyes i { border-radius: 999px 999px 0 0; aspect-ratio: 2 / 1; background: none; border: 4px solid var(--m-ink); border-bottom: 0; }
.m-drop.happy .m-prop { transform: rotate(-20deg) translateY(-40%); }
.m-drop.sad .m-body { animation: m-droop 0.7s ease-in-out infinite alternate; }
.m-drop.sad .m-legs i:first-child { animation: m-dleg 0.7s ease-in-out infinite alternate; }
.m-drop.sad .m-legs i:last-child { animation: m-dleg 0.7s ease-in-out infinite alternate-reverse; }
.m-drop.sad .m-mouth { border: 4px solid var(--m-ink); border-bottom: 0; border-radius: 999px 999px 0 0; top: 68%; }
.m-drop.sad .m-eyes i { aspect-ratio: 1 / 0.7; }
.m-drop.sad .m-prop { transform: rotate(30deg) translateY(30%); }

/* ================= humans ================= */
.m-human .m-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-human .m-ground { fill: #0003; }
.m-human .shirt { fill: var(--c); stroke: var(--m-ink); stroke-width: 3; }
.m-human .skin { fill: var(--skin); stroke: var(--m-ink); stroke-width: 3; }
.m-human .skin-s { stroke: var(--skin); stroke-width: 10; stroke-linecap: round; fill: none; }
.m-human .pants { stroke: var(--pants); stroke-width: 12; stroke-linecap: round; fill: none; }
.m-human .shoe { fill: #fff; stroke: var(--m-ink); stroke-width: 3; }
.m-human .hair { fill: var(--hair); stroke: var(--m-ink); stroke-width: 3; stroke-linejoin: round; }
.m-human .tie { fill: #ff3d8b; stroke: var(--m-ink); stroke-width: 2.5; }
.m-human .eyes { fill: var(--m-ink); }
.m-human .blush { fill: #ff3d8b55; }
.m-human .mouth { fill: none; stroke: var(--m-ink); stroke-width: 3; stroke-linecap: round; display: none; }
.m-human .mouth.open { fill: var(--m-ink); }
.m-human .thumb { stroke: var(--skin); stroke-width: 5; stroke-linecap: round; display: none; }
.m-human .prop circle { fill: #fff; stroke: var(--m-ink); stroke-width: 3; }
.m-human .prop text { font-size: 15px; text-anchor: middle; }
.m-human .back { filter: brightness(0.8); }

/* joint pivots (viewBox units) */
.m-human .rig { transform-origin: 60px 116px; }
.m-human .leg { transform-origin: 60px 114px; }
.m-human .shin { transform-origin: 60px 146px; }
.m-human .arm { transform-origin: 60px 83px; }
.m-human .fore { transform-origin: 60px 104px; }
.m-human .head { transform-origin: 60px 70px; }
.m-human .pony { transform-origin: 40px 31px; }
.m-human .eyes { transform-origin: 74px 43px; transform-box: view-box; animation: m-blink 3.4s infinite; }
.m-human .rig, .m-human .leg, .m-human .shin, .m-human .arm, .m-human .fore, .m-human .head, .m-human .pony {
  transform-box: view-box;
  transition: transform 0.25s ease;
}

/* run: 0.5s stride, legs out of phase, arms opposite to legs */
.m-human.run .mouth.smile, .m-human.idle .mouth.smile { display: block; }
.m-human.run .rig { animation: m-runbob 0.25s ease-in-out infinite alternate; }
.m-human.run .leg { animation: m-thigh 0.5s linear infinite; }
.m-human.run .leg .shin { animation: m-shin 0.5s linear infinite; }
.m-human.run .leg.back, .m-human.run .leg.back .shin { animation-delay: -0.25s; }
.m-human.run .arm.front { animation: m-swing 0.5s ease-in-out infinite; }
.m-human.run .arm.back { animation: m-swing 0.5s ease-in-out infinite; animation-delay: -0.25s; }
.m-human.run .fore { transform: rotate(-80deg); }
.m-human.run .pony { animation: m-pony 0.25s ease-in-out infinite alternate; }

/* idle: holding the reminder up, breathing */
.m-human.idle .rig { animation: m-breathe 2.2s ease-in-out infinite; }
.m-human.idle .arm.front { transform: rotate(-62deg); }
.m-human.idle .arm.front .fore { transform: rotate(-58deg); animation: m-presentarm 2.2s ease-in-out infinite; }
.m-human.idle .arm.back { transform: rotate(6deg); }
.m-human.idle .head { transform: rotate(-4deg); }
.m-human.idle .pony { animation: m-pony 1.1s ease-in-out infinite alternate; }

/* happy: thumbs up + bounce */
.m-human.happy .mouth.open { display: block; }
.m-human.happy .thumb { display: block; }
.m-human.happy .prop { display: none; }
.m-human.happy .rig { animation: m-cheer 0.36s ease-in-out infinite alternate; }
.m-human.happy .arm.front { transform: rotate(-92deg); }
.m-human.happy .arm.front .fore { transform: rotate(-62deg); }
.m-human.happy .arm.back { transform: rotate(28deg); }
.m-human.happy .head { transform: rotate(-8deg); }
.m-human.happy .leg.front { transform: rotate(-10deg); }
.m-human.happy .leg.front .shin { transform: rotate(25deg); }
.m-human.happy .pony { animation: m-pony 0.18s ease-in-out infinite alternate; }

/* sad: head down, slow heavy walk */
.m-human.sad .mouth.sad { display: block; }
.m-human.sad .eyes { transform: scaleY(0.6); animation: none; }
.m-human.sad .rig { animation: m-sadbob 0.45s ease-in-out infinite alternate; }
.m-human.sad .head { transform: rotate(16deg); }
.m-human.sad .leg { animation: m-wthigh 0.9s ease-in-out infinite; }
.m-human.sad .leg .shin { animation: m-wshin 0.9s ease-in-out infinite; }
.m-human.sad .leg.back, .m-human.sad .leg.back .shin { animation-delay: -0.45s; }
.m-human.sad .arm.front { animation: m-wswing 0.9s ease-in-out infinite; }
.m-human.sad .arm.back { animation: m-wswing 0.9s ease-in-out infinite; animation-delay: -0.45s; }
.m-human.sad .fore { transform: rotate(-8deg); }
.m-human.sad .prop { transform: translateY(4px); }

/* ================= keyframes ================= */
@keyframes m-thigh { 0%, 100% { transform: rotate(-38deg); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(34deg); } 75% { transform: rotate(4deg); } }
@keyframes m-shin { 0%, 100% { transform: rotate(12deg); } 25% { transform: rotate(6deg); } 50% { transform: rotate(42deg); } 75% { transform: rotate(95deg); } }
@keyframes m-swing { 0%, 100% { transform: rotate(42deg); } 50% { transform: rotate(-48deg); } }
@keyframes m-runbob { from { transform: translateY(0) rotate(6deg); } to { transform: translateY(-6px) rotate(6deg); } }
@keyframes m-pony { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
@keyframes m-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes m-presentarm { 0%, 100% { transform: rotate(-58deg); } 50% { transform: rotate(-66deg); } }
@keyframes m-cheer { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes m-sadbob { from { transform: translateY(2px) rotate(-3deg); } to { transform: translateY(4px) rotate(-3deg); } }
@keyframes m-wthigh { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@keyframes m-wshin { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(38deg); } }
@keyframes m-wswing { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-12deg); } }

@keyframes m-dbob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-7%) rotate(3deg); } }
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes m-present { 0%, 100% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-12%); } }
@keyframes m-hop { from { transform: translateY(0) scale(1.03, 0.97); } to { transform: translateY(-16%) scale(0.97, 1.04); } }
@keyframes m-droop { from { transform: translateY(2%) rotate(-2deg) scale(1.02, 0.96); } to { transform: translateY(4%) rotate(2deg) scale(1.03, 0.94); } }
@keyframes m-dleg { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }