.topbar__mascot {
  position: relative;
  width: clamp(56px, 16vw, 76px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  isolation: isolate;
}

.topbar__mascot-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 61, 0.55) 0%, rgba(194, 79, 158, 0.20) 45%, transparent 75%);
  filter: blur(10px);
  z-index: -1;
  animation: miniGlow 3.6s ease-in-out infinite;
}

@keyframes miniGlow {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: 0.85; }
  50%      { transform: scale(1.18) rotate(15deg); opacity: 1; }
}

.topbar__mascot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
  user-select: none;
  -webkit-user-drag: none;
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  transform-origin: 50% 60%;
  will-change: transform;
  animation:
    mascotBob   3.8s ease-in-out infinite,
    mascotTilt  5.4s ease-in-out infinite,
    mascotBreath 4.6s ease-in-out infinite,
    mascotHop   12s  ease-in-out infinite;
}

@keyframes mascotBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}

@keyframes mascotTilt {
  0%, 100% { rotate: -6deg; }
  50%      { rotate: 6deg; }
}

@keyframes mascotBreath {
  0%, 100% { scale: 1; }
  50%      { scale: 1.045; }
}

@keyframes mascotHop {
  0%, 78%, 100%  { /* idle - other animations handle motion */ }
  82%            { translate: 0 -10px; rotate: -10deg; }
  86%            { translate: 0 -2px;  rotate: 8deg; }
  90%            { translate: 0 -6px;  rotate: -3deg; }
  94%            { translate: 0 0;     rotate: 4deg; }
}

.topbar__mascot-sparkle {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #ffffff 0%, transparent 70%);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px rgba(255, 233, 200, 0.95));
  animation: miniSparkle 2.6s ease-in-out 0.6s infinite;
}

.topbar__mascot::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: -6px;
  width: 9px;
  height: 9px;
  background: radial-gradient(circle, #FFE9B0 0%, transparent 70%);
  border-radius: 50%;
  filter: drop-shadow(0 0 5px rgba(255, 233, 176, 0.9));
  animation: miniSparkle 3.4s ease-in-out 1.6s infinite;
  pointer-events: none;
}

@keyframes miniSparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  40%      { opacity: 1; transform: scale(1.3); }
  60%      { opacity: 1; transform: scale(0.9); }
}