/* ============================================================
   Journey — intro copy above a full-viewport pinned 3D scene
   (the camera travel; see js/three/journey-scene.js).
   ============================================================ */

/* Override the centred-grid .section shell: the 3D scene and the timeline
   stack in normal flow so the pinned scene sits above the content. */
.journey {
  display: block;
  padding: 0;
  min-height: 0;
}

/* ---- full-viewport pinned 3D stage ---------------------------------------
   .journey-scene fills the viewport and is what ScrollTrigger pins. The
   canvas inside is letterboxed to a 16:9 box (the largest 16:9 rectangle
   that fits the viewport), centred with black bars around it. */
.journey-scene {
  position: relative;
  width: 100vw;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
}
.journey-scene__stage {
  --edge-fade: 5%;   /* how far in from each side the scene fades to transparent */
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100vw, calc(100svh * 16 / 9));
  max-width: 100vw;
  max-height: 100svh;
  /* fade the canvas off at the extreme left/right edges only:
     0% transparent → opaque at --edge-fade → opaque until (100% - --edge-fade) → 0% transparent */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)), transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%, #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)), transparent 100%);
}
/* the scene-mount (position:absolute; inset:0) fills the 16:9 stage */

/* the mobile journey layer is off by default — mobile.css turns it on and
   hides .journey-scene below 768px (see css/mobile.css). */
.journey-m { display: none; }

/* intro sits ABOVE the pinned scene — the section itself no longer supplies
   vertical padding, so the intro block owns its own. */
.journey__intro {
  max-width: var(--maxw);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

/* title uses the shared .section-title (css/sections.css) */

.journey__lead {
  margin: var(--space-md) auto 0;   /* auto sides → block centered on page, like .wib__lead */
  max-width: 62ch;
  color: var(--fg-dim);
  text-align: center;
  font-size: var(--step-0);
  line-height: 1.35;
}