/* arbly-ui/motion.css — keyframes и утилиты движения. Подключается после components.css.
 * Коротко и без пружин: 140–300 мс, ease-out. Reduced-motion гасит всё в одном месте. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mo-fade-up { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mo-slide-left { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes mo-pop { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes mo-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mo-row-in {
  0%   { opacity: 0; transform: translateY(-10px); background-color: var(--accent-soft-bg); }
  40%  { opacity: 1; transform: none; background-color: var(--accent-soft-bg); }
  100% { background-color: transparent; }
}
@keyframes mo-flash-ok {
  0%   { box-shadow: 0 0 0 0 var(--ok-soft-bg), var(--shadow-sm); border-color: var(--ok); }
  100% { box-shadow: 0 0 0 12px transparent, var(--shadow-sm); border-color: var(--border-subtle); }
}
@keyframes mo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30, 142, 90, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(30, 142, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 142, 90, 0); }
}
@keyframes mo-spin { to { transform: rotate(360deg); } }
@keyframes mo-tab { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mo-dd { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

.u-fade-in      { animation: mo-fade-in var(--dur-slow) var(--ease-out) backwards; }
.u-fade-up      { animation: mo-fade-up var(--dur-xslow) var(--ease-emphasized) backwards; }
.u-view-enter   { animation: mo-rise 320ms var(--ease-out) backwards; }
.u-tab-enter    { animation: mo-tab 240ms var(--ease-out) backwards; }
.u-dd           { animation: mo-dd 160ms var(--ease-out) both; }
.u-delay-1      { animation-delay: 60ms; }
.u-panel-enter  { animation: mo-slide-left var(--dur-slow) var(--ease-emphasized) both; }
@keyframes mo-sheet-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes mo-drawer-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
.u-sheet-enter  { animation: mo-sheet-up var(--dur-slow) var(--ease-emphasized) both; }
.u-drawer-enter { animation: mo-drawer-in var(--dur-slow) var(--ease-emphasized) both; }
.u-toast-enter  { animation: mo-rise var(--dur-slow) var(--ease-emphasized) both; }
.u-pop          { animation: mo-pop var(--dur-base) var(--ease-out) both; transform-origin: top right; }
.u-row-fade     { animation: mo-fade var(--dur-slow) var(--ease-out) backwards; }
.u-row-new      { animation: mo-row-in 900ms var(--ease-out) both; }
.u-flash-ok     { animation: mo-flash-ok 900ms var(--ease-out) both; }
.u-live-dot     { animation: mo-pulse 2s var(--ease-out) infinite; }
.u-spin         { animation: mo-spin 900ms linear infinite; }
.u-bar-in       { transform-origin: bottom; animation: mo-grow-y var(--dur-xslow) var(--ease-out) both; }
.progress__fill--in { transform-origin: left; animation: mo-grow-x var(--dur-xslow) var(--ease-out) both; }