/* Mascot moods: each mood shows one set of eyes, one mouth and its extras.
   Every mascot's SVG uses these part classes; see mascots.js. */
.mascot { display: block; width: 100%; height: auto; overflow: visible; stroke: none; fill: none; }
.mascot .arms-up, .mascot .eyes-up, .mascot .eyes-happy, .mascot .eyes-shut, .mascot .brows,
.mascot .m-open, .mascot .m-o, .mascot .m-wavy, .mascot .zzz, .mascot .think-dots { display: none; }

.mascot.mood-think .eyes-open, .mascot.mood-think .m-smile { display: none; }
.mascot.mood-think .eyes-up, .mascot.mood-think .m-o, .mascot.mood-think .think-dots { display: inline; }

.mascot.mood-proud .eyes-open, .mascot.mood-proud .m-smile { display: none; }
.mascot.mood-proud .eyes-happy, .mascot.mood-proud .m-open { display: inline; }

.mascot.mood-cheer .eyes-open, .mascot.mood-cheer .m-smile, .mascot.mood-cheer .arms-down { display: none; }
.mascot.mood-cheer .eyes-happy, .mascot.mood-cheer .m-open, .mascot.mood-cheer .arms-up { display: inline; }

.mascot.mood-worried .m-smile { display: none; }
.mascot.mood-worried .brows, .mascot.mood-worried .m-wavy { display: inline; }

.mascot.mood-sleepy .eyes-open { display: none; }
.mascot.mood-sleepy .eyes-shut, .mascot.mood-sleepy .zzz { display: inline; }

/* A gentle plush wobble; off for reduced motion. */
.mascot-bob .mascot { animation: mascot-bob 3.2s ease-in-out infinite; transform-origin: 55% 95%; }
.mascot-cheer .mascot { animation: mascot-hop .6s ease-in-out 4; transform-origin: 55% 95%; }
@keyframes mascot-bob { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-2.2deg) translateY(-1px) } }
@keyframes mascot-hop { 0%, 100% { transform: translateY(0) } 40% { transform: translateY(-8%) scale(1.02, .98) } }
@media (prefers-reduced-motion: reduce) { .mascot-bob .mascot, .mascot-cheer .mascot { animation: none; } }