/* Supporting motion only.

   Every chapter carries its own idea — the circle that opens the airport frame,
   the lateral drive through Willemstad, the wipe at the fork, the cars leaving
   the stage, the push-in at Westpunt, the car receding at sunset. What lives
   here is the small stuff those ideas need underneath them, and the global
   reduced-motion contract. */

/* elements that enter by driving in from the side they belong to */
[data-in] {
  opacity: 0;
  transition: opacity .42s linear, transform .72s var(--ease-drive);
}
[data-in='left']  { transform: translateX(-3.2rem); }
[data-in='right'] { transform: translateX(3.2rem); }
[data-in='brake'] { transform: translateX(1.6rem); }   /* arrives and settles */
[data-in].is-in { opacity: 1; transform: none; }

[data-in-delay='1'] { transition-delay: .08s; }
[data-in-delay='2'] { transition-delay: .16s; }
[data-in-delay='3'] { transition-delay: .24s; }

/* the intro: the route symbol draws itself once */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  gap: 1rem;
  background: var(--deep);
  color: var(--offwhite);
  transition: opacity .5s linear, visibility 0s .5s;
}
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro svg { width: clamp(84px, 16vw, 150px); height: auto; overflow: visible; }
.intro__road {
  fill: none;
  stroke: rgba(205, 239, 255, .34);
  stroke-width: 7;
  stroke-linecap: round;
}
.intro__run {
  fill: none;
  stroke: var(--sun);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  animation: intro-run 1.15s var(--ease-drive) forwards;
}
@keyframes intro-run { to { stroke-dashoffset: 0; } }
.intro b {
  font-family: var(--display);
  font-size: .84rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(205, 239, 255, .7);
}

@media (prefers-reduced-motion: reduce) {
  [data-in] { opacity: 1; transform: none; transition: none; }
  .intro { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}