/* Studentix — общие эффекты появления окон (этап P, п. 4 владельца). Подключается один раз в main.tpl.
   Кривые и длительности — как у окон slidepix: появление 0.32s cubic-bezier(.22, 1, .36, 1), сдвиг 18px и масштаб .96.

   Как пользоваться (любое окно, меню, поповер, тост):
     .stx-motion-in        — окно или карточка появляется (сдвиг снизу + масштаб + прозрачность). Ставить при показе.
     .stx-motion-pop       — то же, синоним для уже существующего кода (editor-v2 detect-fab.js).
     .stx-motion-out       — исчезновение. Снять -in, поставить -out, удалить узел по animationend (или через 260 мс).
     .stx-motion-fade      — только прозрачность (подложки, тосты, подсказки). Выход — .stx-motion-fade-out.
     .stx-motion-backdrop  — затемнение под окном: плавное появление. Выход — .stx-motion-backdrop-out.
     .stx-motion-sheet     — на телефоне (до 600px) выезжает снизу как лист, на ПК ведёт себя как -in. Выход — -sheet-out.
     .stx-motion-drop      — меню и выпадающие списки: короткое появление сверху вниз (0.18s).
     .stx-motion-stagger   — на контейнер: дети появляются по очереди (до 8 шт., шаг 40 мс).
   Пример JS:
     el.classList.add('stx-motion-in');
     // закрытие:
     el.classList.replace('stx-motion-in', 'stx-motion-out');
     el.addEventListener('animationend', function () { el.remove(); }, { once: true });
   prefers-reduced-motion: анимации отключаются, окна появляются сразу. Классы не задают display/position — только анимацию. */

@keyframes stx-motion-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes stx-motion-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px) scale(.97); }
}
@keyframes stx-motion-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes stx-motion-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes stx-motion-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes stx-motion-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes stx-motion-drop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes stx-motion-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.stx-motion-in,
.stx-motion-pop { animation: stx-motion-in .32s cubic-bezier(.22, 1, .36, 1) both; transform-origin: 50% 60%; }
.stx-motion-out { animation: stx-motion-out .26s cubic-bezier(.4, 0, .6, 1) both; pointer-events: none; }
.stx-motion-fade,
.stx-motion-backdrop { animation: stx-motion-fade-in .32s ease both; }
.stx-motion-fade-out,
.stx-motion-backdrop-out { animation: stx-motion-fade-out .26s ease both; pointer-events: none; }
.stx-motion-drop { animation: stx-motion-drop .18s cubic-bezier(.22, 1, .36, 1) both; transform-origin: 50% 0; }
.stx-motion-sheet { animation: stx-motion-in .32s cubic-bezier(.22, 1, .36, 1) both; }
.stx-motion-sheet-out { animation: stx-motion-out .26s cubic-bezier(.4, 0, .6, 1) both; pointer-events: none; }

.stx-motion-stagger > * { animation: stx-motion-rise .45s cubic-bezier(.22, 1, .36, 1) both; }
.stx-motion-stagger > :nth-child(1) { animation-delay: .04s; }
.stx-motion-stagger > :nth-child(2) { animation-delay: .08s; }
.stx-motion-stagger > :nth-child(3) { animation-delay: .12s; }
.stx-motion-stagger > :nth-child(4) { animation-delay: .16s; }
.stx-motion-stagger > :nth-child(5) { animation-delay: .20s; }
.stx-motion-stagger > :nth-child(6) { animation-delay: .24s; }
.stx-motion-stagger > :nth-child(7) { animation-delay: .28s; }
.stx-motion-stagger > :nth-child(n+8) { animation-delay: .32s; }

@media (max-width: 600px) {
  .stx-motion-sheet { animation: stx-motion-sheet-in .36s cubic-bezier(.32, .72, 0, 1) both; }
  .stx-motion-sheet-out { animation: stx-motion-sheet-out .28s cubic-bezier(.4, 0, .6, 1) both; }
}

@media (prefers-reduced-motion: reduce) {
  .stx-motion-in, .stx-motion-pop, .stx-motion-fade, .stx-motion-backdrop, .stx-motion-drop,
  .stx-motion-sheet, .stx-motion-stagger > * { animation: none !important; }
  .stx-motion-out, .stx-motion-fade-out, .stx-motion-backdrop-out, .stx-motion-sheet-out {
    animation-duration: .01s !important; animation-delay: 0s !important;
  }
}