.process-list[data-process-motion="on"] > li {
  position: relative;
  transition: background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.process-list[data-process-motion="on"] > li::before,
.process-list[data-process-motion="on"] > li::after {
  content: ""; position: absolute; left: 12px; top: 56px; bottom: 0;
  width: 1px; pointer-events: none;
}
.process-list[data-process-motion="on"] > li::before { background: #d7c29a24; }
.process-list[data-process-motion="on"] > li::after {
  background: linear-gradient(#9e8757, #efdcaa);
  box-shadow: 0 0 9px #e7ca8860;
  transform: scaleY(var(--step-fill, 0)); transform-origin: top;
}
.process-list[data-process-motion="on"] .process-number {
  display: grid; place-items: center; width: 25px; height: 25px; padding: 0;
  border-radius: 50%; border: 1px solid #d7c29a40; color: #bdb5a5;
  font-size: 10px; line-height: 1; background: #171817;
  transition: color .5s, border-color .5s, background-color .5s, box-shadow .5s;
}
.process-list[data-process-motion="on"] > li[data-reading="active"] {
  background: linear-gradient(100deg, #d5b26c13, #c8a65e04 65%, transparent);
  border-bottom-color: #d8bc7d70;
  box-shadow: inset 0 1px #ead6ac0c;
}
.process-list[data-process-motion="on"] > li[data-reading="active"] .process-number {
  color: #191a17; background: #e2cd99; border-color: #f2e1b7;
  box-shadow: 0 0 0 4px #dabe8010, 0 0 22px #ddc17d38;
}
.process-list[data-process-motion="on"] > li[data-reading="passed"] .process-number {
  color: #dbc796; border-color: #c4ab7270;
}
.process-list[data-process-motion="on"] h3 { transition: color .5s ease; }
.process-list[data-process-motion="on"] > li[data-reading="active"] h3 { color: #f0dfb7; }
/* The existing on/off choice governs this enhancement, including reduced-motion users. */
.process-list[data-process-motion="off"] > li,
.process-list[data-process-motion="off"] .process-number,
.process-list[data-process-motion="off"] h3 { transition: none; }