/* Animate the mascot without moving its layout or surrounding controls. */
@keyframes sm-puppy-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-4px) rotate(-3deg); }
  55% { transform: translateY(-1px) rotate(3deg); }
  75% { transform: translateY(-3px) rotate(-1deg); }
}
@keyframes sm-puppy-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  20% { transform: translateY(2px) scale(1.06, .94); }
  48% { transform: translateY(-20px) rotate(-5deg) scale(.97, 1.03); }
  75% { transform: translateY(0) scale(1.04, .96); }
}
html body img[src*="seoulmono-puppy.png"] {
  transform-origin: 50% 90%;
  animation: sm-puppy-idle 4.6s ease-in-out infinite;
}
html body #sl-root .sl-mas.sm-puppy-hop img { animation: sm-puppy-hop .7s ease-in-out; }
html body #sl-root .sl-mas:focus-visible { outline: 2px solid #397aa3; outline-offset: 6px; border-radius: 16px; }
html.sm-motion-paused body img[src*="seoulmono-puppy.png"] { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html body img[src*="seoulmono-puppy.png"],
  html body #sl-root .sl-mas.sm-puppy-hop img { animation: none !important; transform: none !important; }
}