/* ============================================================
   Motion — анимации появления, заголовков, фоновых видео.
   Работает в паре с motion.js. Без JS всё видно как обычно.
   ============================================================ */

/* Пока скрипт размечает страницу — она скрыта (без мигания), затем плавно проявляется */
html.m-js body { transition: opacity .35s ease; }
html.m-loading body { opacity: 0; }

/* Появление блоков при прокрутке: мягкий сдвиг + размытие.
   Используем свойства translate/scale, чтобы не ломать собственные transform элементов. */
.m-js .m-up {
  opacity: 0;
  translate: 0 28px;
  filter: blur(8px);
  transition:
    opacity .8s ease var(--d, 0s),
    translate 1s cubic-bezier(.16, .8, .2, 1) var(--d, 0s),
    filter .8s ease var(--d, 0s);
}
.m-js .m-up.m-nofilter { filter: none; }
.m-js .m-up.m-in { opacity: 1; translate: none; filter: none; }

/* Медленное «приближение» картинок первого экрана */
.m-js .m-zoom { overflow: hidden; }
/* --m-scale-end — итоговый масштаб (больше 1, если на картинке параллакс и нужен запас по краям) */
.m-js .m-zoom > img, .m-js img.m-zoom-img { scale: calc(var(--m-scale-end, 1) + .1); transition: scale 1.8s cubic-bezier(.16, .8, .2, 1) var(--d, 0s); }
.m-js .m-zoom.m-in > img, .m-js img.m-zoom-img.m-in { scale: var(--m-scale-end, 1); }

/* Пословное появление заголовка */
.m-w { display: inline-block; }
.m-js .m-w {
  opacity: 0;
  translate: 0 .4em;
  filter: blur(10px);
  transition:
    opacity .7s ease calc(var(--i) * 50ms + var(--d0, 0ms)),
    translate .9s cubic-bezier(.16, .8, .2, 1) calc(var(--i) * 50ms + var(--d0, 0ms)),
    filter .6s ease calc(var(--i) * 50ms + var(--d0, 0ms));
}
.m-js .m-ready .m-w { opacity: 1; translate: none; filter: none; }

/* Подсветка под курсором */
.m-spot { position: relative; isolation: isolate; }
.m-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--m-spot, rgba(45, 91, 255, .10)), transparent 45%);
  opacity: 0; transition: opacity .35s ease;
}
.m-spot:hover::after { opacity: 1; }

/* Бегущая строка */
.m-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.m-marquee-track { display: flex; gap: inherit; width: max-content; animation: m-marquee var(--m-speed, 40s) linear infinite; }
.m-marquee:hover .m-marquee-track { animation-play-state: paused; }
@keyframes m-marquee { to { transform: translateX(-50%); } }

/* Индикатор прокрутки */
.m-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; transform-origin: 0 50%; scale: 0 1; background: var(--m-progress, #2d5bff); pointer-events: none; }

/* Фоновое видео: грузится лениво, до загрузки виден градиент-заглушка родителя */
.m-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.m-bg.m-playing { opacity: var(--m-bg-opacity, 1); }

/* «Жидкое стекло» — полупрозрачная панель с градиентной рамкой */
.m-glass { position: relative; background: rgba(255, 255, 255, .08); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.m-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Бегущий блик по кнопке */
.m-shine { position: relative; overflow: hidden; }
.m-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: m-shine 4.5s ease-in-out infinite;
}
@keyframes m-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  .m-js .m-up, .m-js .m-w { opacity: 1 !important; translate: none !important; filter: none !important; transition: none !important; }
  .m-marquee-track, .m-shine::after { animation: none !important; }
  .m-bg { display: none; }
}