/* ==========================================================================
   JOURNEY — scroll-driven interactive timeline
   ========================================================================== */

.journey {
  background: var(--paper);
  position: relative;
}

/* ─── Desktop: scroll-track creates scroll space, inner sticks ─── */
.journey-scroll-track {
  /* 6 milestones × 90vh of scroll distance each */
  height: calc(6 * 90vh);
  position: relative;
}

.journey-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding-top: clamp(8rem, 16vh, 12.5rem);
  box-sizing: border-box;
}

.journey-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  width: 100%;
}

.journey-head {
  margin-bottom: clamp(4rem, 8.5vh, 5.8rem);
}
.journey-head .section-title {
  margin-top: 0.9rem;
  max-width: 28ch;
}

/* ─── Two-column stage ─── */
.journey-stage {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: start;
}

/* ─── Left panel: nav dots + large year ─── */
.journey-left {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  position: relative;
}

.journey-nav {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  flex-shrink: 0;
}

.journey-dot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.journey-dot-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-light);
  border: 1.5px solid var(--line-light);
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s var(--ease-out);
}

.journey-dot.is-active .journey-dot-pip {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.5);
}

.journey-dot-lbl {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  transition: color 0.3s ease;
}

.journey-dot.is-active .journey-dot-lbl { color: var(--orange); }

.journey-year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--orange);
  user-select: none;
  transition: opacity 0.25s ease;
}

/* ─── Right panel: content ─── */
.journey-right {
  position: relative;
}

.journey-content {
  transition: opacity 0.22s ease, transform 0.32s var(--ease-out);
  min-height: clamp(14.5rem, 25vh, 19.5rem);
  padding-left: clamp(0.5rem, 2.5vw, 2rem);
}

.journey-content.is-leaving {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.journey-index {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.journey-headline {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--espresso);
  margin-bottom: 1.5rem;
  max-width: 20ch;
}

.journey-body {
  font-size: 1.05rem;
  line-height: 1.82;
  color: #4b3b2d;
  max-width: 46ch;
}

/* Decorative large bg year (right side) */
.journey-bg-year {
  position: absolute;
  top: -2rem;
  right: -1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--orange);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity 0.22s ease;
}

.journey-right > *:not(.journey-bg-year) { position: relative; z-index: 1; }

/* Progress bar */
.journey-progress {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6vh;
  width: min(calc(100% - clamp(2.5rem, 8vw, 5rem)), calc(var(--w-wide) - clamp(2.5rem, 8vw, 5rem) - 20rem));
  height: 2px;
  background: var(--line-light);
}

.journey-progress-fill {
  height: 100%;
  background: var(--orange);
  width: 0%;
  transition: width 0.15s ease;
}

/* ─── Tablet (iPad Pro & similar): still uses the desktop sticky layout, but
   these viewports are much taller relative to their width, which left the
   grid feeling small and pinned to the top with a lot of dead space below.
   Centre the content vertically and scale it up to use the space better. ─── */
@media (min-width: 861px) and (max-width: 1180px) {
  .journey-sticky {
    align-items: center;
    padding-top: 0;
  }
  .journey-head { margin-bottom: clamp(3rem, 6vh, 4.5rem); }
  .journey-stage {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  .journey-year { font-size: clamp(5.5rem, 11vw, 7.2rem); }
  .journey-headline { font-size: clamp(2.15rem, 4.4vw, 2.7rem); }
  .journey-progress { bottom: clamp(3rem, 7vh, 5rem); }
}

/* ─── Mobile: static list layout ─── */
.journey-mobile { display: none; }

@media (max-width: 860px) {
  .journey-scroll-track { display: none; }
  .journey-mobile {
    display: block;
    padding: clamp(4.5rem, 10vh, 8rem) 0;
  }
  .journey-mobile-inner {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  }
  .journey-mobile-head { margin-bottom: 2rem; }
  .journey-mobile-head .section-title { margin-top: 0.8rem; }
  .journey-mobile-inner { position: relative; }
  /* Extra scroll room exactly equal to the fade zone's height (below), so
     the sticky overlay has somewhere to sit once the real last item has
     already scrolled clear of it — without this, the last item's tail was
     mathematically stuck under the zone forever, since there was no more
     page left to scroll past it. */
  .journey-list { padding-bottom: clamp(4.5rem, 16vh, 8rem); }
  /* Fade the tail of the list into the section background as it nears the
     bottom of the viewport — pinned via sticky rather than tied to the
     element's own height, so it always reads at the screen edge, not just
     at the true end of the list. Layers on top of the existing per-item
     opacity fade, it doesn't replace it.
     Same total zone height as before (don't touch), but the transparent
     stop now holds through the first half of the zone instead of fading
     almost immediately — content passing through the middle of the screen
     stays fully visible, and only the final approach to the true bottom
     edge dims out, gradually. */
  .journey-fade {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(4.5rem, 16vh, 8rem);
    margin-top: calc(-1 * clamp(4.5rem, 16vh, 8rem));
    background: linear-gradient(to bottom,
      rgba(250, 244, 234, 0) 0%,
      rgba(250, 244, 234, 0) 45%,
      var(--paper) 100%);
    pointer-events: none;
    z-index: 2;
  }
  .journey-item {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1.4rem;
    padding: 1.6rem 0;
    align-items: start;
    position: relative;
  }
  /* Text fades/lifts in sync with --jline-progress, driven continuously by
     scroll position in script.js (not a one-shot reveal — reverses on scroll up). */
  .journey-item > * {
    opacity: var(--jtext-opacity, 0.15);
    transform: translateY(calc((1 - var(--jtext-opacity, 0.15)) * 12px));
    transition: opacity 0.09s linear, transform 0.09s linear;
  }
  /* Vertical spine — segment starts below year text, ends at item bottom.
     Gap between segments = top-padding of next item (1.6rem ≈ 26px) + year height (40px) = ~66px */
  .journey-item::before,
  .journey-item::after {
    content: '';
    position: absolute;
    left: calc(2.5rem - 1px);
    /* Start below the year text: item padding-top + year element height + small breathing room */
    top: calc(1.6rem + 2.6rem);
    bottom: 0;
    width: 2px;
  }
  /* Faint permanent track */
  .journey-item::before {
    background: var(--line-light);
  }
  /* Orange fill that draws downward as the user scrolls, undraws on scroll up */
  .journey-item::after {
    background: var(--orange);
    transform-origin: top;
    transform: scaleY(var(--jline-progress, 0));
    transition: transform 0.09s linear;
  }
  /* No connector after the last year */
  .journey-item:last-child::before,
  .journey-item:last-child::after { display: none; }
  .journey-item-year {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--orange);
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding-top: 0.15rem;
    text-align: center;
    position: relative;
  }
  .journey-item-headline {
    font-family: var(--font-display);
    font-weight: 460;
    font-size: 1.1rem;
    color: var(--espresso);
    margin-bottom: 0.5rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .journey-item-body {
    font-size: 0.88rem;
    line-height: 1.72;
    color: #4b3b2d;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-content { transition: none !important; }
  .journey-year { transition: none !important; }
  .journey-dot-pip { transition: none !important; }
  .journey-item > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .journey-item::after { transform: scaleY(1) !important; transition: none !important; }
}