/* Lanorix Cloud: система анимаций движения.
   Подключение: <link rel="stylesheet" href="/motion.css"> + <script src="/motion.js" defer></script>.
   Анимируются только transform и opacity. Палитра и стиль site.css не меняются. */

:root {
  --mo-ease-out: cubic-bezier(.22, 1, .36, 1);
  --mo-ease-in: cubic-bezier(.55, 0, .8, .3);
  --mo-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --mo-dur-fast: 150ms;
  --mo-dur: 260ms;
  --mo-dur-slow: 480ms;
  --mo-rise: 18px;
}

/* ---------- плавный скролл по якорям ---------- */
html { scroll-padding-top: 76px; }
html.mo-landing { scroll-behavior: smooth; }

/* ---------- появление при скролле (классы ставит motion.js) ---------- */
.mo-pre { opacity: 0; transform: translate3d(0, var(--mo-rise), 0); }
.mo-pre.mo-in {
  opacity: 1; transform: none;
  transition:
    opacity var(--mo-dur-slow) var(--mo-ease-out) var(--mo-d, 0ms),
    transform var(--mo-dur-slow) var(--mo-ease-out) var(--mo-d, 0ms);
}

/* ---------- появление динамических элементов (строки, карточки, блоки) ---------- */
@keyframes mo-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes mo-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mo-slide-x {
  from { opacity: 0; transform: translate3d(var(--mo-dx, 14px), 0, 0); }
  to   { opacity: 1; transform: none; }
}
.mo-enter { animation: mo-rise var(--mo-dur) var(--mo-ease-out) var(--mo-d, 0ms) backwards; }
tr.mo-enter { animation-name: mo-fade; }          /* строки таблицы: только прозрачность, без сдвига ячеек */
.mo-enter-panel { animation: mo-rise var(--mo-dur) var(--mo-ease-out) backwards; }
.mo-enter-panel.mo-dir { animation-name: mo-slide-x; }

/* ---------- кнопки ---------- */
button, a.btn { position: relative; transition: transform var(--mo-dur-fast) var(--mo-ease-out); }
button::after, a.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .38);
  transition: opacity var(--mo-dur) var(--mo-ease-out);
}
button.primary::after, a.btn.primary::after { box-shadow: 0 6px 18px rgba(47, 129, 247, .35); }
button.danger::after { box-shadow: 0 6px 16px rgba(248, 81, 73, .25); }
button[role="tab"]::after, button.ghost::after { display: none; }

@media (hover: hover) {
  button:hover:not(:disabled):not([role="tab"]), a.btn:hover { transform: translate3d(0, -1px, 0); }
  button:hover:not(:disabled):not([role="tab"])::after, a.btn:hover::after { opacity: 1; }
}
button:focus-visible:not(:disabled):not([role="tab"]), a.btn:focus-visible { transform: translate3d(0, -1px, 0); }
button:focus-visible:not(:disabled):not([role="tab"])::after, a.btn:focus-visible::after { opacity: 1; }
button:active:not(:disabled), a.btn:active { transform: scale(.97); transition-duration: 80ms; }
button:active:not(:disabled)::after, a.btn:active::after { opacity: .4; }
.tabs button:active:not(:disabled) { transform: scale(.98); }

