/* Микроанимации — общие для «Классического» и «Nodex Mono». Только transform/opacity, 120–220 мс (кроме галочек).
   Токены можно переопределить в mono.css: --mo-fast, --mo-mid, --mo-ease, --mo-spring, --mo-check-bg, --mo-check-ink. */
:root { --mo-fast: 120ms; --mo-mid: 200ms; --mo-ease: cubic-bezier(.2, .8, .2, 1); --mo-spring: cubic-bezier(.32, 1.25, .5, 1); --mo-check-bg: #2BD47D; --mo-check-ink: #04170C; }

@keyframes mo-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes mo-pop { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes mo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mo-fade { from { opacity: .35; } to { opacity: 1; } }
@keyframes mo-sweep { 0% { opacity: 0; transform: scaleX(0); } 40% { opacity: .9; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes mo-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mo-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mo-modal { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mo-collapse { 0% { opacity: 1; transform: scale(1); } 60% { opacity: 0; transform: scale(.4); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes mo-check { 0%, 35% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }

.mo-shake { animation: mo-shake 360ms var(--mo-ease); }
.mo-pop { animation: mo-pop var(--mo-mid) var(--mo-ease); }
.mo-in { animation: mo-in var(--mo-mid) var(--mo-ease) both; }
.mo-fade { animation: mo-fade var(--mo-mid) linear; }
.mo-sent { position: relative; }
.mo-sent::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; font-weight: 800;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mo-check-bg) 45%, transparent)); transform-origin: left; animation: mo-sweep 650ms var(--mo-ease) both; pointer-events: none; }
.mo-done { pointer-events: none; }
/* оплата: сумма сворачивается в галочку */
.mo-paid { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; pointer-events: none; }
.mo-paid b { grid-area: 1 / 1; font-size: 40px; font-weight: 800; animation: mo-collapse 520ms var(--mo-ease) both; }
.mo-paid-ic { grid-area: 1 / 1; width: 96px; height: 96px; border-radius: 50%; background: var(--mo-check-bg); color: var(--mo-check-ink); display: grid; place-items: center; font-size: 52px; font-weight: 800;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35); animation: mo-check 620ms var(--mo-spring) both; }
/* тосты: снизу вверх с проявлением */
.toast { animation: mo-up var(--mo-mid) var(--mo-ease) both; }
/* нижние листы и окна: мягкая «пружина» при открытии */
dialog.ma-sheet[open], dialog.qrs[open] { animation: mo-sheet 220ms var(--mo-spring) both; }
dialog.modal[open] { animation: mo-modal 180ms var(--mo-ease) both; }
dialog.ma-sheet.out { transition: transform 160ms var(--mo-ease), opacity 160ms linear; transform: translateY(24px); opacity: 0; }
/* отклик на нажатие плиток и клавиш */
.pk, .ct-table, .cm-tile, .ma-dish, .iw-cat, .ow-k, .ma-table, .ma-card, .ow-chips button, .bento-tap { transition: transform var(--mo-fast) var(--mo-ease); }
.pk:active, .ct-table:active, .cm-tile:active, .ma-dish:not(.stopped):active, .iw-cat:active, .ow-k:active, .ma-table:active, .ma-card:active, .bento-tap:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .mo-shake, .mo-pop, .mo-in, .mo-fade, .toast, dialog[open], .mo-paid b, .mo-paid-ic, .mo-sent::after { animation: none !important; }
  .mo-paid b { opacity: 0; }
  dialog.ma-sheet.out { transition: none; }
  .pk, .ct-table, .cm-tile, .ma-dish, .iw-cat, .ow-k, .ma-table, .ma-card, .bento-tap { transition: none; }
  .pk:active, .ct-table:active, .cm-tile:active, .ma-dish:active, .iw-cat:active, .ow-k:active, .ma-table:active, .ma-card:active, .bento-tap:active { transform: none; }
}