/* ============================================================================
   Landing motion system

   Раньше на лендинге стояли атрибуты data-aos, но библиотеки AOS в проекте
   нет (ни в package.json, ни в node_modules) — то есть анимаций не было
   вообще. Этот файл + plugins/landingMotion.client.js заменяют их.

   Как это работает:
   - html.has-motion выставляется инлайн-скриптом из nuxt.config.ts ДО первой
     отрисовки. Поэтому пре-состояние (opacity: 0) применяется без мигания,
     а при выключенном JS класса нет и контент виден как обычно.
   - html.no-motion выставляется тем же скриптом при prefers-reduced-motion:
     он глушит всё, оставляя только мгновенное появление.

   Раскладка трансформаций (важно, чтобы эффекты не затирали друг друга):
   - transform → reveal + scroll-параллакс (через CSS-переменные)
   - translate → бесконечный idle-float (кейфреймы, независимое свойство)
   - scale/rotate → ховеры
   ========================================================================= */

$motion-ease: cubic-bezier(0.22, 0.68, 0.28, 1);
$motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

/* --------------------------------------------------------------------------
   1. Reveal при скролле (директива v-reveal / v-reveal-group)
   ----------------------------------------------------------------------- */

.has-motion [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-duration, 820ms) $motion-ease var(--reveal-delay, 0ms),
    transform var(--reveal-duration, 820ms) $motion-ease var(--reveal-delay, 0ms),
    filter var(--reveal-duration, 820ms) $motion-ease var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.has-motion [data-reveal="up"] { transform: translate3d(0, 48px, 0); }
.has-motion [data-reveal="down"] { transform: translate3d(0, -40px, 0); }
.has-motion [data-reveal="left"] { transform: translate3d(-64px, 0, 0); }
.has-motion [data-reveal="right"] { transform: translate3d(64px, 0, 0); }
.has-motion [data-reveal="zoom"] { transform: scale3d(0.9, 0.9, 1); }
.has-motion [data-reveal="pop"] { transform: scale3d(0.72, 0.72, 1) translate3d(0, 20px, 0); }

.has-motion [data-reveal="rise"] {
  transform: translate3d(0, 72px, 0) scale3d(0.97, 0.97, 1);
}

.has-motion [data-reveal="blur"] {
  transform: translate3d(0, 28px, 0);
  filter: blur(14px);
}

/* Заголовок «выезжает» из-под маски — используется для hero-строк */
.has-motion [data-reveal="mask"] {
  transform: translate3d(0, 100%, 0);
}

/* data-reveal="none" — «только прозрачность»: transform элемент собирает сам
   и он намеренно не сбрасывается. Нужен для картинок, у которых уже есть свой
   transform (центровка translateX(-50%), параллакс) — общий reset его бы затёр. */
.has-motion [data-reveal]:not([data-reveal="none"]).is-revealed {
  transform: none;
}

/* filter сбрасываем только там, где сами его и ставили: у остальных
   элементов может быть свой drop-shadow, который нельзя обнулять. */
.has-motion [data-reveal="blur"].is-revealed {
  filter: none;
}

.has-motion [data-reveal].is-revealed {
  opacity: 1;
}

/* Обёртка для mask-reveal: обрезает строку, пока она не выехала */
.reveal-mask {
  overflow: hidden;
  display: block;
}

/* --------------------------------------------------------------------------
   2. Бесконечный «полёт» (idle float)

   Анимируем независимое свойство translate, а не transform, — так float
   свободно сочетается с reveal и параллаксом на одном и том же элементе.
   ----------------------------------------------------------------------- */

@keyframes mone-float-y {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--float-distance, -14px); }
}

@keyframes mone-float-drift {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  33% { translate: var(--float-x, 10px) calc(var(--float-distance, -14px) * 0.7); rotate: var(--float-tilt, 1.4deg); }
  66% { translate: calc(var(--float-x, 10px) * -0.6) var(--float-distance, -14px); rotate: calc(var(--float-tilt, 1.4deg) * -1); }
}

