/* ============================================================
   Solar System — journey.css
   The opening hero: a cinematic, editorial first impression built on
   ONE focal object — Earth from space (assets/journey-earth.webp) — with
   an oversized display headline bleeding toward it, a diagonal teal seat
   (our own take on Reference #4's colour block), and a slim glass control
   bar anchoring the base. Composition adapted from the reference; palette,
   type, voice and astronomy theme stay ours.

   Motion: a single scroll progress --p (0→1, js/journey.js) drives layered
   parallax — Earth scales / rises / turns as you fly in while the headline
   and bar clear — opacity + transform only, GPU-friendly, no layout.

   Degrades cleanly:
   - No JS  → the full static hero (Earth + headline + bar), one viewport.
   - Reduced motion → same static hero, no pin, no scrub.
   ============================================================ */

/* ── baseline (no JS): the composed hero, one viewport tall ── */
.journey { position: relative; }
.journey__stage {
  position: relative;
  height: 100vh;
  height: 100svh;          /* small-viewport unit: immune to mobile URL-bar collapse */
  min-height: 560px;
  overflow: hidden;
  background: var(--bg-void);
  isolation: isolate;
}

/* focal object — cinematic Earth, full-bleed behind the composition */
.journey__earth {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 54% 50%;
  transform-origin: 56% 46%;
}

/* dark diagonal seat — carries the headline at ≥4.5:1 and gives the
   reference's angular colour-block, in our teal-on-void world */
.journey__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(102deg,
      rgba(6,14,12,.92) 0%, rgba(6,14,12,.72) 26%,
      rgba(6,14,12,.34) 44%, transparent 60%);
}
/* soft teal seat-tint + a faint amber accent line along the diagonal —
   the reference's hard block, dissolved into our palette */
.journey__wedge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: var(--wedge-op, 1);
  background:
    linear-gradient(102deg, rgba(30,110,126,.16) 0%, rgba(30,110,126,.05) 34%, transparent 52%),
    linear-gradient(102deg, transparent 46%, rgba(245,185,66,.10) 49.5%, transparent 53%);
}

/* soft edge vignette + a bottom fade to the site's void so the hero melts
   into the Intro's dark field on hand-off (no hard cut) */
.journey__vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 68%, var(--bg-void) 100%),
    radial-gradient(130% 100% at 60% 42%, transparent 54%, rgba(6,14,12,.6) 100%);
}

/* headline block — the dominant editorial voice, bleeding toward Earth */
.journey__inner {
  position: relative; z-index: 4; height: 100%;
  display: grid; align-content: center;
  padding-inline: var(--pad); padding-block: clamp(80px, 14vh, 180px);
}
.journey__copy { max-width: min(46rem, 82%); }
.journey__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.7rem, 9.2vw, 7rem); line-height: .92; letter-spacing: -.045em;
  text-wrap: balance; text-shadow: 0 2px 40px rgba(6,14,12,.6);
}
.journey__title .accent { color: var(--accent); }
.journey__sub {
  margin-top: clamp(16px, 2.4vh, 26px); max-width: 42ch;
  color: var(--text-mid); font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.5;
}

/* slim glass control bar — the reference's bottom bar, made a real
   quick-facts + primary action strip (and the visible fast path to the map) */
.journey__bar {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: calc(clamp(18px, 4vh, 40px) + env(safe-area-inset-bottom, 0px));
  width: min(var(--maxw), calc(100vw - 2 * var(--pad)));
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 12px 12px 22px; border-radius: var(--r-pill);
  background: linear-gradient(150deg, rgba(18,65,74,.5), rgba(8,17,15,.62));
  border: 1px solid var(--glass-brd-strong); box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.journey__meta { display: flex; flex-wrap: wrap; color: var(--text-mid); font-size: .9rem; font-weight: 500; }
.journey__meta span { display: inline-flex; align-items: center; white-space: nowrap; }
.journey__meta span:not(:last-child)::after { content: "·"; margin: 0 14px; color: var(--text-lo); }
.journey__enter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 11px 22px; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-weight: 600;
  background: linear-gradient(180deg, var(--accent), var(--accent-warm)); color: var(--accent-ink);
  box-shadow: 0 10px 26px -12px rgba(245,155,61,.6), 0 1px 0 rgba(255,255,255,.35) inset;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.journey__enter:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(245,155,61,.7), 0 1px 0 rgba(255,255,255,.4) inset; }
.journey__enter svg { transition: transform .2s var(--ease); }
.journey__enter:hover svg { transform: translateX(3px); }

/* ── JS-enhanced: tall runway + pinned stage + scroll scrub ── */
.js .journey { height: 300vh; }                 /* runway the beat spans */
.js .journey__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }

.js .journey__earth {
  transform:
    translateY(calc(var(--earth-shift, 0) * 1vh))
    scale(var(--earth-scale, 1))
    rotate(var(--earth-rot, 0deg));
  will-change: transform;
}
.js .journey__wedge { opacity: var(--wedge-op, 1); }
.js .journey__copy {
  opacity: var(--copy-op, 1);
  transform: translateY(calc(var(--copy-shift, 0) * 1px));
  filter: blur(calc(var(--copy-blur, 0) * 1px));   /* small element — cheap depth cue */
  will-change: transform, opacity;
}
.js .journey__bar {
  opacity: var(--bar-op, 1);
  transform: translateX(-50%) translateY(calc(var(--bar-shift, 0) * 1px));
  will-change: transform, opacity;
}

/* ── reduced motion: no pin, no scrub — a calm static hero ── */
@media (prefers-reduced-motion: reduce) {
  .js .journey { height: 100vh; height: 100svh; }
  .js .journey__stage { position: relative; }
  .js .journey__earth { transform: none; }
  .js .journey__wedge { opacity: 1; }
  .js .journey__copy { opacity: 1; transform: none; }
  .js .journey__bar  { opacity: 1; transform: translateX(-50%); }
}

/* ── narrower screens: headline leads at the top, gentler seat ── */
@media (max-width: 820px) {
  .journey__earth { object-position: 48% 42%; }
  .journey__veil {
    background: linear-gradient(168deg,
      rgba(6,14,12,.9) 0%, rgba(6,14,12,.55) 44%, rgba(6,14,12,.2) 72%, transparent 100%);
  }
  .journey__inner { align-content: start; padding-block: clamp(104px, 20vh, 168px) 0; }
  .journey__title { font-size: clamp(2.4rem, 12vw, 4rem); }
  .journey__bar { padding: 10px 10px 10px 18px; }
}
@media (max-width: 460px) {
  .journey__title { font-size: clamp(2.1rem, 13vw, 3rem); }
  .journey__meta { display: none; }             /* tiny screens: bar is just the CTA */
  .journey__bar { justify-content: center; }
}