/* Aid station: final state is the default; the "before" state only exists
   under html.motion until the route reaches the section. */
.aid-panel--dark { background: transparent; color: var(--paper); border-color: var(--rule); isolation: isolate; }
.aid-panel--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--ink); opacity: 1; transition: opacity 0.5s ease;
}
html.motion .aid:not(.is-reached) .aid-panel--dark::before { opacity: 0; }
@media (prefers-color-scheme: dark) {
  /* In dark mode --ink is light, so the "dark" side needs a fixed near-black. */
  .aid-panel--dark { color: #ECE6D8; }
  .aid-panel--dark::before { background: #050604; }
  .spider { color: #ECE6D8; }
}
html.motion .aid-panel--dark [data-reveal] { transition-delay: calc(var(--i, 0) * 70ms + 550ms); }
.spider {
  position: absolute; top: 0; right: 1.25rem; color: var(--paper);
  transform: translateY(0);
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s;
}
html.motion .aid:not(.is-reached) .spider { transform: translateY(-130%); }

/* Finish tape: two halves that split and fall when reached. */
.tape { grid-column: full; grid-row: 1; align-self: center; display: flex; pointer-events: none; height: 6px; }
.tape span {
  flex: 1; height: 6px;
  background: repeating-linear-gradient(90deg, var(--route) 0 18px, var(--paper) 18px 30px);
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.6s ease 0.4s;
  opacity: 0;
}
.tape__l { transform-origin: left center; transform: translate(-6%, 120px) rotate(-22deg); }
.tape__r { transform-origin: right center; transform: translate(6%, 120px) rotate(22deg); }
html.motion .finish:not(.is-reached) .tape span { opacity: 1; transform: none; }