/* Logo override — removes the lime "box" around the menu logo and gives the
   logo a floating/rotating animation. Loaded after the app so !important wins. */

/* Kill the box on the wrapper (desktop + mobile), keep the logo standalone. */
.mm-logo-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  transform: none !important;
}

/* Gentle float + tilt animation on the logo itself. */
.mm-logo {
  height: calc(var(--ui) * 112px) !important;
  will-change: transform;
  animation: mm-logo-float 3.8s ease-in-out infinite;
}

@keyframes mm-logo-float {
  0%   { transform: translateY(0)    rotate(-3deg) scale(1); }
  25%  { transform: translateY(-12px) rotate(2deg)  scale(1.03); }
  50%  { transform: translateY(0)    rotate(3deg)   scale(1); }
  75%  { transform: translateY(-12px) rotate(-2deg) scale(1.03); }
  100% { transform: translateY(0)    rotate(-3deg)  scale(1); }
}

/* Boot screen logo: same image, subtle pulse so it feels alive there too. */
.boot-logo {
  animation: mm-logo-pulse 2.4s ease-in-out infinite;
}
@keyframes mm-logo-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.06); opacity: 0.85; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .mm-logo, .boot-logo { animation: none !important; }
}