/* newsomo · motion.css v1 — Е2 блупринта плавності (02.08.2026)
   ІНЕРТНИЙ деплой: жоден клас звідси ще нікуди не додається.
   Нічого візуально не змінює, поки Е3–Е9 не почнуть цим користуватись.

   Чому токени тут, а не в tokens.css (як буквально написано в блупринті):
   /assets/* на Netlify роздається як immutable на рік, а версія зашита
   в ?v= у КОЖНОМУ html. tokens.css підключають 9 сторінок і з різними
   версіями (feed/chats — v7, storyline — v1). Правка tokens.css вимагала б
   синхронного бампу в усіх дев'яти, інакше частина сторінок місяцями їла б
   стару копію без --mo-*. Новий файл із власним ?v=1 знімає цей ризик
   повністю. Каскад ідентичний: обидва оголошують :root, motion.css іде
   одразу після tokens.css. */

:root{
  /* Тривалості — рівно три, інших не існує */
  --mo-fast:   150ms;  /* мікро: press, пігулки, вихід вейла, hover */
  --mo-base:   250ms;  /* контент: кросфейди, fade-in вставок, FLIP, клавіатура, скелетон→дані */
  --mo-screen: 350ms;  /* просторове: екрани, оверлеї, шторки, шар обговорення */

  /* Криві — рівно дві */
  --mo-ease-out:   cubic-bezier(0.32, 0.72, 0, 1);  /* усе, що РУХАЄТЬСЯ (transform) */
  --mo-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);    /* лише opacity/color */
}

@media (prefers-reduced-motion: reduce){
  :root{ --mo-fast:1ms; --mo-base:1ms; --mo-screen:1ms; }
}

/* ── Вставка нового рядка у список (NSMotion.flipList) ─────────────── */
.mo-in{ opacity:0; transform:translateY(-4px); }
.mo-go{
  opacity:1; transform:none;
  transition: opacity var(--mo-base) var(--mo-ease-inout),
              transform var(--mo-base) var(--mo-ease-out);
}

/* ── Вейл міжсторінкового переходу (NSMotion.leave) ────────────────── */
.mo-veil{
  position:fixed; inset:0; z-index:9999;
  background:#FAF9F5; opacity:0; pointer-events:none;
  transition: opacity var(--mo-fast) var(--mo-ease-inout);
}
.mo-veil.on{ opacity:1; pointer-events:auto; }

/* ── Шар скелетона/снапшота над контентом (NSMotion.xfade) ─────────── */
.mo-xfade-top{
  position:absolute; inset:0; z-index:9000;
  opacity:1; transition: opacity var(--mo-base) var(--mo-ease-inout);
}
.mo-xfade-top.gone{ opacity:0; pointer-events:none; }

/* ── Boot-fade сторінки (вмикається в Е6) ──────────────────────────── */
.mo-boot{ opacity:0; }
.mo-boot-in{ opacity:1; transition: opacity var(--mo-base) var(--mo-ease-inout); }

/* ── Внутрішні екрани (Фаза 2/3) ───────────────────────────────────── */
.screen.mo-enter{ transform:translateX(100%); }
.screen.mo-enter-active{
  transform:translateX(0);
  transition: transform var(--mo-screen) var(--mo-ease-out);
}
.screen.mo-below{ opacity:.5; transition: opacity var(--mo-screen) var(--mo-ease-inout); }

/* ── «Ride» клавіатури (Е5) ────────────────────────────────────────────
   Клас .mo-ride нікому ще не додається — правило лежить готовим, щоб Е5
   вмикався одним класом, а не правкою transition-списку в header-cloud.js. */
.nsm-cc.mo-ride{ transition: transform var(--mo-base) var(--mo-ease-out); }