/* ==========================================================================
   VYSHKA home-motion r1 — визуальный/движковый слой главной vyshka.cloud
   Агент: home-motion (social-week w5 / academy-max). Дата: 2026-09-14.
   Канон: vy-motion (мессенджер, w1/motion-design) — токены --vy-motion-*,
   kill-switch, transform/opacity-only, 60fps, спокойные частоты.
   --------------------------------------------------------------------------
   ГРАНИЦА ВЛАДЕНИЯ (координация с home-sections):
   • Слой НЕ владеет разметкой новых секций home-sections (download/instruction):
     селекторы ниже ограничены существующими r60-* классами и собственными
     vy-* классами этого слоя. Новые секции не анимируются точечно.
   • Слой добавляет только этот файл + home-motion-r1.js + 2 строки в entry
     (link+script после app-stylesheet). Откат: удалить 2 строки (бэкап рядом).
   --------------------------------------------------------------------------
   Правила слоя (как в каноне):
   1. Только transform / opacity / translate (индивидуальные transform-свойства)
      — box-shadow/layout не анимируются.
   2. Бесконечные анимации — только уже существующие r60-float семьи приложения;
      слой не добавляет новых бесконечных. Мерцания в покое нет.
   3. Kill-switch двойной: prefers-reduced-motion (CSS) + data-vy-motion="off"
      (JS-зеркало, ключ localStorage vyshka-home-reduce-motion).
   4. Пауза скрытой вкладки: html[data-vy-hidden] → animation-play-state paused.
   5. Токены --vy-motion-* НЕ пересекаются с app-токенами (--vy-ease, --vy-dur-*
      принадлежат приложению и здесь не переопределяются).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ТОКЕНЫ ДВИЖЕНИЯ
   -------------------------------------------------------------------------- */
:root {
  --vy-motion-fast: 120ms;                            /* микро-ховеры */
  --vy-motion-base: 200ms;                            /* подъём карточек */
  --vy-motion-slow: 320ms;                            /* reveal-переходы */
  --vy-motion-ease: cubic-bezier(0.2, 0.7, 0.3, 1);         /* standard */
  --vy-motion-ease-emph: cubic-bezier(0.3, 0.7, 0.1, 1);    /* emphasized */
  --vy-motion-spring: cubic-bezier(0.34, 1.35, 0.5, 1);     /* spring */
  --vy-motion-reveal-dy: 22px;                         /* вынос reveal */
  --vy-motion-lift-y: -2px;                            /* добавка к app-lift -3px */
}

/* --------------------------------------------------------------------------
   2. KILL-SWITCH — путь A: системный prefers-reduced-motion (без JS)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vy-motion-fast: 0.01ms;
    --vy-motion-base: 0.01ms;
    --vy-motion-slow: 0.01ms;
  }
  .home-r60,
  .home-r60 *,
  .home-r60 *::before,
  .home-r60 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* декоративные флоты замораживаются начисто (статичная поза, без прыжка
     в конечный кадр бесконечной анимации) */
  .home-r60 .r60-motion { animation: none !important; }
  .home-r60.vy-hero-enter .r60-hero-copy > *,
  .home-r60.vy-hero-enter .r60-illustration { animation: none !important; }
  #vy-main { scroll-behavior: auto !important; }
}

/* Путь B: JS-зеркало (совпадает с путём A по эффекту) */
html[data-vy-motion="off"] { --vy-motion-fast: 0.01ms; --vy-motion-base: 0.01ms; --vy-motion-slow: 0.01ms; }
html[data-vy-motion="off"] .home-r60,
html[data-vy-motion="off"] .home-r60 *,
html[data-vy-motion="off"] .home-r60 *::before,
html[data-vy-motion="off"] .home-r60 *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
html[data-vy-motion="off"] .home-r60 .r60-motion { animation: none !important; }
html[data-vy-motion="off"] .home-r60.vy-hero-enter .r60-hero-copy > *,
html[data-vy-motion="off"] .home-r60.vy-hero-enter .r60-illustration { animation: none !important; }
html[data-vy-motion="off"] #vy-main { scroll-behavior: auto !important; }

/* --------------------------------------------------------------------------
   3. ПАУЗА СКРЫТОЙ ВКЛАДКИ (CSS-анимации жгут CPU даже в фоне)
   -------------------------------------------------------------------------- */
html[data-vy-hidden] .home-r60 *,
html[data-vy-hidden] .home-r60 *::before,
html[data-vy-hidden] .home-r60 *::after {
  animation-play-state: paused !important;
}

/* --------------------------------------------------------------------------
   4. ГЛАВНАЯ (hero) — спокойный вход один раз. Класс вешает home-motion-r1.js
      сразу после монтирования .home-r60 (до первой отрисовки — без вспышки).
      Заголовок h1 — ТОЛЬКО подъём (opacity не трогаем: LCP-элемент).
   -------------------------------------------------------------------------- */
