/* ============================================================
   plant.voir.su — css/pages/transport.css
   Страница «Транспортировка» (владелец: ramaswa, t_4cfd298b).
   Префикс всех своих классов: .ptrans-*
   Токены — только var() из base.css.
   ============================================================ */

/* ---------- hero / сцена anim_delivery ---------- */
.ptrans-stage-wrap { position: relative; }
.ptrans-scene-holder { position: relative; }
.ptrans-controls { gap: .45rem; }
.ptrans-controls .btn { white-space: nowrap; }
.ptrans-clips {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .8rem;
}
.ptrans-clip-chip {
  font-family: var(--font-mono); font-size: .72rem; color: var(--teal);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: .18rem .65rem; background: var(--teal-soft); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.ptrans-clip-chip:hover { border-color: var(--teal); color: var(--ink); }
.ptrans-clip-chip.active { border-color: var(--teal); color: var(--ink); background: rgba(47,184,166,.25); }
.ptrans-scene-hint { margin-top: .7rem; }

/* ---------- таймлайн доставки (вертикальный, teal-точки) ---------- */
.ptrans-tl {
  list-style: none; padding: 0; margin: 0 0 1.4rem;
  position: relative;
}
.ptrans-tl::before {
  content: ""; position: absolute; left: 11px; top: .6rem; bottom: .6rem;
  width: 2px; background: linear-gradient(var(--teal-soft), var(--teal), var(--teal-soft));
  opacity: .55;
}
.ptrans-tl-item { position: relative; padding: 0 0 1.2rem 3rem; }
.ptrans-tl-item:last-child { padding-bottom: 0; }
.ptrans-tl-dot {
  position: absolute; left: 3px; top: .55rem; width: 18px; height: 18px;
  border-radius: 50%; background: var(--bg); border: 3px solid var(--teal);
  box-shadow: 0 0 12px rgba(47,184,166,.6);
  transition: background .25s, box-shadow .25s;
}
.ptrans-tl-item.ptrans-tl-active .ptrans-tl-dot {
  background: var(--teal); box-shadow: 0 0 18px rgba(47,184,166,.9);
}
.ptrans-tl-card { position: relative; }
.ptrans-tl-card.ptrans-tl-active {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal), var(--shadow-soft);
}
.ptrans-tl-num {
  position: absolute; top: 1.1rem; right: 1.2rem;
  font-family: var(--font-mono); font-size: 2rem; font-weight: 700;
  color: var(--line); line-height: 1;
}
.ptrans-tl-card.ptrans-tl-active .ptrans-tl-num { color: var(--teal); }
.ptrans-tl-card .h3 { font-size: clamp(1.02rem, 1.6vw, 1.25rem); }
.ptrans-tl-card p { font-size: .92rem; }

/* ---------- крупный план: грузовик + модуль ---------- */
.ptrans-figure { padding: clamp(.8rem, 2vw, 1.4rem); }
.ptrans-figure figcaption { margin-top: .8rem; font-size: .88rem; color: var(--muted); }
.ptrans-scene-sm { border-radius: var(--radius-sm); }

/* ---------- факты ---------- */
.ptrans-quote {
  border-left: 3px solid var(--amber);
  margin-bottom: 1.2rem;
}
.ptrans-quote blockquote {
  margin: 0 0 .6rem; font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.5; color: #C6D2E0;
}
.ptrans-checks .card { margin-bottom: 1.2rem; }
.ptrans-checks .check-list li { font-size: .96rem; }

/* ---------- адаптив ---------- */
@media (max-width: 768px) {
  .ptrans-controls { padding: .6rem .5rem; }
  .ptrans-controls .btn { padding: .42rem .8rem; font-size: .74rem; }
  .ptrans-tl-num { font-size: 1.6rem; }
  .ptrans-tl-item { padding-left: 2.4rem; }
}

/* ---------- reduced-motion: без плавных подсветок ---------- */
@media (prefers-reduced-motion: reduce) {
  .ptrans-tl-dot, .ptrans-tl-card, .ptrans-clip-chip { transition: none; }
}