.pp-order-truck {
  margin-block: var(--space-4);
}


.pp-order-truck__scene {
  position: relative;
  height: var(--tap-l);
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--color-accent);
}


.pp-order-truck__road {
  position: absolute;
  left: 0;
  top: 50%;
  width: 200%;
  height: var(--border-thin);
  background: repeating-linear-gradient(90deg, var(--color-surface) 0 22px, transparent 22px 44px);
  transform: translateY(-50%);
  animation: ot-road var(--dur-glow) linear both;
}

@keyframes ot-road {
  from { transform: translate(0, -50%); }
  to { transform: translate(-50%, -50%); }
}


.pp-order-truck__truck {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ot-drive var(--dur-glow) linear both;
}

@keyframes ot-drive {
  from { transform: translateX(-110%); }
  to { transform: translateX(300%); }
}


.pp-order-truck__svg {
  display: block;
  width: auto;
  height: 88%;
}


.pp-order-truck__svg .ot-body { fill: var(--color-ink); }
.pp-order-truck__svg .ot-roof { fill: var(--color-ink-raised); }
.pp-order-truck__svg .ot-glass { fill: var(--color-on-ink); opacity: 0.92; }
.pp-order-truck__svg .ot-hub { fill: var(--color-on-ink); }
.pp-order-truck__svg .ot-wheel { fill: var(--color-ink); }
.pp-order-truck__svg .ot-line {
  fill: none;
  stroke: var(--color-on-ink);
  stroke-width: 2;
  opacity: 0.45;
}


.pp-order-truck__answers {
  margin-block: var(--space-3) 0;
  display: grid;
  gap: var(--space-2);
}

.pp-order-truck[data-motion="pass"] .pp-order-truck__answers {
  animation: ot-answers var(--dur-ui) var(--ease-out) both;
  animation-delay: var(--dur-glow);
}

@keyframes ot-answers {
  from { opacity: 0; transform: translateY(var(--space-2)); }
}

.pp-order-truck__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.pp-order-truck__row dt {
  color: var(--color-text-secondary);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
}

.pp-order-truck__row dd {
  margin: 0;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}


@media (prefers-reduced-motion: reduce) {
  .pp-order-truck__road,
  .pp-order-truck__truck {
    animation: none;
  }

  .pp-order-truck[data-motion="pass"] .pp-order-truck__answers {
    animation: none;
  }
}