/* Доставка и оплата — 3D-сцена: фура едет по дороге, на прицепе логотип Evgeniy Apple */

.dl-stage { --s: .9; }
/* дорога за грузовиком уходит назад почти до текста — рамка сцены её не обрезает */
.dl-stage { overflow: visible; -webkit-mask-image: none; mask-image: none; z-index: 0; }
.sc-hero .contact-info { position: relative; z-index: 1; }
.dl-world {
  transform: scale(var(--s)) rotateX(62deg) rotateZ(28deg) translate3d(40px, -95px, -100px);
  animation: dlSway 10s ease-in-out infinite alternate;
}
@keyframes dlSway {
  from { transform: scale(var(--s)) rotateX(60deg) rotateZ(23deg) translate3d(40px, -95px, -100px); }
  to   { transform: scale(var(--s)) rotateX(64deg) rotateZ(34deg) translate3d(40px, -95px, -100px); }
}

/* ---------- земля и дорога ---------- */
.dl-ground {
  position: absolute; left: -1400px; top: -800px; width: 2800px; height: 1600px;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
}
.dl-grid {
  position: absolute; inset: 0; left: -90px; width: calc(100% + 90px);
  background-image:
    linear-gradient(rgba(227,195,156,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,195,156,.07) 1px, transparent 1px);
  background-size: 90px 90px;
  animation: dlGrid .42s linear infinite;
  will-change: transform;
}
@keyframes dlGrid { to { transform: translateX(-90px); } }

.dl-road {
  position: absolute; left: -1200px; top: -190px; width: 2400px; height: 380px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #1b1b1e, #111113 50%, #1b1b1e);
  box-shadow: inset 0 0 0 1px rgba(227,195,156,.12);
  /* участок за грузовиком (слева) затемнён и тянется почти до текста */
  -webkit-mask-image: linear-gradient(90deg, transparent 540px, rgba(0,0,0,.12) 760px, rgba(0,0,0,.4) 960px, rgba(0,0,0,.5) 1100px, #000 1190px, #000 1488px, transparent 1680px);
          mask-image: linear-gradient(90deg, transparent 540px, rgba(0,0,0,.12) 760px, rgba(0,0,0,.4) 960px, rgba(0,0,0,.5) 1100px, #000 1190px, #000 1488px, transparent 1680px);
}
.dl-road:before, .dl-road:after {
  content: ""; position: absolute; left: 0; right: 0; height: 5px;
  background: rgba(227,195,156,.6);
}
.dl-road:before { top: 14px; }
.dl-road:after  { bottom: 14px; }
.dl-road .lane {
  position: absolute; left: 0; top: 188px; width: 2640px; height: 5px;
  background: repeating-linear-gradient(90deg, rgba(243,217,184,.9) 0 64px, transparent 64px 128px);
  animation: dlLane .6s linear infinite;
  will-change: transform;
}
@keyframes dlLane { to { transform: translateX(-128px); } }

/* ---------- фура ---------- */
.dl-truck { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translate3d(0, 95px, 0); }
.dl-body { position: absolute; left: 0; top: 0; transform-style: preserve-3d; animation: dlBob 1.1s ease-in-out infinite alternate; }
@keyframes dlBob { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,0,2px); } }

.dl-truck .shadow {
  position: absolute; left: -320px; top: -80px; width: 560px; height: 160px; border-radius: 50px;
  background: rgba(0,0,0,.65); filter: blur(14px); transform: translateZ(1px);
}
.dl-truck .beam {
  position: absolute; left: 210px; top: -110px; width: 360px; height: 220px; transform: translateZ(2px);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
  background: linear-gradient(90deg, rgba(255,236,190,.34), transparent);
}

