/* donaldtruck-truckbg-20260909-v1.css
   Фоновая анимация «грузовик едет по дороге» на всех публичных страницах сайта.
   Пара к donaldtruck-truckbg-20260909-v1.js. Подключается отдельными строками в
   _inc/module.project-config.php — основные donaldtruck-home-* не затрагиваются.
   ОТКАТ: убрать две строки truckbg из конфига.

   Слой лежит в position:fixed; z-index:-1, то есть НИЖЕ фонов блоков в потоке.
   Поэтому обязательно снимаем непрозрачный фон с body и #page.wrapper — иначе сцены не видно.
   Небо перенесено на html, чтобы страница не белела, если JS не отработал. */

html {
  background: linear-gradient(180deg, #e7eef6 0%, #eef3f8 55%, #f1f4f8 100%) no-repeat fixed;
  background-color: #eef3f8;
}
body { background-color: transparent !important; background-image: none !important; }
#page.wrapper { background-color: transparent !important; background-image: none !important; }

/* Полноширинные белые ленты секций рисуются псевдоэлементом .dt-section::before.
   Делаем их слегка прозрачными, чтобы сцена читалась сквозь них, но текст оставался контрастным. */
.dt-section::before { background-color: rgba(255, 255, 255, .88) !important; }
.dt-hero .dt-hero__panel { background-color: rgba(255, 255, 255, .9) !important; }

/* ---------------- сам фоновый слой ---------------- */
#dtbg-root {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --road: 26%;
  background: linear-gradient(180deg, #e7eef6 0%, #eef3f8 55%, #f1f4f8 100%);
  /* Сцена приглушена: это фон, он не должен спорить с заголовками, которые лежат
     прямо на странице без карточки. Одно число — сделать ярче/тише. */
  opacity: .62;
}

#dtbg-root .dtbg-scene {
  position: absolute;
  left: 0; right: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}
#dtbg-root .dtbg-scene__strip { will-change: transform; }
#dtbg-root .dtbg-scene--mountains { bottom: calc(var(--road) + 84px); }
#dtbg-root .dtbg-scene--trees { bottom: calc(var(--road) + 84px); }
#dtbg-root .dtbg-scene--near  { bottom: calc(var(--road) + 72px); }

#dtbg-root .dtbg-verge {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--road) + 70px);
  height: 14px;
  background: #c3d3bb;
  border-top: 2px solid #b5c7ac;
}

#dtbg-root .dtbg-road {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--road) - 64px);
  height: 134px;
  background: linear-gradient(180deg, #9ba3ae 0%, #8b939e 45%, #7f8792 100%);
}
#dtbg-root .dtbg-road__line {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: #f1f3f5;
  opacity: .7;
}
#dtbg-root .dtbg-road__line--far  { top: 6px; }
#dtbg-root .dtbg-road__line--near { bottom: 6px; }
#dtbg-root .dtbg-road__dash {
  position: absolute;
  left: 0; right: 0;
  top: 78px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #f3f5f8 0 46px, transparent 46px 92px);
}

#dtbg-root .dtbg-ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: calc(var(--road) - 64px);
  background: #e3e7ed;
  border-top: 4px solid #cfd5dc;
}

/* Грузовик: положение по горизонтали задаёт JS от прокрутки */
#dtbg-root .dtbg-truck {
  position: absolute;
  bottom: var(--road);
  left: 0;
  width: 780px;
  transform: translateX(3000px);
  will-change: transform;
}
/* колёса ассета стоят на y=280 из 300 -> опускаем холст на 20/300 высоты, чтобы шины легли на дорогу */
#dtbg-root .dtbg-truck__body { transform: translateY(6.6667%); }
#dtbg-root .dtbg-truck svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Анимация ассета: колёса против часовой, подвеска, вибрация кабины. Цикл 4 с, бесшовный. */
#dtbg-root .dtbg-t-body  { animation: dtbg-susp 4s ease-in-out infinite; }
#dtbg-root .dtbg-t-cab   { animation: dtbg-vib .16s ease-in-out infinite; }
#dtbg-root .dtbg-t-wheel { transform-box: fill-box; transform-origin: 50% 50%; animation: dtbg-spin 4s linear infinite; }
@keyframes dtbg-susp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes dtbg-vib  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6px); } }
@keyframes dtbg-spin { to { transform: rotate(-720deg); } }

/* Пока страницу не прокручивают — всё стоит: фон не отвлекает от чтения */
#dtbg-root .dtbg-truck:not(.dtbg-is-moving) .dtbg-t-wheel,
#dtbg-root .dtbg-truck:not(.dtbg-is-moving) .dtbg-t-body,
#dtbg-root .dtbg-truck:not(.dtbg-is-moving) .dtbg-t-cab { animation-play-state: paused; }

#dtbg-root .dtbg-speed-lines {
  position: absolute;
  right: -110px;
  bottom: 64px;
  width: 140px;
  opacity: 0;
  transition: opacity .25s ease;
}
#dtbg-root .dtbg-truck.dtbg-is-moving .dtbg-speed-lines { opacity: 1; }
#dtbg-root .dtbg-speed-lines span {
  display: block;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(29,42,56,.22), transparent);
}
#dtbg-root .dtbg-speed-lines span:nth-child(1) { width: 96px; margin-left: 20px; }
#dtbg-root .dtbg-speed-lines span:nth-child(2) { width: 140px; margin-left: -12px; }
#dtbg-root .dtbg-speed-lines span:nth-child(3) { width: 74px; margin-left: 48px; }

@media (prefers-reduced-motion: reduce) {
  #dtbg-root .dtbg-t-body, #dtbg-root .dtbg-t-cab { animation: none; }
  #dtbg-root .dtbg-speed-lines { display: none; }
}

@media (max-width: 900px) {
  #dtbg-root .dtbg-truck { width: 540px; }
}