/* DHUT mascot wardrobe motion — the hooks js/mascot.js puts on its SVG parts.
   Decoration only, so it is quiet by design: small amplitudes, slow loops, and it only runs
   inside a .mascot-live container (like the leaf sway / blink in app.css), so tiny mascots such
   as the Diary tab indicator stay still. Everything here switches off for prefers-reduced-motion
   AND for the app's own setting (html[data-motion="reduced"|"off"]).
   Pivots use fill-box so they stay right when a held item is mirrored into the left hand. */

@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes m-bounce {
  0%, 62%, 100% { transform: translateY(0) scale(1, 1); }
  70% { transform: translateY(0) scale(1.03, 0.97); }
  80% { transform: translateY(-4px) scale(0.99, 1.01); }
  90% { transform: translateY(0) scale(1.01, 0.99); }
}
@keyframes m-celebrate {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.04, 0.95); }
  45% { transform: translateY(-8px) scale(0.98, 1.03); }
  72% { transform: translateY(0) scale(1.03, 0.97); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes m-shiver { /* a brief little shiver now and then, not a constant shake */
  0%, 76%, 100% { transform: translateX(0); }
  79% { transform: translateX(-0.7px); } 82% { transform: translateX(0.7px); }
  85% { transform: translateX(-0.5px); } 88% { transform: translateX(0.5px); } 91% { transform: translateX(0); }
}
@keyframes m-umbrella-wobble { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes m-fan { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes m-slow-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } }
@keyframes m-glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Pivots: whole-character motions and held items turn around their base (the pot bottom, the
   hand grip); eyes blink around their own centre. */
.m-bob, .m-bounce, .m-celebrate, .m-shiver, .m-umbrella-wobble, .m-fan { transform-box: fill-box; transform-origin: 50% 100%; }
.m-slow-blink { transform-box: fill-box; transform-origin: 50% 50%; }
/* With motion off the lantern keeps a steady, warm light instead of pulsing. */
.m-glow { opacity: 0.85; }

.mascot-live .m-bob { animation: m-bob 4.8s ease-in-out infinite; }
.mascot-live .m-bounce { animation: m-bounce 3.4s ease-in-out infinite; }
.mascot-live .m-celebrate { animation: m-celebrate 0.9s ease-out 1 both; } /* one short jump */
.mascot-live .m-shiver { animation: m-shiver 4.2s linear infinite; }
.mascot-live .m-umbrella-wobble { animation: m-umbrella-wobble 5.2s ease-in-out infinite; }
.mascot-live .m-fan { animation: m-fan 1.6s ease-in-out infinite; }
.mascot-live .m-slow-blink { animation: m-slow-blink 8s ease-in-out infinite; }
.mascot-live .m-glow { animation: m-glow 3.6s ease-in-out infinite; }

/* Reduced / no motion: nothing moves — including the mascot's leaf sway and blink from app.css,
   which only honours the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .m-bob, .m-bounce, .m-celebrate, .m-shiver, .m-umbrella-wobble, .m-fan, .m-slow-blink, .m-glow,
  .mascot-live .m-sway-l, .mascot-live .m-sway-r, .mascot-live .m-blink { animation: none !important; }
}
html[data-motion="reduced"] .m-bob, html[data-motion="reduced"] .m-bounce, html[data-motion="reduced"] .m-celebrate,
html[data-motion="reduced"] .m-shiver, html[data-motion="reduced"] .m-umbrella-wobble, html[data-motion="reduced"] .m-fan,
html[data-motion="reduced"] .m-slow-blink, html[data-motion="reduced"] .m-glow,
html[data-motion="reduced"] .m-sway-l, html[data-motion="reduced"] .m-sway-r, html[data-motion="reduced"] .m-blink,
html[data-motion="off"] .m-bob, html[data-motion="off"] .m-bounce, html[data-motion="off"] .m-celebrate,
html[data-motion="off"] .m-shiver, html[data-motion="off"] .m-umbrella-wobble, html[data-motion="off"] .m-fan,
html[data-motion="off"] .m-slow-blink, html[data-motion="off"] .m-glow,
html[data-motion="off"] .m-sway-l, html[data-motion="off"] .m-sway-r, html[data-motion="off"] .m-blink { animation: none !important; }
/* The containers' own float / hop (app.css) too: that stylesheet only stops them for the OS
   setting, and ".mascot-live *" rules never match the container itself. */
html[data-motion="reduced"] .world-mascot, html[data-motion="reduced"] .auth-illustration-mascot,
html[data-motion="reduced"] .diary-nav-mascot-inner,
html[data-motion="off"] .world-mascot, html[data-motion="off"] .auth-illustration-mascot,
html[data-motion="off"] .diary-nav-mascot-inner { animation: none !important; }