/* ═══════════════════════════════════════════════════════════════════
   motion-core.css — общее движение сайта. Подключается во ВСЕХ базах страниц: лендинг, вход, кабинет, платформа, архив.
   Свои эффекты — в motion-public.css (лендинг, вход, кабинет) и motion-studio.css (платформа, архив).

   Язык движения — «дыхание и волна»: медленное торможение при появлении (выплывает на 10–18 px и проявляется),
   пружина только для малых подтверждений (нажатие, «сохранено», тост), «живое» состояние мягко дышит. Длительности
   до 0,7 с; анимируются только transform / opacity / filter; ничего не прыгает и не мигает.

   Всё движение — внутри `@media (prefers-reduced-motion: no-preference)`: у тех, кто просил меньше движения, не
   анимируется ничего из этого файла (их собственные «тихие» замены в motion.css платформы остаются).
   Без JS страницы работают как раньше: классы `mo-js`/`mo-boot` ставит только скрипт.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --mo-ease: cubic-bezier(.22, 1, .36, 1);          /* мягкое торможение: приход */
  --mo-ease-in: cubic-bezier(.64, 0, .78, 0);       /* уход */
  --mo-spring: cubic-bezier(.34, 1.4, .64, 1);      /* запасная «упругость» */
  --mo-t1: 140ms;                                    /* нажатие, цвет */
  --mo-t2: 240ms;                                    /* переходы элементов */
  --mo-t3: 420ms;                                    /* появление, смена страницы */
  --mo-t4: 720ms;                                    /* крупное: первый показ страницы */
}

/* настоящая пружина — кривой `linear()` (Chrome 113+, Safari 17.2+, Firefox 112+); ниже — запасная */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --mo-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%,
      1.159, 1.163 27%, 1.154, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%,
      .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}

@keyframes mo-rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mo-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes mo-pop    { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes mo-shake  { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
                       60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes mo-pulse  { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes mo-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
@keyframes mo-vt-out { to { opacity: 0; } }
@keyframes mo-vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* ─── Смена страницы: плавный переход вместо мигания (межстраничные View Transitions) ───
   Chrome 126+, Safari 18.2+. Шапка стоит на месте (своя «группа»), содержимое уходит в прозрачность и приходит снизу.
   В браузерах без поддержки — обычный переход. */
/* Межстраничный переход — только там, где есть мышь. На телефоне (особенно в окне Telegram) браузер перед каждым
   переходом снимает «снимок» всей страницы и играет по нему анимацию: на слабом устройстве это видимая заминка и
   «дёрганье» при каждом нажатии на ссылку; обычная смена страницы быстрее и ощущается ровнее. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .lp-top, .pf-topbar, .app-header { view-transition-name: mo-top; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: mo-vt-out var(--mo-t2) var(--mo-ease-in) both; }
  ::view-transition-new(root) { animation: mo-vt-in var(--mo-t3) var(--mo-ease) both; }
  ::view-transition-group(mo-top) { animation-duration: var(--mo-t3); animation-timing-function: var(--mo-ease); }
}

@media (prefers-reduced-motion: no-preference) {
  /* смена темы (см. тумблер): тот же приём, но один кроссфейд без сдвига */
  html.mo-theme-swap::view-transition-new(root) { animation: mo-fade var(--mo-t3) var(--mo-ease) both; }
  html.mo-theme-swap::view-transition-old(root) { animation: none; }

  /* ─── Скелетон: место под то, что догружается ─── */
  .mo-skeleton {
    border-radius: 10px;
    min-block-size: 1.2em;
    background: linear-gradient(100deg, transparent 20%, rgba(127, 127, 127, .16) 45%, transparent 70%) 180% 0 / 220% 100%,
                rgba(127, 127, 127, .08);
    animation: mo-shimmer 1.4s linear infinite;
    color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mo-skeleton { border-radius: 10px; min-block-size: 1.2em; background: rgba(127, 127, 127, .1); color: transparent; }
}