/* The road. One SVG spans every chapter between the hero and the finish line;
   route.js rebuilds its geometry from the anchors in the markup, so the road is
   never stretched — it is redrawn at the real pixel size of the page. */

.journey {
  position: relative;
  isolation: isolate;
}

.journey__road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The road is drawn *over* the chapters, not under them. Sections carry
     their own backgrounds and full-bleed photographs, and a road that vanished
     behind every one of them would stop being the backbone of the page. It
     crosses the pinned frames on purpose. */
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

/* --- words ride above the road ------------------------------------------ */
/* The road still crosses every photograph and background — that is what keeps
   it the backbone of the page — but it no longer runs over anything meant to be
   read. Each chapter used to be its own stacking layer (z-index: 1, and the fork
   isolated), which trapped its text below the road however high the text was
   lifted. The chapters give that layer up; their text blocks sit one step above
   the road instead.

   Two chapters pin a whole screen with sticky frames — the Willemstad rail and
   the camera. A sticky frame is one stacking layer, so words and photographs
   there are split into two sticky layers laid one over the other: the photo
   layer stays under the road, the words layer (.city__over, .camera__over)
   rises above it. These selectors outrank the
   chapters' own rules on purpose — those stylesheets load after this one. */
.journey :is(.airport, .city, .branch, .desk, .fleet, .fork, .steps, .camera) { z-index: auto; }
.journey .fork { isolation: auto; }
.journey :is(.airport__copy, .city__intro, .city__outro, .branch__copy,
             .desk__head, .desk__form, .desk__extras, .desk__go, .desk__said,
             .fleet__head, .fleet__read, .stage__bar, .fleet .demo-note,
             .fork__head, .fork__opts, .fork__hint,
             .steps__head, .steps__row) {
  position: relative;
  z-index: 6;
}
.journey :is(.city__over, .camera__over) { z-index: 6; }

/* the anchors are invisible: they only tell route.js where the road bends,
   and carry the stop label that belongs to that bend */
.anchor {
  position: relative;
  z-index: 6;
  width: 0; height: 0;
  pointer-events: none;
}

.road-bed {
  fill: none;
  stroke: var(--road-bed);
  stroke-width: var(--road-w);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.road-edge {
  fill: none;
  stroke: rgba(7, 45, 60, .13);
  stroke-width: calc(var(--road-w) + 9px);
  stroke-linecap: round;
}
.road-dash {
  fill: none;
  stroke: var(--road-line);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 16 20;
  opacity: .85;
}
.road-done {
  fill: none;
  stroke: var(--road-done);
  stroke-width: var(--road-w);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .5s var(--ease-brake);
}
.road-done-dash {
  fill: none;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 16 20;
}

/* --- the vehicle -------------------------------------------------------- */

.roadcar { will-change: transform; }
.roadcar__shadow { fill: rgba(7, 45, 60, .26); }
/* off-white body, sun roof: the one combination that stays legible on dark
   asphalt, on the coloured section the car has already driven, and on top of a
   photograph when the road crosses one */
.roadcar__body {
  fill: var(--offwhite);
  stroke: rgba(7, 45, 60, .55);
  stroke-width: 1.4;
}

/* --- destination markers ------------------------------------------------ */

.stop {
  --pin: 26px;
  position: absolute;
  display: flex;
  align-items: center;
  gap: .72rem;
  pointer-events: none;
  /* route.js sets `left` to the road's x — it is the pin, not the whole label,
     that has to sit on the tarmac */
  transform: translate(calc(var(--pin) / -2), -50%);
}
.stop--right {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + var(--pin) / 2), -50%);
}

.stop__pin {
  position: relative;
  width: var(--pin); height: var(--pin);
  flex: none;
  border-radius: 50%;
  background: var(--offwhite);
  box-shadow: inset 0 0 0 3px var(--accent), 0 8px 20px -10px rgba(7,91,120,.7);
  transition: transform .5s var(--ease-brake), box-shadow .5s var(--ease-brake);
}
.stop__pin::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .5s var(--ease-brake);
}
.stop__pin::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  transform: scale(.6);
}

.stop__label {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  /* the label crosses light paper, dark chapters and full-bleed photographs on
     its way down the page, so it carries its own little sign to stand on */
  padding: .32rem .62rem .38rem;
  border-radius: 9px;
  background: rgba(250, 248, 242, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px -18px rgba(7, 91, 120, .9);
  transition: transform .5s var(--ease-brake), opacity .4s linear;
  opacity: .62;
}
.stop--right .stop__label { align-items: flex-end; text-align: right; }

.stop__no {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .24em;
  color: var(--stop-sub, var(--ink-52));
}
.stop__name {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--stop-ink, var(--ink));
}

/* arrival: the pin blooms, the label grows. No fade-up anywhere near it. */
.stop.is-here .stop__pin { transform: scale(1.34); }
.stop.is-here .stop__pin::after { transform: scale(.62); }
.stop.is-here .stop__pin::before { animation: stop-ping 1.8s var(--ease-brake) infinite; }
.stop.is-here .stop__label { opacity: 1; transform: scale(1.09); }
.stop--right.is-here .stop__label { transform-origin: right center; }
.stop:not(.stop--right).is-here .stop__label { transform-origin: left center; }
.stop.is-passed .stop__label { opacity: .82; }

@keyframes stop-ping {
  0%   { opacity: .9; transform: scale(.7); }
  70%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* --- the fixed stop list (the road is the progress bar; this only names it) */

/* Five ticks and one name, parked in the corner. The road is the progress
   bar — this only says which stop the car is at, and it stays out of the
   columns instead of running down the side of them. */
.legend {
  position: fixed;
  left: max(1rem, 2vw);
  bottom: max(1rem, 2vh);
  z-index: 40;
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  border-radius: 999px;
  background: rgba(250, 248, 242, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px -22px rgba(7, 45, 60, .9);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s linear, transform .45s var(--ease-brake);
}
.legend.is-on { opacity: 1; transform: none; }
/* the booking desk owns the bottom of the screen while it is being filled in */
.legend.is-away { opacity: 0; transform: translateY(8px); }

.legend__no {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-52);
  margin-inline-end: .1rem;
}

.legend__item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
/* only the stop the car is at says its name */
.legend__item b {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .5s var(--ease-brake), opacity .3s linear,
              margin .5s var(--ease-brake);
}
.legend__item.is-here b { max-width: 12ch; opacity: 1; margin-inline-end: .25rem; }

.legend__tick {
  width: 12px; height: 4px;
  border-radius: 2px;
  background: var(--ink-14);
  transition: width .45s var(--ease-brake), background-color .45s linear;
}
.legend__item.is-passed .legend__tick { background: var(--ink-52); }
.legend__item.is-here .legend__tick { width: 24px; background: var(--accent); }

@media (min-width: 860px) { .legend { display: flex; } }

/* --- oversized landmark words that the road runs behind ------------------ */

.landmark {
  font-family: var(--display);
  font-size: var(--t-mega);
  line-height: .8;
  text-transform: uppercase;
  letter-spacing: -.045em;
  color: var(--ink);
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.landmark--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink-14);
}
.landmark--accent { color: var(--accent); }

@media (max-width: 767px) {
  :root { --road-w: 15px; }
  .stop { --pin: 21px; gap: .5rem; }
  .stop__pin { box-shadow: inset 0 0 0 2.5px var(--accent), 0 6px 16px -9px rgba(7,91,120,.7); }
  .stop__pin::after { inset: 5.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .stop.is-here .stop__pin::before { animation: none; }
  .stop, .stop__pin, .stop__label { transition-duration: .01ms; }
}