/* The route: one SVG over the whole page, above the papers and below
   anything that needs to cover it (the pinned running scene, the bug bar). */
.trail { position: relative; }
.route { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 1; }
.route__line { fill: none; stroke: var(--route); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.route__runner circle { fill: var(--route); stroke: var(--black); stroke-width: 2.5; }
html:not(.motion) .route__runner { display: none; }
.route__cp { fill: var(--cream); stroke: var(--route); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.route__cp.on-black { fill: var(--black); }
.route__cp--small { stroke-width: 2.5; }
.route__cp--marker, .route__cp--marker.on-black, .route__cp--start { fill: var(--route); }
.cp-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.sheet > .cp-anchor { top: calc(var(--feed) + 2.4rem); }
/* Above the next sheet's feed, so the route visibly starts on the cream paper. */
.sheet:first-of-type > .cp-anchor { top: auto; bottom: calc(var(--feed) + 1.5rem); }
.role > .cp-anchor, .marker > .cp-anchor { top: 0.7rem; }
.finish-line > .cp-anchor { top: 5px; } /* the route ends in the tape */
.role, .marker { position: relative; }

/* Pre-reveal states exist only when animating. The final state is the default. */
.route__cp { transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
html.motion .route__cp:not(.is-reached) { 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); }
/* Reached by keyboard: show it now, not after the stagger. */
html.motion [data-reach]:focus-within [data-reveal] { transition-delay: 0s; }