/* Появление блоков и параллакс (motion.js). Работает только при html.mo-on: без скрипта всё видно сразу. */
.mo-on .mo {
  opacity: 0;
  transform: translate3d(var(--mx, 0), var(--my, 24px), 0);
  transition: opacity var(--mo-dur, 650ms) cubic-bezier(.2, .7, .2, 1) var(--md, 0ms),
              transform var(--mo-dur, 650ms) cubic-bezier(.2, .7, .2, 1) var(--md, 0ms);
}
.mo-on .mo.mo-in { opacity: 1; transform: none; }
/* таблица: строки двигаются, сама таблица нет */
.mo-on tr.mo { will-change: opacity, transform; }
/* фоновое свечение первого экрана уходит медленнее страницы */
.mo-glow { position: relative; isolation: isolate; }
.mo-glow::before {
  content: ""; position: absolute; inset: -10% 0 auto 0; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 500px at 80% 20%, rgba(87, 148, 222, .14), transparent 60%),
              radial-gradient(700px 420px at 15% 80%, rgba(87, 148, 222, .07), transparent 60%);
  transform: translate3d(0, var(--mo-bg, 0), 0);
}
@media (prefers-reduced-motion: reduce) {
  .mo-on .mo { opacity: 1; transform: none; transition: none; }
  .mo-glow::before { transform: none; }
}
