/* Scroll-driven journey edition. Belongs to index7.html; layers on christmas.css + living.css. */

/* ── Intro copy sits above the pinned stage ── */
.journey { padding-bottom: 0; overflow: visible; }
.journey-intro { padding-bottom: clamp(30px, 5vw, 60px); }
.journey-intro .story-copy { max-width: 620px; }
.journey-hint { margin-top: 26px !important; font-size: .62rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--gold) !important; }

/* ── Pinned stage: the track is tall, the stage sticks and the scenes crossfade ── */
.journey-track { position: relative; height: calc(var(--scenes) * 100svh); }
.journey-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--deep); isolation: isolate;
}
.journey-scenes { position: absolute; inset: 0; }
.journey-scene {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity 900ms var(--ease);
  will-change: opacity;
}
.journey-scene.is-active { opacity: 1; }
.journey-scene img, .journey-scene video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center;
}
.journey-scene video { opacity: 0; transition: opacity 1200ms ease; pointer-events: none; }
.journey-scene video.is-playing { opacity: 1; }
/* Slow Ken Burns on the still so scenes breathe even before the loop arrives. */
@media (prefers-reduced-motion: no-preference) {
  .journey-scene img { transform: scale(1.06); transition: transform 6s linear; }
  .journey-scene.is-active img { transform: scale(1); }
}
/* Readability veil: darker at the bottom for captions, quiet on the left for headline. */
.journey-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(0deg, #081c17f2 0%, #081c17a6 26%, transparent 55%),
    linear-gradient(90deg, #081c1780, transparent 45%),
    linear-gradient(180deg, #0b241e 0%, transparent 18%);
}

/* ── Route line: draws itself with scroll progress ── */
.journey-route {
  position: absolute; left: var(--space); right: var(--space); bottom: clamp(330px, 40vh, 400px);
  height: 40px; z-index: 2; color: var(--gold); overflow: visible; opacity: .9;
}
.journey-route-base { opacity: .35; }
.journey-route-line { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--journey-progress, 0)); }

/* ── Captions: stacked, only the active one visible ── */
.journey-captions { position: absolute; left: var(--space); right: var(--space); bottom: clamp(70px, 10vh, 110px); z-index: 2; max-width: 640px; }
.journey-caption {
  position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none;
  transform: translateY(26px); transition: opacity 700ms var(--ease), transform 900ms var(--ease);
}
.journey-caption.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; transition-delay: 200ms; }
.journey-index { display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.journey-caption h3 { font-size: clamp(2rem, 4.6vw, 4.4rem); }
.journey-caption h3 em { color: var(--gold); }
.journey-caption p { margin-top: 16px; max-width: 460px; color: var(--muted); font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.7; }

/* ── Progress dots ── */
.journey-dots { position: absolute; right: var(--space); top: 50%; transform: translateY(-50%); z-index: 2; margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.journey-dots li { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff5df88; transition: background 400ms, transform 400ms; }
.journey-dots li.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.4); }

/* ── Curtain wipe when a section enters ── */
.curtain { position: relative; overflow: hidden; }
.curtain::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--deep); transform-origin: top;
  transition: transform 1100ms cubic-bezier(.76, 0, .24, 1);
}
.curtain.is-open::after { transform: scaleY(0); transform-origin: bottom; }
html:not(.js) .curtain::after { display: none; }

/* ── Embers rising through the message section ── */
.ember-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ember {
  position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9b8, #e3bc79 45%, transparent 70%);
  opacity: 0; animation: ember-rise var(--dur, 9s) linear var(--delay, 0s) infinite;
}
@keyframes ember-rise {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12% { opacity: .9; }
  80% { opacity: .5; }
  100% { transform: translate3d(var(--drift, 20px), -110vh, 0) scale(1.1); opacity: 0; }
}
.message-section .message-inner { z-index: 1; }

/* ── Experience icons wake up on entry ── */
.experience-card.is-visible .icon { animation: icon-wake 900ms var(--ease) backwards; animation-delay: var(--delay, 0ms); }
@keyframes icon-wake {
  0% { transform: translateY(14px) rotate(-10deg) scale(.7); opacity: 0; }
  60% { transform: translateY(-4px) rotate(3deg) scale(1.08); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* ── Mobile: same stage, captions lower, characters kept in frame ── */
@media (max-width: 900px) {
  .journey-scene img, .journey-scene video { object-position: 62% center; }
  .journey-route { bottom: clamp(340px, 44vh, 420px); }
  .journey-dots { right: 14px; }
}
@media (max-width: 640px) {
  .journey-track { height: calc(var(--scenes) * 100svh); }
  .journey-scene img, .journey-scene video { object-position: 66% center; }
  .journey-stage::after {
    background:
      linear-gradient(0deg, #081c17f7 0%, #081c17c4 32%, transparent 62%),
      linear-gradient(180deg, #0b241e 0%, transparent 22%);
  }
  .journey-captions { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); right: 34px; }
  .journey-caption h3 { font-size: clamp(1.8rem, 8.5vw, 2.6rem); }
  .journey-caption p { font-size: .9rem; }
  .journey-route { bottom: 350px; height: 30px; }
  .journey-dots { gap: 10px; }
  .journey-dots li { width: 6px; height: 6px; }
}

/* ── Reduced motion / Save-Data: no pinning, stills stacked with captions ── */
@media (prefers-reduced-motion: reduce) {
  .journey-track { height: auto; }
  .journey-stage { position: relative; height: auto; overflow: visible; background: none; }
  .journey-stage::after, .journey-route, .journey-dots { display: none; }
  .journey-scenes { position: relative; display: grid; gap: 28px; }
  .journey-scene { position: relative; opacity: 1; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; }
  .journey-scene img { transform: none; }
  .journey-scene video { display: none; }
  .journey-captions { position: relative; inset: auto; max-width: none; margin-top: 30px; display: grid; gap: 22px; }
  .journey-caption { position: relative; opacity: 1; transform: none; pointer-events: auto; }
  .curtain::after, .ember { display: none; }
  .experience-card.is-visible .icon { animation: none; }
}
html.save-data .journey-scene video { display: none; }