/* ═══════════════ ДВИЖЕНИЕ ИНТЕРФЕЙСА YOYO ═══════════════
   Один файл на все страницы. Правила — .claude/skills/motion/SKILL.md.
   Слово владельца 09.09: «чтобы анимация была плавная, приятная и не бросалась
   в глаза». Последнее — главное: хорошее движение НЕ ЗАМЕЧАЮТ, оно только
   объясняет, откуда взялось окно и куда делась строка.
   ЖЕЛЕЗНОЕ ПРАВИЛО: длительности и кривые живут ЗДЕСЬ. Написанные руками
   «.15s» и «.45s» по страницам расходятся в первый же месяц — так и вышло:
   до 0.99.50 в проекте было девять разных длительностей и четыре кривых. */
:root{
  --m-tap:90ms;      /* отклик на палец */
  --m-fast:140ms;    /* цвет, тень, чип, галочка */
  --m-base:200ms;    /* появление окна, строки, подсказки */
  --m-slow:300ms;    /* лист снизу, экран целиком */
  --e-out:cubic-bezier(.2,.8,.3,1);   /* появляется — тормозит в конце */
  --e-in:cubic-bezier(.4,0,1,1);      /* уходит — разгоняется */
  --e-move:cubic-bezier(.2,.7,.3,1);  /* переставляется с места на место */
}

/* ── Отклик на нажатие ──
   Кнопка обязана «прогнуться» под пальцем: без этого человек второй раз жмёт
   ту же кнопку, решив, что не сработало. Двигаем transform — его считает
   видеокарта, страница не пересчитывается. */
button,.btn,[role="button"],.tag,.chip{
  transition:transform var(--m-tap) var(--e-out),
             background-color var(--m-fast) linear,
             border-color var(--m-fast) linear,
             box-shadow var(--m-fast) linear,
             color var(--m-fast) linear;
}
button:active,.btn:active,[role="button"]:active,.tag:active{transform:scale(.97)}
/* У полей ввода двигаем только рамку и тень: сами поля не прыгают. */
input,select,textarea{transition:border-color var(--m-fast) linear,box-shadow var(--m-fast) linear,background-color var(--m-fast) linear}
a{transition:color var(--m-fast) linear,opacity var(--m-fast) linear}

/* ── Словарь появлений (классы для страниц) ── */
@keyframes m-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes m-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px)}}
@keyframes m-down{from{transform:none}to{transform:translateY(100%)}}
.m-in{animation:m-in var(--m-base) var(--e-out) both}
.m-fade{animation:m-fade var(--m-base) var(--e-out) both}
.m-sheet{animation:m-up var(--m-slow) var(--e-out) both}
.m-closing .m-in,.m-closing.m-in{animation:m-out var(--m-fast) var(--e-in) both}
.m-closing .m-sheet,.m-closing.m-sheet{animation:m-down var(--m-fast) var(--e-in) both}
.m-closing.m-fade,.m-closing .m-fade{animation:m-fade var(--m-fast) var(--e-in) reverse both}

/* ── Кто просил меньше движения, тот его не получает ──
   Эту настройку в телефоне включают люди, которых от движения укачивает.
   Гасим ВСЁ и одинаково на всех страницах — это доступность, а не мелочь. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}