/* ==========================================================================
   Bay Area Movers — анимации
   Только transform/opacity (композитные свойства, без рефлоу).
   Всё выключается при prefers-reduced-motion.
   ========================================================================== */

/* ── Появление при скролле ──────────────────────────────────────────────────
   JS вешает .reveal на элементы и .in, когда они попали во вьюпорт.
   Без JS (или если IntersectionObserver недоступен) — контент виден сразу:
   html.bam-js включается скриптом, до этого правила ниже не действуют. */
.bam-js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.bam-js .reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.bam-js .reveal-right{opacity:0;transform:translateX(30px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.bam-js .reveal-zoom{opacity:0;transform:scale(.965);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.bam-js .reveal.in,
.bam-js .reveal-left.in,
.bam-js .reveal-right.in,
.bam-js .reveal-zoom.in{opacity:1;transform:none}

/* Каскад внутри группы: JS проставляет --d (индекс элемента). */
.bam-js [style*="--d"]{transition-delay:calc(var(--d) * 90ms)}

/* ── Шапка: уплотняется при скролле ─────────────────────────────────────── */
.header{transition:height .3s ease,background .3s ease,box-shadow .3s ease}
.header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.55)}
.header.scrolled .nav{height:calc(var(--nav-h) - 16px)}
.header .nav{transition:height .3s ease}
.header.scrolled .brand img{height:34px}
.header .brand img{transition:height .3s ease}

/* ── Бегущая строка городов ─────────────────────────────────────────────── */
.marquee-track{animation:bam-marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes bam-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Hero: медленный «наезд» на фото ────────────────────────────────────── */
.bam-kenburns>img,
.hero-photo.bam-kenburns:before{animation:bam-kb 22s ease-in-out infinite alternate}
@keyframes bam-kb{from{transform:scale(1)}to{transform:scale(1.08)}}

/* Параллакс: JS пишет --py (сдвиг в px) на элементы .bam-parallax */
.bam-parallax>img{transform:translate3d(0,var(--py,0),0) scale(1.12);will-change:transform}

/* ── Счётчики в полосе фактов ───────────────────────────────────────────── */
.bam-count{font-variant-numeric:tabular-nums}

/* ── Строки услуг: подъезд стрелки и подсветка ──────────────────────────── */
.service,.srow{transition:background .3s ease,padding .3s ease}
.service:hover,.srow:hover{background:rgba(198,161,91,.045)}
.service h3,.srow h3{transition:color .3s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
.service:hover h3,.srow:hover h3{color:var(--gold);transform:translateX(10px)}
.service .arrow,.srow .arrow{transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .3s ease;opacity:.55}
.service:hover .arrow,.srow:hover .arrow{transform:translate(6px,-6px);opacity:1}

/* ── Карточки/плитки: мягкий подъём ─────────────────────────────────────── */
.bam-lift{transition:transform .35s cubic-bezier(.22,.61,.36,1),background .3s ease}
.bam-lift:hover{transform:translateY(-4px)}

/* ── Шаги процесса: последовательная подсветка ──────────────────────────── */
.step,.pstep{transition:background .35s ease,border-color .35s ease}
.step.lit,.pstep.lit{background:rgba(198,161,91,.05)}
.step b,.pstep b{transition:color .35s ease,transform .35s ease}
.step.lit b,.pstep.lit b{color:var(--gold2);transform:translateY(-2px)}

/* ── Форма заявки: шаги и прогресс ──────────────────────────────────────── */
/* Шаги показываются по одному только при живом JS; без него видны все. */
.bam-js .bam-step{display:none}
.bam-js .bam-step.active{display:block;animation:bam-step-in .45s cubic-bezier(.22,.61,.36,1) both}
.bam-js .bam-step .step-nav{display:flex}
.step-nav,.bam-progress,.form-steps{display:none}
.bam-js .bam-progress,.bam-js .form-steps{display:flex}
.bam-js .bam-progress{display:block}
@keyframes bam-step-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.bam-progress{height:2px;background:var(--line);position:relative;overflow:hidden}
.bam-progress i{
  position:absolute;inset:0 auto 0 0;background:var(--gold);
  width:var(--p,33%);transition:width .45s cubic-bezier(.22,.61,.36,1);
}
.bam-sending{opacity:.55;pointer-events:none}
.bam-spin{
  display:inline-block;width:14px;height:14px;margin-left:10px;
  border:2px solid rgba(8,8,8,.3);border-top-color:#080808;border-radius:50%;
  animation:bam-spin .7s linear infinite;
}
@keyframes bam-spin{to{transform:rotate(360deg)}}

/* ── Аккордеон FAQ ──────────────────────────────────────────────────────── */
/* Свёрнутое состояние — только при живом JS, иначе ответы недоступны. */
.bam-js .bam-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1)}
.bam-js .bam-acc.open .bam-acc-body{grid-template-rows:1fr}
.bam-js .bam-acc-body>div{overflow:hidden}
.bam-acc-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.bam-js .bam-acc-head{cursor:pointer}
.bam-acc-head i{display:none}
.bam-js .bam-acc-head i{display:block}
.bam-acc-head i{font-style:normal;color:var(--gold);transition:transform .35s ease;flex:none}
.bam-acc.open .bam-acc-head i{transform:rotate(45deg)}

/* ── Кнопка «наверх» ────────────────────────────────────────────────────── */
.bam-top{
  position:fixed;right:22px;bottom:22px;z-index:40;
  width:46px;height:46px;border:1px solid var(--line2);background:rgba(5,5,5,.85);
  color:var(--gold);cursor:pointer;font-size:17px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s,border-color .25s ease;
}
.bam-top.show{opacity:1;visibility:visible;transform:none}
.bam-top:hover{border-color:var(--gold)}

/* ── Мобильный: только вертикальное появление ───────────────────────────────
   translateX(±30px) на узком экране выносит блок за край вьюпорта и даёт
   горизонтальную прокрутку всей страницы (и остаётся видимым, если элемент
   не успел проявиться). Поэтому вбок двигаем только на широких экранах. */
@media(max-width:1000px){
  .bam-js .reveal-left,
  .bam-js .reveal-right{transform:translateY(26px)}
}

/* ── Уважение к системной настройке ─────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bam-js .reveal,
  .bam-js .reveal-left,
  .bam-js .reveal-right,
  .bam-js .reveal-zoom{opacity:1;transform:none;transition:none}
  .marquee-track,
  .bam-kenburns>img,
  .hero-photo.bam-kenburns:before{animation:none}
  .bam-parallax>img{transform:none}
  .service:hover h3,.srow:hover h3{transform:none}
  .service:hover .arrow,.srow:hover .arrow{transform:none}
  .bam-lift:hover{transform:none}
  .bam-step.active{animation:none}
}