@keyframes vy-hero-rise {
  from { transform: translateY(var(--vy-motion-reveal-dy)); }
  to   { transform: translateY(0); }
}
@keyframes vy-hero-rise-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vy-hero-soft {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.home-r60.vy-hero-enter .r60-hero-copy > * {
  animation: vy-hero-rise-fade 0.42s var(--vy-motion-ease-emph) both;
}
.home-r60.vy-hero-enter .r60-hero-copy > h1 {
  animation-name: vy-hero-rise;               /* LCP-safe: без opacity */
}
.home-r60.vy-hero-enter .r60-hero-copy > :nth-child(1) { animation-delay: 0ms; }
.home-r60.vy-hero-enter .r60-hero-copy > :nth-child(2) { animation-delay: 60ms; }
.home-r60.vy-hero-enter .r60-hero-copy > :nth-child(3) { animation-delay: 110ms; }
.home-r60.vy-hero-enter .r60-hero-copy > :nth-child(4) { animation-delay: 160ms; }
.home-r60.vy-hero-enter .r60-hero-copy > :nth-child(5) { animation-delay: 200ms; }
.home-r60.vy-hero-enter .r60-illustration {
  animation: vy-hero-soft 0.5s var(--vy-motion-ease-emph) 90ms both;
}

/* --------------------------------------------------------------------------
   5. ХОВЕР-УСИЛЕНИЕ КАРТОЧЕК (только устройства с hover).
      Приложение уже поднимает карточки на transform:translateY(-3px) — слой
      добавляет деликатную добавку через НЕЗАВИСИМОЕ свойство translate
      (итог ≈ -5px, без борьбы за transform). transition-набор — супerset
      app-правил (transform/.18s, background/.18s, border-color/.18s).
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .r60-quick-card,
  .r60-category {
    transition:
      translate var(--vy-motion-base) var(--vy-motion-ease),
      transform 0.18s ease,
      background 0.18s ease,
      border-color 0.18s ease;
  }
  .r60-quick-card:hover,
  .r60-category:hover { translate: 0 var(--vy-motion-lift-y); }

  /* иконка карточки — микро-вздох (scale, не трогаем чужие transform-переходы) */
  .r60-quick-card .r60-icon { transition: transform var(--vy-motion-base) var(--vy-motion-spring); }
  .r60-quick-card:hover .r60-icon { transform: scale(1.07); }

  /* хвостовая стрелка quick-card — подводка, как у r60-category */
  .r60-quick-card > .vy-icon:last-child { transition: transform 0.18s ease, translate var(--vy-motion-base) var(--vy-motion-ease); }
  .r60-quick-card:hover > .vy-icon:last-child { translate: 3px 0; }

  /* главные кнопки — лёгкий парение-ховер (active-scale остаётся у app) */
  .home-r60 .r60-primary,
  .home-r60 .r60-secondary {
    transition:
      translate var(--vy-motion-base) var(--vy-motion-ease),
      transform 0.18s ease,
      background 0.18s ease,
      border-color 0.18s ease;
  }
  .home-r60 .r60-primary:hover,
  .home-r60 .r60-secondary:hover { translate: 0 -1px; }

  /* текстовая ссылка секции — стрелка-подводка */
  .r60-section-head .r60-text-link .vy-icon { transition: translate var(--vy-motion-base) var(--vy-motion-ease); }
  .r60-section-head .r60-text-link:hover .vy-icon { translate: 3px 0; }

  /* футер-ссылки — микро-подъём (независимое свойство, конфликта нет) */
  .r60-footer nav a { transition: translate var(--vy-motion-fast) var(--vy-motion-ease), background-color 0.12s ease, color 0.12s ease; }
  .r60-footer nav a:hover { translate: 0 -1px; }
}

/* --------------------------------------------------------------------------
   6. ПЛАВНЫЙ ЯКОРНЫЙ СКРОЛЛ — только JS (home-motion-r1.js перехватывает
      ТОЛЬКО href="#id" с существующим элементом; хэши роутера вида #/home
      не трогаются). CSS scroll-behavior на #vy-main НЕ ставим сознательно:
      иначе штатные программные скроллы приложения (сброс на роут-свитчах)
      стали бы анимированными. reduced-motion → JS даёт behavior:'auto'.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. ПЕЧАТЬ: ничего скрытого (reveal делается через WAAPI без CSS-скрытий).
   --------------------------------------------------------------------------
   60fps-бюджет: все keyframes слоя — transform/opacity; will-change не
   используется (переходы короткие, композитинг и так на GPU).
   ========================================================================== */