/* motion.css - плавность сайта одной системой (02.10.2026, вторая версия 02.10).
 *
 * Заменяет ultra-smooth.css, smooth-animations.css, page-transitions.js и smooth-scroll.js.
 * Те вешали «transition: all 0.8s !important» на КАЖДЫЙ элемент (страница «плыла»,
 * телефоны лагали), прятали страницу до загрузки HTML, задерживали каждый переход
 * по ссылке на 0,2 с и крутили прокрутку к якорю 1,5 с.
 *
 * Здесь:
 *   - переходы между страницами - встроенные View Transitions браузера: без задержки,
 *     обычное перетекание кадров браузера (оно смешивает без тёмного провала посередине);
 *   - окна плавно выезжают и уходят без правок их JS: @starting-style + переход
 *     display с allow-discrete. Каждое окно названо точно по id/классу: в магазине
 *     .modal - это само окно, а на главной - фон, общее правило сломало бы одно из них;
 *   - смена экранов (вход/регистрация, вкладки кабинета, экраны мини-приложения) -
 *     только когда их переключает человек (html.mo-ready ставит motion.js после загрузки),
 *     при открытии страницы её проявляет сам переход, второй анимации не нужно;
 *   - блоки, которые кабинет дорисовывает данными с сервера, проявляются, а не выскакивают;
 *   - лёгкое «нажатие» кнопок.
 * Браузер, который чего-то не умеет, просто показывает всё как раньше, без анимации.
 * Первый экран главной этот файл не трогает.
 *
 * НЕЛЬЗЯ: scroll-behavior: smooth на html. Главная, открывая окно, фиксирует страницу
 * (body position: fixed) и при закрытии возвращает позицию через scrollTo - с этим
 * правилом возврат становился плавным, и страницу «везло» сверху вниз (02.10). То же в
 * кабинете и мини-приложении при scrollTo(0, 0). Плавная прокрутка к якорям - в motion.js.
 */

@view-transition { navigation: auto; }

html { scroll-padding-top: 90px; }

/* Кабинет: вошедший человек сразу видит кабинет, а не мелькнувшую форму входа.
 * Класс ставит маленький скрипт в <head> cabinet.html до первой отрисовки, если в
 * браузере сохранён вход; снимается сразу после того, как кабинет сам решил, что показать. */
html.auth-boot #loginForm { display: none !important; }
html.auth-boot #cabinetView.hidden { display: block !important; }

@keyframes mo-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes mo-fade { from { opacity: 0; } }

/* Небо одинаковое на всех страницах (02.10): одни и те же анимации звёзд и планет и
 * общие «часы» --sky-t из space-stars.js. Раньше на главной и внутренних страницах
 * были разные keyframes, а фаза начиналась с нуля - при переходе фон «прыгал».
 * Не под prefers-reduced-motion: небо анимировано и раньше, меняем только фазу. */
@keyframes mo-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes mo-float {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -20px); }
  50% { transform: translate(-10px, -30px); }
  75% { transform: translate(10px, -20px); }
}
html .star { animation: mo-twinkle 3s ease-in-out infinite; }
html .planet { animation: mo-float 20s ease-in-out infinite; animation-delay: var(--sky-t, 0s); }
html .planet-2 { animation-delay: calc(var(--sky-t, 0s) + 5s); }
html .planet-3 { animation-delay: calc(var(--sky-t, 0s) + 10s); }

/* Кабинет: подписки из прошлого визита показаны сразу; когда свежие данные их
 * заменяют, повторная анимация появления не нужна - иначе блок мигнёт. */
#subscriptionsList.mo-quiet > * { animation: none !important; }

@media (prefers-reduced-motion: no-preference) {

  /* ── Переход между страницами: штатное перетекание, чуть длиннее ── */
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .32s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }

  /* ── Окна: фон плавно темнеет и светлеет ──
   * Первая строка transition - для старых браузеров (без display она валидна),
   * вторая с allow-discrete перекрывает её там, где поддерживается. */
  #orderModal, #cvpnModal, #subPeekModal, .wt-back, #modalBg {
    transition: opacity .26s ease;
    transition: opacity .26s ease, display .26s allow-discrete, overlay .26s allow-discrete;
  }
  /* закрыто: прозрачно и не ловит клики, пока доигрывает уход */
  #orderModal:not(.active), #cvpnModal:not(.active), #subPeekModal:not(.active),
  .wt-back:not(.open), #modalBg[style*="none"] {
    opacity: 0; pointer-events: none;
  }
  @starting-style {
    #orderModal.active, #cvpnModal.active, #subPeekModal.active, .wt-back.open, #modalBg { opacity: 0; }
  }

  /* ── Окна: само окно выезжает снизу с лёгким увеличением ── */
  #orderModal .modal-content, #cvpnModal .modal-content, #subPeekModal .modal-content,
  .wt-back .wt-box, #modalBg > .modal {
    transition: transform .34s cubic-bezier(.2, .9, .25, 1), opacity .24s ease;
  }
  #orderModal:not(.active) .modal-content, #cvpnModal:not(.active) .modal-content,
  #subPeekModal:not(.active) .modal-content, .wt-back:not(.open) .wt-box,
  #modalBg[style*="none"] > .modal {
    opacity: 0; transform: translateY(26px) scale(.96);
  }
  @starting-style {
    #orderModal.active .modal-content, #cvpnModal.active .modal-content,
    #subPeekModal.active .modal-content, .wt-back.open .wt-box, #modalBg > .modal {
      opacity: 0; transform: translateY(26px) scale(.96);
    }
  }

  /* ── Чат поддержки и меню «Ещё» в кабинете: вход у них уже есть, добавляем уход ── */
  #supWidgetPanel, #moreSheet {
    transition: opacity .18s ease, transform .18s ease;
    transition: opacity .18s ease, transform .18s ease, display .18s allow-discrete;
  }
  #supWidgetPanel[hidden], #moreSheet[hidden] { opacity: 0; transform: translateY(10px) scale(.98); }

  /* ── Смена экранов - только когда переключает человек ──
   * Анимация без fill-mode: после неё у элемента не остаётся своего transform. */
  html.mo-ready :is(#loginForm, #registerForm, #forgotForm, #verifyForm, #forgotStep1, #forgotStep2,
    #cabinetView, .cabinet-tab-content.active, .screen.on, #sub-box) {
    animation: mo-rise .28s cubic-bezier(.2, .8, .2, 1);
  }

  /* ── Данные с сервера: блок проявляется, а не выскакивает ──
   * Только прозрачность, без сдвига: высота блока и так меняется, лишнее движение
   * поверх этого выглядит дёргано. Таймеров перерисовки в кабинете нет, мигать нечему. */
  :is(#subscriptionsList, #autopayBox, #extraBox, #wlBox, #reviewBox, #tariffPicker,
      #cvpnNodes, #cvpnDevices, #cvpnLedger, #trafficSubCard) > * {
    animation: mo-fade .35s ease;
  }

  /* ── Нажатие: кнопка чуть сжимается под пальцем ──
   * :where - нулевая специфичность, свои эффекты страниц важнее. */
  :where(.buy-button, .cta-button, .cta-secondary, .btn-primary, .btn-secondary, .cabinet-tab-btn):active {
    transform: scale(.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}