/* Плавность 3D-сцен (Гарантия, Доставка, Ремонт, Trade-in).
   Принцип: на GPU двигаем только transform/opacity. Всё, что заставляло браузер перерисовывать
   или заново маскировать большие поверхности на каждом кадре, заменено статичными слоями. */

/* 1. Общая сцена: вместо mask-image (маскирование всей 3D-сцены каждый кадр) — виньетка поверх */
.sc-stage { -webkit-mask-image: none; mask-image: none; isolation: isolate; contain: layout paint; }
.sc-stage::after { content: ""; position: absolute; inset: -1px; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse farthest-side at 50% 50%, transparent 78%, var(--black, #070707) 100%); }

/* blur() на огромных радиальных градиентах не нужен — градиент и так мягкий */
.sc-glow { filter: none; background: radial-gradient(circle, rgba(201,160,108,.16), rgba(201,160,108,.08) 32%, transparent 65%); }
.th-glow { filter: none; background: radial-gradient(circle, rgba(201,160,108,.22), rgba(201,160,108,.10) 34%, transparent 65%); }
.th-shadow { filter: none; background: radial-gradient(ellipse, rgba(0,0,0,.7), rgba(0,0,0,.34) 42%, transparent 72%); will-change: transform, opacity; }

/* 2. Мягкое покачивание миров: синусоидальное замедление на краях вместо резкого ease-in-out */
.dl-world, .rp-world { animation-timing-function: cubic-bezier(.45,.05,.55,.95); will-change: transform; }
.th-float { will-change: transform; animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
.gm-float { will-change: transform; }
.pl, .pole { will-change: transform; }

/* 3. Доставка */
/* земля: маска на огромной поверхности с движущейся сеткой пересчитывалась каждый кадр → маска убрана, края гасит виньетка сцены */
.dl-ground { left: -1100px; top: -800px; width: 2200px; height: 1600px; -webkit-mask-image: none; mask-image: none; }
/* дорога: то же — затухание по краям рисуется отдельным слоем, а не маской поверх бегущей разметки */
.dl-road { left: -480px; width: 960px; -webkit-mask-image: none; mask-image: none; }
.dl-road .fade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--black, #070707) 0%, transparent 22%, transparent 78%, var(--black, #070707) 100%); }
/* «подпрыгивание» кузова на 2px в 3D давало мелкую дрожь (субпиксельный шум) — убрано */
.dl-body { animation: none; }

/* 4. Trade-in телефон: transform теперь пишет JS напрямую (см. app.js), слои не пересчитываются */
.th-phone { will-change: transform; }

/* 5. Если вкладка скрыта или сцена вне экрана — анимации стоят (дополняет .is-offscreen из app.js) */
@media (prefers-reduced-motion: reduce) { .dl-world, .rp-world, .th-float { animation: none; } }