/* ripple (элемент создаёт motion.js) */
.mo-rip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.mo-rip i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0);
  animation: mo-ripple 560ms var(--mo-ease-out) forwards;
}
button.primary .mo-rip i, a.btn.primary .mo-rip i { background: #fff; opacity: .28; }
@keyframes mo-ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- карточки ---------- */
.panel.feature, .panel.plan, .card-btn { position: relative; transition: transform var(--mo-dur) var(--mo-ease-out); }
.panel.feature::after, .panel.plan::after, .card-btn::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  border: 1px solid var(--accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  transition: opacity var(--mo-dur) var(--mo-ease-out);
}
.card-btn:hover:not(:disabled), .card-btn:focus-visible { transform: translate3d(0, -3px, 0); }
.card-btn:active:not(:disabled) { transform: translate3d(0, -1px, 0) scale(.99); }
.card-btn::after { opacity: 0; }
.card-btn:hover::after, .card-btn:focus-visible::after { opacity: 1; }
@media (hover: hover) {
  .panel.feature:hover, .panel.plan:hover { transform: translate3d(0, -3px, 0); }
  .panel.feature:hover::after, .panel.plan:hover::after { opacity: 1; }
}
.panel.feature:active, .panel.plan:active { transform: translate3d(0, -1px, 0) scale(.99); }

/* ---------- навигация ---------- */
.nav { position: relative; }
.nav a { position: relative; z-index: 1; transition: transform var(--mo-dur-fast) var(--mo-ease-out); }
.nav a:hover, .nav a:focus-visible { transform: translate3d(0, -1px, 0); }
.nav a:active { transform: scale(.96); }
.nav a.mo-active { color: var(--text); }
.brand { display: inline-block; transition: transform var(--mo-dur) var(--mo-ease-out); }
.brand:hover { transform: translate3d(2px, 0, 0); }
.brand:active { transform: scale(.97); }
.mo-nav-ind {
  position: absolute; left: 0; top: 0; width: 100px; z-index: 0; pointer-events: none;
  border-radius: 8px; background: var(--panel2); opacity: 0; transform-origin: 0 0;
}
.mo-nav-ind::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent);
}
.mo-nav-ind.mo-ready {
  transition:
    transform var(--mo-dur-slow) var(--mo-ease-out),
    opacity var(--mo-dur) var(--mo-ease-out);
}
.mo-nav-ind.mo-on { opacity: 1; }

/* ---------- вкладки (tabs) ---------- */
.tabs button { transition: transform var(--mo-dur-fast) var(--mo-ease-out); }

/* ---------- модальные окна ---------- */
@keyframes mo-dlg-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes mo-dlg-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translate3d(0, 6px, 0) scale(.97); }
}
dialog[open] { animation: mo-dlg-in var(--mo-dur) var(--mo-ease-out); }
dialog[open]::backdrop { animation: mo-fade var(--mo-dur) var(--mo-ease-out); }
dialog.mo-closing { animation: mo-dlg-out 180ms var(--mo-ease-in) forwards; pointer-events: none; }
dialog.mo-closing::backdrop { animation: mo-backdrop-out 180ms var(--mo-ease-in) forwards; }
@keyframes mo-backdrop-out { to { opacity: 0; } }

/* ---------- выпадашки / меню / поповеры (если появятся) ---------- */
@keyframes mo-pop-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.97); }
  to   { opacity: 1; transform: none; }
}
[role="menu"]:not([hidden]), [role="listbox"]:not([hidden]), .dropdown:not([hidden]), .menu:not([hidden]), [popover]:popover-open {
  animation: mo-pop-in var(--mo-dur-fast) var(--mo-ease-out);
  transform-origin: top left;
}

/* ---------- уведомление ---------- */
@keyframes mo-toast-in {
  from { opacity: 0; transform: translate3d(-50%, 14px, 0); }
  to   { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
.toast.mo-toast-in { animation: mo-toast-in var(--mo-dur) var(--mo-ease-out); }

/* ---------- числа ---------- */
.mo-num { font-variant-numeric: tabular-nums; }

/* ---------- reduced motion: никаких анимаций, только мгновенные состояния ---------- */
@media (prefers-reduced-motion: reduce) {
  html, html.mo-landing { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .mo-pre { opacity: 1 !important; transform: none !important; }
  button:hover, button:active, a.btn:hover, a.btn:active, .card-btn:hover, .panel.feature:hover, .panel.plan:hover,
  .nav a:hover, .brand:hover { transform: none !important; }
  .mo-rip { display: none; }
}