.route-line-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.route-track {
  fill: none;
  stroke: var(--route-track);
  stroke-width: 5;
  stroke-linecap: round;
}

.route-progress {
  fill: none;
  stroke: var(--route-line);
  stroke-width: 5;
  stroke-linecap: round;
  /* Draws in from the path's own start point (house) toward its end
     (school) as --progress rises 0->1 -- correct for the morning journey,
     where the bus travels the same direction. */
  stroke-dashoffset: calc(var(--path-length, 0) * (1 - var(--progress, 0)));
}

/* The afternoon bus travels the opposite way (school -> house) along this
   same shared path, so its trail needs to draw in from the opposite end
   too. A negative dashoffset anchors the reveal at the path's END (school)
   and grows backward toward its start (house) as --progress rises --
   matching the bus's actual direction, with no change to the path's
   geometry, stops or bus-position math needed. */
.journey[data-daypart="afternoon"] .route-progress {
  stroke-dashoffset: calc(var(--path-length, 0) * -1 * (1 - var(--progress, 0)));
}

.route-progress--static {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}

/* Scroll-coupled contexts: near-instant tracking, matches .bus-marker. */
.journey-scene.journey-scene--active .route-progress {
  transition: stroke-dashoffset .05s linear;
}

/* Ambient/discrete contexts (hero): slow, deliberate draw-in. */
.hero-scene .route-progress {
  transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .2, 1);
}
.hero-scene--reset .route-progress {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .route-progress { transition: none !important; }
}

.route-stop-ring {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 2.5;
  transition: stroke .3s ease;
}

.route-stop-dot {
  fill: var(--ink);
  transition: fill .3s ease;
}

.route-stop[data-state="arrived"] .route-stop-ring { stroke: var(--green); }
.route-stop[data-state="arrived"] .route-stop-dot { fill: var(--green); }