/* ==== SLOT:WP3 scroll-intro ==== */
/* Scrollytelling lead-in before #jr-journey (rounded "window" that expands into the Delhi stage). Prefix si-. */
/* ============================================================
   SCROLL INTRO — "a window" onto the journey
   The Delhi leg's own first frame, shown as a rounded card on the white
   page under the lead-in line. Scrolling opens the card to full bleed
   (1:1 with scroll, no snapping), growing up under the line, so the way
   from white page into the dark sky is a gradual opening, not a cut.
   The image is always laid out exactly like the journey's cover-fit
   stage; only the clip opening changes. So when the
   window is fully open the picture is the journey's frame 0 pixel for
   pixel, and the intro hides itself the instant #jr-journey pins.
   Overlap: the section's last 100vh sits on top of #jr-journey (negative
   margin), which is what lets the swap happen on a pinned, full-screen
   stage instead of two copies of the frame sliding past each other.
============================================================ */
#si-intro {
  position: relative; z-index: 3;                 /* above the journey's sticky stage */
  height: 300vh;                                  /* pinned range = 200vh; script reads offsetHeight */
  margin-bottom: -100vh;
  background: var(--white);
}
#si-intro.si-done { visibility: hidden; }         /* the journey has taken the screen */
.si-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden; background: var(--white);
}
.si-window,
.si-view,
.si-view img,
.si-view video {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* The nav's navy bar, redrawn under the card while the stage is pinned, so
   the card grows up over it (Martin, 2026-10-05). See #nav.over-intro. */
.si-navbar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--nav-h);
  background: var(--navy); visibility: hidden;
}
#si-intro.si-pinned .si-navbar { visibility: visible; }
.si-view img,
.si-view video { object-fit: cover; display: block; }
/* The view through the window. While the window is small it is tilted up
   a little (--si-shift) so the horizon shows; it settles to 0 as the window
   opens. The picture is the journey's own first clip parked on frame 0,
   rendered by the same video pipeline as the stage it hands over to (a JPEG
   of the same frame came out ~10 levels darker in Chrome). The JPEG only
   covers until that frame paints. */
.si-view { transform: translateY(var(--si-shift, 0px)); }
.si-view video { opacity: 0; }
.si-view.si-painted video { opacity: 1; }
/* The card: a crisp rounded rectangle cut out of the full-viewport picture
   with clip-path (set from script). Its insets and corner radius reach 0
   when fully open, where the clip is removed altogether. */
.si-window { clip-path: inset(30vh 14vw 10vh 14vw round var(--radius-media)); }
/* Same permanent vignette as the journey stage's .jr-vignette, faded in on
   the same curve as the journey's chrome, so it is already there when the
   pinned stage takes over and nothing steps at the swap. */
.si-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background:
    linear-gradient(to bottom, rgba(17,29,64,.40) 0%, transparent 13%),
    linear-gradient(to top,    rgba(17,29,64,.32) 0%, transparent 11%);
}
/* The lead-in line: live text, never baked in. It sits on the white page
   above the card and holds still while the card grows up under it. It is
   drawn twice at the same spot: navy on the page (beneath the card) and
   red inside the card's clip, so wherever the card's edge is, the text
   is navy outside it and red inside it. It stays on the full-bleed
   picture for most of the hold, then scrolls away 1:1 like ordinary
   content (--si-lift) before the swap. Width-capped so it stays clear
   of the Rail. */
.si-copy {
  position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 6vh);
  padding: 0 var(--gutter); text-align: center; pointer-events: none;
  transform: translateY(var(--si-lift, 0px));
}
.si-copy--page { color: var(--navy); }
.si-copy--over { color: var(--red); z-index: 2; }   /* red over the picture (Martin, 2026-10-05) */
.si-line {
  font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;   /* the journey Cards' face */
  font-size: var(--fs-h2); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em;
  max-width: 20ch; margin: 0 auto;
}

/* Reduced motion: the journey becomes composed stills whose first still is
   this same frame, so the intro is just the lead-in line as a plain heading
   on the page, scrolled normally. No overlap with the journey. */
@media (prefers-reduced-motion: reduce) {
  #si-intro { height: auto; margin-bottom: 0; padding: var(--section-y) var(--gutter) var(--space-6); }
  #si-intro.si-done { visibility: visible; }
  .si-stage { position: static; height: auto; overflow: visible; background: none; }
  .si-window, .si-vignette { display: none; }
  .si-copy { position: static; padding: 0; transform: none; }
}
/* Spiral doodle beside the journey intro line (SLOT:WP3 script): a dashed
   spiral that unwinds into a red arrowhead pointing on down the page. */
.si-line { position: relative; width: fit-content; }
.si-doodle {
  position: absolute; left: calc(100% + 18px); top: 50%; width: 160px; height: 100px;
  transform: translateY(-50%); overflow: visible; pointer-events: none;
}
.si-doodle .dd-trail { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 4 6; }
.si-doodle .dd-reveal { fill: none; stroke: var(--white); stroke-width: 9; }
.si-doodle .dd-fill { fill: var(--red); }
@media (max-width: 900px) { .si-doodle { display: none; } }
/* ==== /SLOT:WP3 ==== */