/* ЦИФРОВОЙ РЕЙС — анимированный автопарк (14.09.2026) */

.fleet-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ================= ДОРОГА ================= */
.road {
  position: relative; width: 100%; height: 132px; overflow: hidden;
  margin: 0; pointer-events: none; z-index: 1;
}
.road-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  background: linear-gradient(180deg, #2a2118 0%, #1a1410 60%, #0f0c08 100%);
  box-shadow: 0 -1px 0 rgba(255,255,255,.06) inset, 0 -12px 30px rgba(28,25,23,.18);
}
.road-strip::before {
  content: ''; position: absolute; left: 0; right: 0; top: 20px; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(245,192,144,.85) 0 38px, transparent 38px 82px);
  animation: roadDash 1.1s linear infinite;
}
.road-strip::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(194,120,60,.55), transparent);
}
@keyframes roadDash {
  from { background-position-x: 0; }
  to   { background-position-x: -82px; }
}
.road.rev .road-strip::before { animation-direction: reverse; }

/* светлая дорога внутри тёмной секции */
.road.light .road-strip {
  background: linear-gradient(180deg, #d9cebb 0%, #c8bda8 60%, #b9ad96 100%);
  box-shadow: 0 -1px 0 rgba(255,255,255,.5) inset, 0 -12px 26px rgba(28,25,23,.1);
}
.road.light .road-strip::before {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 38px, transparent 38px 82px);
}

/* ================= ТРАНСПОРТ ================= */
.veh {
  position: absolute; bottom: 26px; left: 0;
  width: var(--w, 210px);
  animation: vehDrive var(--dur, 17s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.veh svg { width: 100%; height: auto; display: block; animation: vehBump .42s ease-in-out infinite alternate; }
.road.rev .veh { animation-name: vehDriveRev; }
.road.rev .veh svg { transform: scaleX(-1); }

@keyframes vehDrive {
  from { transform: translate3d(-24vw, 0, 0); }
  to   { transform: translate3d(112vw, 0, 0); }
}
@keyframes vehDriveRev {
  from { transform: translate3d(112vw, 0, 0); }
  to   { transform: translate3d(-24vw, 0, 0); }
}
@keyframes vehBump {
  from { transform: translateY(0); }
  to   { transform: translateY(-2.5px); }
}
.road.rev .veh svg { animation-name: vehBumpRev; }
@keyframes vehBumpRev {
  from { transform: scaleX(-1) translateY(0); }
  to   { transform: scaleX(-1) translateY(-2.5px); }
}

.wheel { transform-box: fill-box; transform-origin: center; animation: wheelSpin .5s linear infinite; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }

.beam { animation: beamGlow 2.6s ease-in-out infinite; }
@keyframes beamGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.taxi-lamp { animation: lampBlink 1.4s steps(1, end) infinite; }
@keyframes lampBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .42; } }