.has-motion .float-y {
  animation: mone-float-y var(--float-duration, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.has-motion .float-drift {
  animation: mone-float-drift var(--float-duration, 11s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

/* Картинки лендинга намеренно обрезаны по нижней кромке карточки (телефоны
   «выходят» за неё). Их нельзя двигать вверх — покажется срез, поэтому
   «дышим» масштабом от нижней грани: низ остаётся приклеенным. */
@keyframes mone-breathe {
  0%, 100% { scale: 1; }
  50% { scale: var(--breathe-scale, 1.03); }
}

.has-motion .float-breathe {
  transform-origin: 50% 100%;
  animation: mone-breathe var(--float-duration, 8s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

/* Float стартует только после того, как блок появился, иначе картинка
   «дёргается» посреди reveal-перехода. */
.has-motion [data-reveal] .float-y,
.has-motion [data-reveal] .float-drift,
.has-motion [data-reveal] .float-breathe {
  animation-play-state: paused;
}

.has-motion [data-reveal].is-revealed .float-y,
.has-motion [data-reveal].is-revealed .float-drift,
.has-motion [data-reveal].is-revealed .float-breathe {
  animation-play-state: running;
}

/* --------------------------------------------------------------------------
   3. Скролл-параллакс (директива v-parallax)

   Директива пишет в элемент --par-y. Базовый transform элемента остаётся
   на совести компонента — здесь только утилитарный случай без своих
   трансформаций.
   ----------------------------------------------------------------------- */

.has-motion .parallax {
  transform: translate3d(0, var(--par-y, 0px), 0);
  will-change: transform;
}

/* Вариант для элементов, уже отцентрованных через translateX(-50%) */
.has-motion .parallax-cx {
  transform: translate(-50%, var(--par-y, 0px));
  will-change: transform;
}

/* --------------------------------------------------------------------------
   4. Дышащий радиальный градиент в hero-секциях
   ----------------------------------------------------------------------- */

/* Максимальный масштаб — ровно 1. Раздувать радиал больше 100% нельзя:
   он шириной во всю секцию, и scale(1.12) добавлял странице ~83px
   горизонтального скролла. */
@keyframes mone-radial-breathe {
  0%, 100% {
    opacity: 0.72;
    transform: translateX(-50%) scale(0.94);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* Радиалы есть не только в .section-item — такие же лежат в
   BlockChannels и BlockPayments, и у всех transform: translateX(-50%). */
.has-motion .section-radial {
  animation: mone-radial-breathe 12s ease-in-out infinite;
  transform-origin: 50% 0%;
}

/* --------------------------------------------------------------------------
   5. Ховеры карточек и картинок
   ----------------------------------------------------------------------- */

/* Список свойств тут — надмножество reveal-перехода. Иначе на карточке,
   у которой есть и [data-reveal], и .hover-lift, побеждало бы правило
   .has-motion [data-reveal] (та же специфичность, но объявлено выше),
   translate оставался бы без перехода — и блок «прыгал» на ховере. */
.has-motion .hover-lift {
  transition:
    opacity var(--reveal-duration, 820ms) $motion-ease var(--reveal-delay, 0ms),
    transform var(--reveal-duration, 820ms) $motion-ease var(--reveal-delay, 0ms),
    translate 560ms $motion-ease-out,
    box-shadow 560ms $motion-ease-out;
}

.has-motion .hover-lift:hover {
  translate: 0 -8px;
  box-shadow: 0 28px 56px -30px rgba(26, 35, 59, 0.4);
}

.hover-zoom-img img {
  transition: scale 700ms $motion-ease-out;
}

.has-motion .hover-zoom-img:hover img {
  scale: 1.045;
}

/* Кнопки-ссылки лендинга: лёгкий подъём + блик */
.has-motion .action-red,
.has-motion .action-outline-red,
.has-motion .action-white {
  transition:
    background-color 300ms ease,
    color 300ms ease,
    translate 300ms $motion-ease-out,
    box-shadow 300ms $motion-ease-out;
}

.has-motion .action-red:hover,
.has-motion .action-outline-red:hover,
.has-motion .action-white:hover {
  translate: 0 -3px;
}

.has-motion .action-red:hover {
  box-shadow: 0 16px 32px -12px rgba(255, 73, 92, 0.55);
}

.has-motion .action-red svg {
  transition: translate 300ms $motion-ease-out;
}

.has-motion .action-red:hover svg {
  translate: 4px 0;
}

/* --------------------------------------------------------------------------
   6. Живой фон hero-секции

   У .section-item уже есть свой фоновый паттерн (start-bg.svg, у каждой
   страницы свой). Ничего не дорисовываем — просто ведём этот фон за скроллом
   через background-position. Двигаем именно позицию фона, а не элемент:
   картинка объявлена в common.scss и переопределяется на каждой странице,
   отдельный трансформируемый слой потребовал бы её оттуда вынуть.

   За курсором фон намеренно НЕ ходит: подёргивание на каждое движение мыши
   выглядело неаккуратно. Остался только скролл-параллакс.

   --bg-par-y ставит v-parallax с prop: "--bg-par-y" (не общий --par-y:
   тот наследуется детям).
   ----------------------------------------------------------------------- */

.has-motion .section-item {
  background-position: 50% calc(50% + var(--bg-par-y, 0px));
}

/* --------------------------------------------------------------------------
   7. prefers-reduced-motion — глушим всё
   ----------------------------------------------------------------------- */

.no-motion [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.no-motion .float-y,
.no-motion .float-drift,
.no-motion .float-breathe,
.no-motion .section-radial {
  animation: none !important;
}

.no-motion .section-item {
  background-position: center;
}

.no-motion .parallax {
  transform: none !important;
}

.no-motion .parallax-cx {
  transform: translateX(-50%) !important;
}

.no-motion .hover-lift:hover,
.no-motion .action-red:hover,
.no-motion .action-outline-red:hover,
.no-motion .action-white:hover {
  translate: none !important;
}