/* ─────────────────────────────────────────────────────────────
   Движение — общий слой для всех страниц сайта.

   Всё анимируемое здесь — только transform и opacity: так браузер не пересчитывает
   раскладку и движение остаётся гладким даже на слабом телефоне.
   Класс .motion-ok ставит маленький скрипт в <head>, и только если человек не просил
   «уменьшить движение». Без него страница статична и полностью видна.
   ───────────────────────────────────────────────────────────── */

:root {
  --m-ease:    cubic-bezier(.16, 1, .3, 1);   /* появление: быстро стартует, мягко садится */
  --m-ease-in: cubic-bezier(.7, 0, .84, 0);   /* уход */
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);  /* смена состояния */
  --m-micro: 140ms;
  --m-short: 320ms;
  --m-long:  1150ms;
}

/* ── Появление блоков при прокрутке (главная: data-reveal) ── */
.motion-ok [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--m-long) var(--m-ease),
    transform var(--m-long) var(--m-ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.motion-ok [data-reveal="right"] { transform: translate3d(34px, 0, 0); }
.motion-ok [data-reveal="scale"] { transform: scale(.965); }
.motion-ok [data-reveal].is-in { opacity: 1; transform: none; }

/* Заголовок выезжает по строкам из-под невидимой кромки — как набор на печатной машине */
.motion-ok [data-reveal="lines"] { opacity: 1; transform: none; }
/* поля нужны, чтобы маска не срезала й, ё и хвосты у, р при плотном интерлиньяже заголовков */
.m-line { display: block; overflow: hidden; padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
.m-line > span { display: block; }
.motion-ok [data-reveal="lines"] .m-line > span {
  transform: translate3d(0, 108%, 0);
  transition: transform 1450ms var(--m-ease);
  transition-delay: calc(var(--i, 0) * 120ms + var(--l, 0) * 150ms);
}
.motion-ok [data-reveal="lines"].is-in .m-line > span { transform: none; }

/* Если motion.js не загрузился, через пару секунд всё равно показываем содержимое */
.motion-ok:not(.motion-live) [data-reveal],
.motion-ok:not(.motion-live) [data-reveal="lines"] .m-line > span {
  animation: m-show 0s 2.2s forwards;
}
@keyframes m-show { to { opacity: 1; transform: none; } }

/* ── Страницы сервисов: блоки поднимаются по очереди при открытии ── */
@keyframes m-rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
.motion-ok main > .wrap > *,
.motion-ok .hero > .hero-grid > *,
.motion-ok main > .workspace {
  animation: m-rise 1250ms var(--m-ease) both;
}
.motion-ok main > .wrap > :nth-child(2), .motion-ok .hero > .hero-grid > :nth-child(2) { animation-delay: 140ms; }
.motion-ok main > .wrap > :nth-child(3), .motion-ok .hero > .hero-grid > :nth-child(3) { animation-delay: 280ms; }
.motion-ok main > .wrap > :nth-child(4) { animation-delay: 400ms; }
.motion-ok main > .wrap > :nth-child(n+5) { animation-delay: 500ms; }
.motion-ok main > .workspace { animation-delay: 320ms; }

/* ── Нажатие: кнопка ощутимо проседает и мягко возвращается ── */
[data-press] {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--ms, 1));
  transition:
    transform 700ms var(--m-ease),
    background-color var(--m-short) var(--m-ease),
    border-color var(--m-short) var(--m-ease),
    color var(--m-short) var(--m-ease),
    box-shadow var(--m-short) var(--m-ease);
}
[data-press]:active:not(:disabled) { --ms: .955; transition-duration: var(--m-micro); }

/* «Магнит»: главные кнопки чуть тянутся к курсору, когда он рядом */
[data-magnetic].is-near { transition-duration: 340ms, var(--m-short), var(--m-short), var(--m-short), var(--m-short); }

/* ── Волна от точки нажатия на главных кнопках ── */
.m-ripple-host { position: relative; overflow: hidden; isolation: isolate; }
.m-ripple {
  position: absolute; z-index: -1;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: currentColor; opacity: .22;
  transform: scale(0);
  pointer-events: none;
  animation: m-ripple 950ms var(--m-ease) forwards;
}
@keyframes m-ripple { to { transform: scale(var(--rs, 30)); opacity: 0; } }

/* ── Шапка прячется при прокрутке вниз и возвращается при прокрутке вверх ── */
.m-nav { transition: transform 620ms var(--m-ease); will-change: auto; }
.m-nav.is-hidden { transform: translate3d(0, -110%, 0); }

/* ── Наклон карточек вслед за курсором ── */
[data-tilt] {
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translate3d(0, var(--ty, 0px), 0);
  transition: transform 950ms var(--m-ease), box-shadow var(--m-short) var(--m-ease);
}
[data-tilt].is-tilting { transition-duration: 260ms, var(--m-short); }
.m-glare {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.34), transparent 60%);
  opacity: 0;
  transition: opacity 700ms var(--m-ease);
}
[data-tilt].is-tilting .m-glare { opacity: 1; }
[data-tilt] > :not(.m-glare) { position: relative; z-index: 1; }

/* ── Свет под курсором: мягкое пятно, которое догоняет курсор ── */
.m-light {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 720px; height: 720px; margin: -360px 0 0 -360px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--m-light-color, rgba(231,201,196,.55)) 0%, transparent 62%);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--lx, 50vw), var(--ly, 40vh), 0);
  transition: opacity 1200ms var(--m-ease);
}
.is-lit > .m-light { opacity: 1; }

/* На тач-экранах и при «уменьшить движение» — без эффектов, завязанных на курсор */
@media (hover: none), (pointer: coarse) {
  .m-light, .m-glare { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .m-light, .m-glare, .m-ripple { display: none; }
  [data-press], [data-tilt], .m-nav { transition: none !important; transform: none !important; }
}