/* The route repeats after a quiet hold and fade; city labels never move or hide. */
.journey.is-journey-playing li::before {
  background: linear-gradient(var(--purple), var(--purple)) left top / 0% 100% no-repeat, var(--line);
  animation: journey-track 700ms ease-in-out calc(var(--journey-delay) + 150ms) forwards;
}
.journey.is-journey-playing li::after {
  animation: journey-stop 850ms ease-in-out var(--journey-delay) both;
}
.journey.is-journey-playing .journey-next .icon {
  transform-origin: center;
  animation: journey-takeoff 1800ms cubic-bezier(.22, .61, .36, 1) var(--journey-delay) both;
}
.journey.is-journey-complete li::before,
.journey.is-journey-complete li::after { background: var(--purple); }
.journey.is-journey-complete li::after { box-shadow: 0 0 0 3px var(--lilac); }
.journey.is-journey-resetting li::before {
  background: var(--line);
  transition: background-color 600ms ease-in-out;
}
.journey.is-journey-resetting li::after {
  background: #bca4d5;
  box-shadow: 0 0 0 0 transparent;
  transition: background-color 600ms ease-in-out, box-shadow 600ms ease-in-out;
}

@keyframes journey-track {
  to { background-size: 100% 100%; }
}
@keyframes journey-stop {
  0% { background: #bca4d5; box-shadow: 0 0 0 0 transparent; }
  45% { background: var(--purple); box-shadow: 0 0 0 7px var(--lilac); }
  100% { background: var(--purple); box-shadow: 0 0 0 3px var(--lilac); }
}
@keyframes journey-takeoff {
  0%, 12% { transform: translate(0, 0) rotate(0); }
  55% { transform: translate(10px, -16px) rotate(-16deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

@media (max-width: 700px) {
  .journey.is-journey-playing li::before { background-size: 100% 0%; }
}
@media (prefers-reduced-motion: reduce), print {
  .journey.is-journey-playing li::before,
  .journey.is-journey-playing li::after,
  .journey.is-journey-resetting li::before,
  .journey.is-journey-resetting li::after { animation: none; transition: none; background: var(--purple); }
  .journey.is-journey-playing .journey-next .icon { animation: none; transform: none; }
}