.route { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 0; }
.route__line { fill: none; stroke: var(--route); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.route__runner circle { fill: var(--route); }
html:not(.motion) .route__runner { display: none; }

/* Pre-reveal states exist only when animating. Final state is the default. */
.cp-dot { transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
html.motion [data-reach]:not(.is-reached) > .cp-dot { transform: scale(0); }
html.motion [data-reveal] {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}
html.motion [data-reach]:not(.is-reached) [data-reveal] { opacity: 0; transform: translateY(1rem); }