/* ============================================================
   РЕАКЦИИ НА НАВЕДЕНИЕ МЫШИ
   У каждого типа элементов — своя реакция. Работает только там,
   где есть мышь (на телефоне наведения нет). При «уменьшить
   движение» сдвиги и масштаб выключены, остаются смены цвета.
   ============================================================ */

/* ---------- Логотип в шапке ---------- */

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px rgba(18, 21, 26, .22);
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}

/* ---------- Нажатие: кнопка слегка «вдавливается» ---------- */

.btn:active { transform: translateY(0) scale(.98); }


@media (hover: hover) and (pointer: fine) {

  /* --- Логотип: приподнимается и получает серебристый ободок --- */
  .brand:hover .brand-logo {
    transform: rotate(-4deg) scale(1.06);
    box-shadow: 0 0 0 2px var(--silver), 0 10px 22px rgba(18, 21, 26, .3);
  }


  /* --- Главная кнопка: по ней пробегает блик, вокруг — светлое кольцо, стрелка уходит вверх-вправо --- */
  .btn-main { position: relative; overflow: hidden; isolation: isolate; }
  .btn-main::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    z-index: -1;
    background: linear-gradient(100deg, transparent, var(--btn-shine), transparent);
    transform: skewX(-18deg);
    transition: left 0s;
    pointer-events: none;
  }
  .btn-main:hover::after { left: 130%; transition: left 600ms var(--ease); }

  .btn-main:hover {
    background: var(--btn-hover-bg);
    box-shadow: inset 0 1px 0 var(--btn-hi), 0 0 0 3px var(--btn-ring), var(--btn-shadow);
  }
  .btn-arrow { transition: transform var(--slow) var(--ease); }
  .btn:hover .btn-arrow { transform: translate(3px, -3px); }


  /* --- Прозрачная кнопка: заливается слева направо --- */
  .btn-ghost { position: relative; overflow: hidden; isolation: isolate; }
  .btn-ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    opacity: .08;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--slow) var(--ease);
  }
  .btn-ghost:hover::before { transform: scaleX(1); }


  /* --- Пункты меню: линия растёт из центра --- */
  .site-nav .nav-link,
  .footer-docs .nav-link { position: relative; }
  .site-nav .nav-link::after,
  .footer-docs .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transition: left var(--slow) var(--ease), right var(--slow) var(--ease);
  }
  .site-nav .nav-link:hover::after,
  .footer-docs .nav-link:hover::after { left: 0; right: 0; }


  /* --- Карточки (стекло и мат): приподнимаются, рамка становится чётче --- */
  .hover-card {
    position: relative;
    transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), border-color var(--base) var(--ease);
  }
  .hover-card:hover { transform: translateY(-4px); }
  .glass.hover-card:hover { border-color: rgba(255, 255, 255, .95); }
  .ctx-dark .glass.hover-card:hover { border-color: rgba(204, 210, 217, .42); }
  .ctx-light .glass.hover-card:hover { box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 54px rgba(18, 21, 26, .18); }
  .ctx-dark .glass.hover-card:hover  { box-shadow: inset 0 1px 0 var(--glass-hi), 0 26px 60px rgba(0, 0, 0, .5); }


  /* --- Строки списков: строка сдвигается, значок становится ярче --- */
  .hover-list li > * { transition: transform var(--base) var(--ease), color var(--base) var(--ease); }
  .hover-list li:hover > span { transform: translateX(6px); }
  .hover-list li:hover > svg { transform: scale(1.25); color: var(--bar); }
  .fit-yes .hover-list li:hover > svg { transform: scale(1.25) rotate(-8deg); }
  .fit-no  .hover-list li:hover > svg { transform: scale(1.25) rotate(90deg); }


  /* --- Цифры под первым экраном: линия сверху заполняется, число поднимается --- */
  .fact { position: relative; }
  .fact::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--bar);
    transition: width 400ms var(--ease);
  }
  .fact .num { display: inline-block; transition: transform var(--slow) var(--ease); }
  .fact:hover::before { width: 100%; }
  .fact:hover .num { transform: translateY(-4px); }


  /* --- Первый экран: стеклянная карточка всплывает (фото двигает js/hero-pan.js) --- */
  .hero-card { transition: transform var(--slow) var(--ease); }
  .hero-card:hover { transform: translateY(-6px); }


  /* --- Таблица экономики: строка подсвечивается --- */
  .econ-table tbody tr td { transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
  .econ-table tbody tr:hover td { background: rgba(255, 255, 255, .55); color: var(--ink); }
  .econ-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--bar); padding-left: var(--s2); }


  /* --- Шкала Иваново: месяц под курсором вырастает --- */
  .timeline-mini .track span { transition: transform var(--fast) var(--ease); transform-origin: bottom; }
  .timeline-mini .track span:hover { transform: scaleY(2.2); }


  /* --- Карточка формата: цена чуть увеличивается --- */
  .format-card .format-price { display: inline-block; transform-origin: left bottom; transition: transform var(--slow) var(--ease); }
  .format-card:hover .format-price { transform: scale(1.05); }


  /* --- Шаги запуска: карточка поднимается, метка шага становится плашкой --- */
  .hover-step { transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease); }
  .hover-step:hover { transform: translateY(-6px); }
  .step-tag {
    align-self: flex-start;
    padding: 2px 8px;
    margin-left: -8px;
    border-radius: 6px;
    transition: background-color var(--base) var(--ease), color var(--base) var(--ease);
  }
  .hover-step:hover .step-tag { background: var(--ink); color: var(--btn-ink); }
  .mat-graphite.hover-step:hover .step-tag { background: var(--silver); color: #16181b; }


  /* --- Города сети: город уезжает вправо, цифры становятся контрастнее --- */
  .city-row > span { transition: transform var(--base) var(--ease), color var(--base) var(--ease); }
  .city-row:hover > span:first-child { transform: translateX(8px); }
  .city-row:hover > .muted { color: var(--ink); }


  /* --- Фото точек: плавное приближение --- */
  .zoom-photo img { transition: transform 900ms var(--ease); }
  .zoom-photo:hover img,
  .founder:hover .zoom-photo img { transform: scale(1.06); }


  /* --- Вопросы: текст сдвигается, плюс получает круглую подложку --- */
  .faq-q > span { transition: transform var(--base) var(--ease); }
  .faq-q:hover > span { transform: translateX(6px); }
  .faq-q .faq-plus { border-radius: 50%; box-sizing: content-box; padding: 6px; margin: -6px; transition: transform var(--base) var(--ease), background-color var(--base) var(--ease); }
  .faq-q:hover .faq-plus { background: rgba(22, 24, 27, .08); }
}


/* ---------- Уменьшить движение: без сдвигов и масштаба ---------- */

@media (prefers-reduced-motion: reduce) {
  .hover-card:hover, .hover-step:hover, .hero-card:hover,
  .fact:hover .num, .format-card:hover .format-price,
  .hover-list li:hover > span, .hover-list li:hover > svg,
  .city-row:hover > span:first-child, .faq-q:hover > span,
  .zoom-photo:hover img, .founder:hover .zoom-photo img,
  .brand:hover .brand-logo, .btn:hover .btn-arrow, .timeline-mini .track span:hover {
    transform: none !important;
  }
  .btn-main:hover::after { transition: none; left: -60%; }
}