/* ============================================================
   REIS NAAR DE BODEM — scroll-cinematic sequentie
   Vier dieptes van het kopje, crossfaden op scroll.
   Alleen gebruikt op wat-is-koffiedik.html.
   ============================================================ */
.journey-track {
  position: relative;
  height: 400vh; /* 4 stages */
  background: var(--espresso-deep);
}
.journey-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
.journey-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 60ms linear;
}
.journey-frame.active { opacity: 1; }
.journey-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.72) saturate(1.05);
}
.journey-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(16,10,6,0.35) 0%, rgba(16,10,6,0.05) 30%, rgba(16,10,6,0.55) 100%);
}
.journey-caption {
  position: absolute;
  left: 50%; bottom: 12%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: var(--on-dark-1);
  width: 100%;
  padding: 0 var(--container-x);
}
.journey-caption .eyebrow { color: var(--gold-light); justify-content: center; }
.journey-caption .eyebrow::before { background: var(--gold-light); }
.journey-caption h3 {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--on-dark-1);
  margin-top: var(--sp-3); text-wrap: balance;
}
.journey-progress {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  z-index: 2; display: flex; gap: 8px;
}
.journey-progress span {
  width: 26px; height: 3px; border-radius: 2px; background: rgba(244,236,217,0.28);
  transition: background 200ms ease;
}
.journey-progress span.active { background: var(--gold-light); }

@media (prefers-reduced-motion: reduce) {
  .journey-track { height: auto; }
  .journey-sticky { position: relative; height: auto; }
  .journey-frame { position: relative; opacity: 1; height: 70vh; }
  .journey-frame + .journey-frame { margin-top: 2px; }
}
@media (max-width: 640px) {
  .journey-caption h3 { font-size: 1.3rem; }
}