/* прицеп */
.trailer > .y { overflow: hidden; background: linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,.14)), linear-gradient(180deg, #2c2c31, #1d1d21); }
.trailer .ribs { inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 40px); }
.trailer .trim { left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #8d6d44, #e7ceaf, #8d6d44); }
.trailer .trim.t1 { top: 10px; }
.trailer .trim.t2 { bottom: 12px; }
.trailer .logo {
  left: 36px; right: 36px; top: 24px; bottom: 26px;
  background: url("../assets/logo-header.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.trailer > .t { background: linear-gradient(135deg, #34343a, #26262a); }
.trailer .ribs.top { background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 40px); }
.trailer .roof-logo { inset: 24px 110px; background: url("../assets/logo-header.png") center / contain no-repeat; opacity: .55; }

/* кабина */
.cab > .y { background: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1)), linear-gradient(180deg, #d8b283, #bd955f); }
.cab > .x { background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)), linear-gradient(180deg, #d0aa78, #b58d58); }
.cab .belt   { left: 0; right: 0; bottom: 22px; height: 6px; background: #8b6b42; }
.cab .win.side  { right: 8px; top: 16px; width: 52px; height: 42px; border-radius: 4px 8px 4px 4px;
  background: linear-gradient(135deg, #111a22 0%, #05080b 60%, #1a2630 100%); box-shadow: 0 0 0 3px #8b6b42; }
.cab .door   { left: 22px; top: 8px; width: 2px; height: 90px; background: rgba(0,0,0,.35); }
.cab .handle { right: 14px; top: 68px; width: 16px; height: 4px; border-radius: 2px; background: #3a2e1e; }
.cab .win.front { left: 10px; top: 14px; width: 106px; height: 46px; border-radius: 6px;
  background: linear-gradient(135deg, #1a2630, #05080b 55%, #18222b); box-shadow: 0 0 0 3px #8b6b42; }
.cab .grille { left: 36px; top: 74px; width: 54px; height: 26px; border-radius: 3px;
  background: repeating-linear-gradient(180deg, #0a0a0a 0 4px, #3a3a3d 4px 6px); }
.cab .hl { top: 76px; width: 22px; height: 16px; border-radius: 4px; background: #fff4d6;
  box-shadow: 0 0 18px 6px rgba(255,240,200,.7); }
.cab .hl.l { left: 8px; }
.cab .hl.r { right: 8px; }
.cab .plate { left: 46px; top: 106px; width: 34px; height: 10px; border-radius: 2px; background: #e9e4da; }

/* колёса */
.wh { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), var(--z)); }
.wh > .d {
  position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%;
  background: #050505; backface-visibility: hidden;
  transform: translateY(var(--o, 0px)) rotateX(-90deg);
}
.wh > .d0 { background: radial-gradient(circle, transparent 0 56%, #0a0a0a 57% 100%); box-shadow: inset 0 0 0 3px #1c1c1e, inset 0 0 0 4px #2f2f33; }
.wh .rim { inset: 14px; border-radius: 50%; background: radial-gradient(circle, #8f8b84 0 18%, #4b4a48 19% 100%); box-shadow: 0 0 0 2px #c9a06c; }
.wh .spokes { inset: 3px; border-radius: 50%;
  background: repeating-conic-gradient(#b7b2a8 0 14deg, #2a2a2c 14deg 45deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 22%, #000 23%); mask-image: radial-gradient(circle, transparent 0 22%, #000 23%);
  animation: dlSpin .94s linear infinite; }
@keyframes dlSpin { to { transform: rotate(360deg); } }

/* фонари вдоль дороги */
.dl-poles { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translate3d(0, -232px, 0); }
.pole { position: absolute; left: 0; top: 0; transform-style: preserve-3d; animation: dlPole 11.3s linear infinite; }
@property --lit { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --vis { syntax: '<number>'; inherits: true; initial-value: 1; }
@keyframes dlPole {
  from { transform: translate3d(1200px,0,0); --lit: 1; --vis: 1; }
  50%  { --lit: 1; --vis: 1; }
  58%  { --lit: .18; --vis: 1; }
  76%  { --vis: 0; }
  to   { transform: translate3d(-1200px,0,0); --lit: .18; --vis: 0; }
}
.pole .bx > i { opacity: var(--vis, 1); }
.lamp > i { box-shadow: 0 0 22px 8px rgba(255,226,170,.55); }
.pole .lamp > i { opacity: calc(var(--vis, 1) * (.38 + .62 * var(--lit, 1))); }
.pole .pool { position: absolute; left: -130px; top: -5px; width: 260px; height: 190px; border-radius: 50%; display: block;
  background: radial-gradient(ellipse, rgba(255,226,170,.24), transparent 70%); transform: translate3d(0, 20px, 2px);
  opacity: calc(var(--vis, 1) * var(--lit, 1)); }

/* подгонка масштаба под ширину колонки */
@media (max-width: 1320px) { .dl-stage { --s: .84; } }
@media (max-width: 1100px) { .dl-stage { --s: .76; } }
@media (max-width: 960px)  { .dl-stage { --s: .66; } }
@media (max-width: 820px)  { .dl-stage { --s: .95; } }
@media (max-width: 640px)  { .dl-stage { --s: .86; } }
@media (max-width: 480px)  { .dl-stage { --s: .68; } }
@media (max-width: 400px)  { .dl-stage { --s: .56; } }

@media (prefers-reduced-motion: reduce) {
  .dl-world, .dl-grid, .dl-road .lane, .dl-body, .wh .spokes, .pole { animation: none; }
}

/* ---------- «Как мы доставляем и принимаем оплату»: та же сетка, что у блока «Доставим быстро» ---------- */
.tr-adv.dl-adv { padding-inline: 8vw; gap: clamp(32px, 5vw, 80px); }
@media (max-width: 820px) {
  .tr-adv.dl-adv { padding-inline: 6vw; }
  body .tr-adv.dl-adv h2 { text-align: left; }
}
@media (min-width: 428px) and (max-width: 820px) { .tr-adv.dl-adv { padding-inline: 7vw; } }
@media (max-width: 360px) { .tr-adv.dl-adv { padding-inline: 5vw; } }

/* Заголовок блока — того же размера, что «Мы отвечаем за качество» / «Доставим быстро» в первом экране */
body .tr-adv.dl-adv h2 { font-size: clamp(44px, 5.4vw, 80px) !important; line-height: 1.04 !important; }
@media (max-width: 820px) { body .tr-adv.dl-adv h2 { font-size: clamp(34px, 10vw, 44px) !important; line-height: 1.04 !important; } }