/* The route and the work reel share one pinned stage: the camera never stops. */
.journey { padding: 0; }
.motion .journey__stage { position: relative; height: 100dvh; overflow: hidden; }

/* ---------- route ---------- */
.route { padding: 96px var(--pad); }
.motion .route { position: absolute; inset: 0; padding: 0; will-change: transform; }
.route__world { display: none; }
.motion .route__world { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.line-far { stroke: rgba(242, 242, 238, 0.13); stroke-width: 1; }
.line-art { stroke: rgba(242, 242, 238, 0.34); stroke-width: 1.2; }
.ridge-fill { fill: var(--bg); stroke: none; }
.ridge-base { stroke: rgba(242, 242, 238, 0.24); stroke-width: 1.2; stroke-dasharray: 3 7; }
.ridge-lit { stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; }
.peak circle { fill: var(--bg); stroke: rgba(242, 242, 238, 0.5); stroke-width: 1.5; transition: fill 0.3s, stroke 0.3s; }
.peak text { fill: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; transition: fill 0.3s; }
.peak.is-on circle { fill: var(--fg); stroke: var(--fg); }
.peak.is-on text { fill: var(--fg); }

.route__head {
  font-size: clamp(30px, 4.4vw, 76px); line-height: 0.96; font-weight: 900;
  font-variation-settings: "wdth" 120; letter-spacing: -0.02em; margin-bottom: 40px;
}
.route__line { display: block; }
.route__line .ch { display: inline-block; will-change: transform; }
.motion .route__head { position: absolute; left: var(--pad); top: 84px; margin: 0; }

.stops { display: grid; gap: 22px; }
.stops li { display: grid; gap: 2px; }
.stop__city { font-size: 22px; font-weight: 800; font-variation-settings: "wdth" 115; }
.stop__year { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.stop__note { color: var(--dim); font-size: 16px; line-height: 1.4; }

.motion .stops { position: absolute; right: var(--pad); top: 92px; width: min(330px, 28vw); display: block; }
.motion .stops li {
  position: absolute; right: 0; top: 0; width: 100%; text-align: right;
  opacity: 0; transform: translateY(14px); transition: opacity 0.4s, transform 0.4s;
}
.motion .stops li.is-on { opacity: 1; transform: none; }

/* ---------- reel ---------- */
.reel { padding: 96px var(--pad); }
.motion .reel { position: absolute; inset: 0; padding: 0; pointer-events: none; }
.motion .reel__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.slide { padding: 0 0 72px; display: grid; gap: 22px; }
.motion .slide {
  width: 100vw; height: 100%; flex-shrink: 0; pointer-events: auto;
  padding: 92px var(--pad) calc(var(--rail) + 16px); align-content: end;
  grid-template-columns: minmax(0, 54%); pointer-events: none;
}
.motion .slide a, .motion .slide button { pointer-events: auto; }
.slide h3 {
  font-size: clamp(42px, 7vw, 124px); line-height: 0.92; font-weight: 900;
  font-variation-settings: "wdth" 118; letter-spacing: -0.02em; will-change: transform;
}
.slide__info { display: grid; gap: 14px; justify-items: start; will-change: transform, opacity; }
.slide__role { font-family: var(--mono); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.slide__state { color: var(--dim); border-bottom: 1px solid var(--line-strong); }
.slide__text { max-width: 54ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: #cfcfca; }
.tech--small { font-family: var(--mono); font-size: 12px; color: var(--dim); gap: 4px 16px; }
.slide__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.figures { display: flex; flex-wrap: wrap; gap: 14px 44px; }
.figures dt { font-family: var(--mono); font-size: 12px; color: var(--dim); margin-bottom: 2px; }
.figures dd { font-size: clamp(32px, 4vw, 62px); font-weight: 800; font-variation-settings: "wdth" 115; line-height: 1; }

@media (max-width: 767px) {
  .motion .route__head { top: 76px; right: var(--pad); font-size: clamp(28px, 8.4vw, 54px); }
  .motion .stops { top: auto; bottom: calc(var(--rail) + 8px); left: var(--pad); right: var(--pad); width: auto; height: 96px; }
  .motion .stops li { text-align: left; }
  .motion .slide { grid-template-columns: minmax(0, 1fr); padding-top: 45dvh; align-content: start; gap: 14px; }
  .slide h3 { font-size: clamp(36px, 11vw, 64px); }
}