/* ================= ЛЕНТА ТИПОВ ТС ================= */
.fleet-strip {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 34px;
}
.fleet-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 14px; border-radius: 18px;
  background: linear-gradient(160deg, #ffffff 0%, #f5f0e8 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 3px 0 rgba(28,25,23,.08), 0 10px 24px rgba(28,25,23,.1);
  font-size: 13.5px; font-weight: 700; color: var(--ink2);
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.fleet-chip svg { width: 54px; height: auto; }
.fleet-chip:hover {
  transform: translateY(-6px) rotateX(10deg) scale(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 5px 0 rgba(28,25,23,.09), 0 18px 36px rgba(194,120,60,.26);
}
.fleet-chip:hover .wheel { animation-duration: .28s; }

/* ================= ЖИВЫЕ ДЕТАЛИ ================= */
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #16A34A; margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
  70%  { box-shadow: 0 0 0 11px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* исправление: шапка таблицы не липкая — наезжала на первую строку */
.tbl thead th { position: static !important; top: auto !important; }

@media (max-width: 720px) {
  .road { height: 118px; }
  .veh { bottom: 20px; width: calc(var(--w, 210px) * .88); }
  .fleet-chip { padding: 10px 16px 10px 12px; font-size: 12.5px; }
  .fleet-chip svg { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .veh, .veh svg, .wheel, .road-strip::before, .live-dot, .taxi-lamp, .beam { animation: none; }
  .veh { transform: translate3d(20vw, 0, 0); }
}

/* Встречная полоса: кузов зеркалится, а надписи остаются читаемыми */
.road.rev .veh svg text {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}
/* ============ cta-align-fix: обе колонки от одной линии ============ */
.sec.cta .cta-in {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 460px) !important;
  align-items: start !important;
  align-content: start !important;
  gap: 28px !important;
}
.sec.cta .cta-left,
.sec.cta .lead-card {
  align-self: start !important;
  margin-top: 0 !important;
}
.sec.cta .cta-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 22px !important;
}
.sec.cta .cta-left > *:first-child,
.sec.cta .lead-card > *:first-child { margin-top: 0 !important; }
.sec.cta .cta-left h2 { margin-top: 0 !important; padding-top: 0 !important; }
@media (max-width: 1000px) {
  .sec.cta .cta-in { grid-template-columns: 1fr !important; }
}

/* ============ ПРОИЗВОДИТЕЛЬНОСТЬ АНИМАЦИИ (20.09.2026) ============
   На телефоне остаётся одна композитная анимация на машину — проезд translate3d.
   Колёса, подпрыгивание, фары, плафон и бегущая разметка — некомпозитные и отключаются. */

.veh { backface-visibility: hidden; }

/* Дорога вне экрана: класс idle ставит fleet.js через IntersectionObserver */
.road.idle .veh,
.road.idle .veh svg,
.road.idle .wheel,
.road.idle .beam,
.road.idle .taxi-lamp { animation-play-state: paused; }
.road.idle .road-strip::before { animation-play-state: paused; }

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .veh svg,
  .beam,
  .taxi-lamp,
  .live-dot { animation: none !important; }
  /* колёса крутятся, но вдвое медленнее: три машины на дороге это выдерживают */
  .wheel { animation-duration: .9s; }
  .road-strip::before { animation: none !important; }
  .road.rev .veh svg { transform: scaleX(-1); }
  .veh { will-change: auto; }
  .road .veh:nth-child(n+5) { display: none; }
  .fleet-chip { transition: none; }
  body { background-attachment: scroll; }
}

/* ============ ПЛОСКАЯ АНИМАЦИЯ НА ТЕЛЕФОНЕ (20.09.2026) ============
   Причина рваной дороги: translate3d + backface-visibility создавали по 3D-слою
   на каждую машину, и слабый GPU перерисовывал градиент полосы частями. */

/* сплошной цвет под градиентом: дорога не выглядит рваной даже при запаздывании отрисовки */
.road-strip { background-color: #1a1410; }
.road.light .road-strip { background-color: #c8bda8; }

@keyframes vehDriveFlat {
  from { transform: translateX(-24vw); }
  to   { transform: translateX(112vw); }
}
@keyframes vehDriveRevFlat {
  from { transform: translateX(112vw); }
  to   { transform: translateX(-24vw); }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .veh { backface-visibility: visible; animation-name: vehDriveFlat; }
  .road.rev .veh { animation-name: vehDriveRevFlat; }
  /* размытая тень полосы перерисовывалась на каждый проезд — на телефоне убираем */
  .road-strip { box-shadow: 0 -1px 0 rgba(255,255,255,.06) inset; }
}

/* ============ ГРУЗОВИК КРУПНЕЕ НА 50% (20.09.2026) ============
   fleet.js ставит класс по типу: veh-car, veh-taxi, veh-van, veh-bus, veh-truck.
   Грузовик: 300px × 1.5 = 450px, высота по viewBox 340×116 — 153px,
   поэтому дорога поднята с 132 до 186px, иначе overflow: hidden срежет крышу. */

.road { height: 186px; }
.veh-truck { width: calc(var(--w, 210px) * 1.5); }

@media (max-width: 720px) {
  .road { height: 156px; }
  /* 0.88 × 1.5 = 1.32 от базовой ширины */
  .veh-truck { width: calc(var(--w, 210px) * 1.32); }
}

/* ============ РАЗМЕТКА ЧЕРЕЗ TRANSFORM И ЕДИНЫЙ МОБИЛЬНЫЙ БЛОК (20.09.2026) ============
   1) roadDash раньше анимировал background-position-x — полная перерисовка каждый кадр.
      Теперь полоса шире контейнера на 90px и ездит через translateX — композитно.
   2) Все мобильные размеры собраны в одном блоке с тем же условием, что у анимаций:
      раньше множители жили в max-width: 720px и не срабатывали на широких телефонах. */

.road-strip::before {
  left: -90px; right: -90px;
  animation: roadDash 1.1s linear infinite;
}
@keyframes roadDash {
  from { transform: translateX(0); }
  to   { transform: translateX(-82px); }
}
.road.rev .road-strip::before { animation-direction: reverse; }

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .road { height: 168px; }
  .road-strip { height: 48px; }
  .veh { bottom: 22px; width: calc(var(--w, 210px) * .88); }
  .veh-truck { width: calc(var(--w, 210px) * 1.32); }
  .road-strip::before { animation: roadDash 1.4s linear infinite !important; }
}

/* ============ dash-direction-fix: разметка навстречу (20.09.2026) ============
   Нижняя дорога (.road.rev перед #pricing) теряла направление на телефоне:
   мобильный блок задаёт сокращённую animation с !important, а она сбрасывает
   animation-direction в normal. Здесь reverse стоит внутри самой сокращённой записи.
   Направление теперь совпадает с движением машин (vehDriveRev / vehDriveRevFlat). */

.road.rev .road-strip::before { animation-direction: reverse !important; }

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .road.rev .road-strip::before { animation: roadDash 1.4s linear infinite reverse !important; }
}
@media (prefers-reduced-motion: reduce) {
  .road.rev .road-strip::before { animation: none !important; }
}