/* Jan's shared motion kit. Copy into a site (or @import) and apply classes. Subtle, one-shot, no looping pulses/glows.
   Utility classes: m-pop (floating buttons/popovers), m-rise (cards/messages/sections on load), m-fade, m-panel (+ m-closing) for slide-up panels/modals,
   m-stagger (parent: children rise in sequence), m-press (buttons/cards: hover lift + press squish), m-dots (typing/loading dots), m-skeleton (loading shimmer, finite use only). */
:root { --m-ease: cubic-bezier(.2,.8,.2,1); --m-spring: cubic-bezier(.2,.9,.3,1.2); }
@keyframes m-pop { from { opacity: 0; transform: translateY(6px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-panel-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes m-panel-out { to { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes m-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes m-shimmer { to { background-position: -200% 0; } }
.m-pop { animation: m-pop .18s var(--m-spring) both; }
.m-rise { animation: m-rise .4s var(--m-ease) both; }
.m-fade { animation: m-fade .3s ease-out both; }
.m-panel { animation: m-panel-in .26s var(--m-ease) both; }
.m-panel.m-closing { animation: m-panel-out .18s ease-in both; }
.m-stagger > * { animation: m-rise .4s var(--m-ease) both; }
.m-stagger > *:nth-child(1) { animation-delay: .00s; } .m-stagger > *:nth-child(2) { animation-delay: .05s; }
.m-stagger > *:nth-child(3) { animation-delay: .10s; } .m-stagger > *:nth-child(4) { animation-delay: .15s; }
.m-stagger > *:nth-child(5) { animation-delay: .20s; } .m-stagger > *:nth-child(6) { animation-delay: .25s; }
.m-stagger > *:nth-child(n+7) { animation-delay: .30s; }
.m-press { transition: transform .15s var(--m-ease), box-shadow .15s var(--m-ease); }
.m-press:hover { transform: translateY(-2px); } .m-press:active { transform: scale(.97); }
.m-dots span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 9999px; background: currentColor; opacity: .5; animation: m-dot 1s infinite; }
.m-dots span:nth-child(2) { animation-delay: .15s; } .m-dots span:nth-child(3) { animation-delay: .3s; }
.m-skeleton { background: linear-gradient(90deg, rgba(128,128,128,.12) 25%, rgba(128,128,128,.22) 50%, rgba(128,128,128,.12) 75%); background-size: 200% 100%; animation: m-shimmer 1.4s linear 6; }
@media (prefers-reduced-motion: reduce) { .m-pop, .m-rise, .m-fade, .m-panel, .m-stagger > *, .m-dots span, .m-skeleton { animation: none !important; } .m-press, .m-press:hover, .m-press:active { transition: none; transform: none; } }