.noko-mascot {
  --mascot-ink: #111111;
  --mascot-cream: #ffffff;
  display: block;
  width: 100%;
  height: auto;
  color: var(--mascot-ink);
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  contain: layout style;
}
.noko-mascot .mascot-cream { fill: var(--mascot-cream); }
.noko-mascot .mascot-creature {
  transform-origin: 320px 550px;
  animation: mascot-breathe 5.8s ease-in-out infinite;
  animation-delay: var(--mascot-delay, 0s);
}
.noko-mascot .mascot-eye-blink { transform-origin: 0 0; }
.noko-mascot.is-blinking .mascot-eye-blink { animation: mascot-blink .19s ease-in-out both; }
.noko-mascot.is-greeting .mascot-creature { animation: mascot-greeting .72s ease-in-out both; }
.mascot-tile {
  display: grid;
  place-items: center;
  background: var(--mascot-tile-bg, #ededeb);
  border-radius: 24%;
  overflow: hidden;
  aspect-ratio: 1;
}
.mascot-tile .noko-mascot { width: 115%; max-width: none; transform: translateY(8%); }
@keyframes mascot-breathe {
  0%, 100% { transform: translateY(1px) scaleY(1); }
  50% { transform: translateY(-3px) scaleY(1.008); }
}
@keyframes mascot-blink {
  0%, 100% { transform: scaleY(1); }
  44%, 56% { transform: scaleY(.065); }
}
@keyframes mascot-greeting {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-5px) rotate(-1.4deg); }
  70% { transform: translateY(-2px) rotate(.7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .noko-mascot .mascot-creature,
  .noko-mascot .mascot-eye-blink { animation: none !important; }
}