/* ==========================================================================
   Проявка - движение. Токены, ключевые кадры и классы.
   Подключать ПОСЛЕ основных стилей. Пара: motion.js (функции Motion.*).
   Правило: двигаем только transform и opacity. Никаких анимаций width/height/top/left
   на больших блоках и никакого filter: blur на весь экран.
   ========================================================================== */

:root {
  /* длительности */
  --mo-micro: 160ms;   /* нажатие, галочка, иконка */
  --mo-fast: 240ms;    /* появление мелочи, выход оверлея */
  --mo-base: 360ms;    /* сообщения, строки списка, вкладки */
  --mo-nav: 500ms;     /* переход между экранами (push/pop) */
  --mo-sheet: 520ms;   /* шторка снизу */
  --mo-zoom: 440ms;    /* фото из плитки на весь экран */

  /* кривые */
  --mo-ios: cubic-bezier(.32, .72, 0, 1);      /* экраны, шторки, зум - как в iOS */
  --mo-out: cubic-bezier(.2, .8, .2, 1);       /* появление: быстро стартует, мягко садится */
  --mo-in: cubic-bezier(.4, 0, 1, 1);          /* уход: разгоняется и исчезает */
  --mo-spring: cubic-bezier(.3, 1.35, .5, 1);  /* пружинка: меню, тосты, бейджи, кнопки */
  --mo-std: cubic-bezier(.4, 0, .2, 1);        /* всё остальное */

  /* затемнение под шторкой и под уходящим экраном */
  --mo-dim: rgba(0, 0, 0, .32);
}

/* ---------- нажатия: всё, что кликается ---------- */
.mo-press { transition: transform var(--mo-base) var(--mo-spring), background-color .2s, opacity .2s; -webkit-tap-highlight-color: transparent; }
.mo-press:active { transform: scale(.96); transition-duration: 120ms; transition-timing-function: var(--mo-std); }
.mo-press.mo-press-sm:active { transform: scale(.9); }   /* круглые кнопки 36-44px */

/* ---------- переход экранов: тень на кромке верхнего экрана ---------- */
.mo-edge { box-shadow: -14px 0 36px rgba(0,0,0,.5); }   /* тень не режется overflow: hidden самого экрана */
.mo-dimmer { position: absolute; inset: 0; background: var(--mo-dim); pointer-events: none; z-index: 999; opacity: 0; }

/* ---------- сегменты (Чаты/Девушки, Вход/Регистрация, Генерации/Девушки) ---------- */
.mo-seg-thumb { transition: transform 460ms var(--mo-spring); will-change: transform; }

/* ---------- переключатель ---------- */
.mo-switch { transition: background-color 250ms var(--mo-std); }
.mo-switch::after { transition: transform 300ms var(--mo-spring); }

/* ---------- печатает ---------- */
.mo-typing i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin: 0 1.5px; animation: mo-dot 1.2s var(--mo-std) infinite; }
.mo-typing i:nth-child(2) { animation-delay: .15s; }
.mo-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mo-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- галочки: рисуются, вторая с задержкой ---------- */
.mo-check path { stroke-dasharray: 14; stroke-dashoffset: 14; animation: mo-draw 260ms var(--mo-out) forwards; }
.mo-check path + path { animation-delay: 120ms; }
@keyframes mo-draw { to { stroke-dashoffset: 0; } }

/* ---------- скелетон / загрузка ---------- */
.mo-skel { background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 70%) 0 0 / 300% 100%; animation: mo-shimmer 1.4s linear infinite; }
@keyframes mo-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---------- текст «думает»: перелив по строке ---------- */
.mo-shine { background: linear-gradient(90deg, #8e8e93 0%, #8e8e93 38%, #fff 50%, #8e8e93 62%, #8e8e93 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mo-shine 2.2s linear infinite; }
@keyframes mo-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- тряска при ошибке ---------- */
@keyframes mo-shake { 0%,100% { transform: none } 20% { transform: translateX(-8px) } 40% { transform: translateX(7px) } 60% { transform: translateX(-4px) } 80% { transform: translateX(2px) } }
.mo-shake { animation: mo-shake 420ms var(--mo-std); }

/* ---------- бейдж непрочитанного: прыгает при изменении ---------- */
@keyframes mo-pop { 0% { transform: scale(.4); opacity: 0 } 60% { transform: scale(1.15); opacity: 1 } 100% { transform: none } }
.mo-pop { animation: mo-pop 420ms var(--mo-spring) both; }

/* ---------- обратный отсчёт кольцом в тосте (6 c на «Отменить») ---------- */
.mo-countdown circle.run { stroke-dasharray: 100; stroke-dashoffset: 0; animation: mo-count var(--mo-count, 6s) linear forwards; }
@keyframes mo-count { to { stroke-dashoffset: 100; } }

/* ---------- бесконечные колонки карточек на входе ---------- */
@keyframes mo-cards-up { from { transform: translateY(0) } to { transform: translateY(-33.3333%) } }
@keyframes mo-cards-dn { from { transform: translateY(-33.3333%) } to { transform: translateY(0) } }

/* ---------- «уменьшить движение»: всё превращается в короткое растворение ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo-typing i, .mo-skel, .mo-shine, .mo-shake, .mo-pop { animation: none !important; }
  .mo-press, .mo-press:active { transform: none !important; }
}