/* =========================================================
   ГаражБатя — ELEVATE / MOTION
   Стили для эффектов motion.js (не дублируют anim.js).
   Грузится последним слоем (см. head.php). Токены — из
   elevate/tokens.css и theme.css (--accent-grad/--ease/--dur).
   Контракт: только визуальная поддержка JS-хуков, без структуры.
   Уважает prefers-reduced-motion.
   ========================================================= */

/* =========================================================
   1. SCROLL-PROGRESS (#scroll-progress) — тонкая полоса сверху
   ========================================================= */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  z-index: 9999;          /* выше хедера/модалок-подложки, ниже самой модалки при необходимости */
  pointer-events: none;
  background: var(--accent-grad, linear-gradient(90deg, #ff6a1a, #ff8f4d));
  box-shadow: 0 0 12px rgba(255, 106, 26, .45);
  border-bottom-right-radius: 2px;
  will-change: width;
  /* Лёгкое сглаживание скачков ширины между кадрами rAF. */
  transition: width .08s linear;
}

/* =========================================================
   2. МАГНИТНЫЕ CTA (.is-magnetic) — плавный возврат к центру
   transform пишет JS inline; CSS отвечает за упругий возврат.
   ========================================================= */
.is-magnetic {
  /* Возврат к transform:'' (нулю) — плавный. Во время движения
     JS обновляет transform каждый кадр, transition сглаживает. */
  transition: transform .35s var(--ease, cubic-bezier(.22, 1, .36, 1));
  will-change: transform;
}

/* =========================================================
   3. TILT-КАРТОЧКИ (.is-tilt) — 3D-наклон по курсору
   ========================================================= */
.is-tilt {
  transform-style: preserve-3d;
  transition: transform .4s var(--ease, cubic-bezier(.22, 1, .36, 1));
  will-change: transform;
}

/* =========================================================
   4. МУЛЬТИ-ПАРАЛЛАКС ([data-parallax]) — плавность хода
   ========================================================= */
[data-parallax] {
  will-change: transform;
}

/* =========================================================
   5. HERO-GLOW (.hero.has-glow) — следящее за курсором пятно
   Рисуется псевдоэлементом; позиция — из --mx/--my (пишет JS).
   ========================================================= */
.hero.has-glow {
  --mx: 50%;
  --my: 30%;
}
.hero.has-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;            /* над фоном .hero__bg, под контентом */
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease, ease);
  background: radial-gradient(
    340px circle at var(--mx) var(--my),
    rgba(255, 106, 26, .14) 0%,
    rgba(255, 106, 26, .05) 35%,
    rgba(255, 106, 26, 0) 65%
  );
}
.hero.has-glow.is-glowing::after {
  opacity: 1;
}

/* =========================================================
   6. ДОСТУПНОСТЬ — prefers-reduced-motion: финал без движения
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  #scroll-progress {
    display: none;
    transition: none;
  }
  .is-magnetic,
  .is-tilt,
  [data-parallax] {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
  .hero.has-glow::after {
    display: none;
  }
}