/* ============================================================
   journey.css: the home page's acts after his name.
   Act 3 the flight through the people · act 4 the red room ·
   act 5 the story (house lights up) · act 6 the ending.
   ============================================================ */

.journey { position: relative; z-index: 1; }
.act { position: relative; }
.act__title {
  font: 400 clamp(2.3rem, 1.4rem + 3.2vw, 4.4rem)/1.02 var(--font-display);
  letter-spacing: -0.01em; text-wrap: balance;
  color: var(--warm);
}
/* the titles' and lines' colour fade lives in .rv (base.css), with their rise; never give them a transition here */
.act__sub { font: italic 400 var(--t-lead)/1.3 var(--font-text); color: var(--warm-muted); margin-top: 8px; }
.act__line { font-size: var(--t-lead); line-height: 1.45; color: var(--warm); max-width: 30em; margin: 18px 0 26px; }
.act__cta { margin-top: 4px; }
.act__wrap {
  position: relative; z-index: 1;
  width: min(1200px, 100%); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}

/* ================= act 3: the flight through the people who shaped him ================= */
.fly-track { position: relative; height: calc(100vh + 230vh); height: calc(100svh + 230svh); }
.fly-pin {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: 100svh; overflow: hidden;
  perspective: 900px; perspective-origin: 50% 46%;
}
.fly-fog {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 46%, rgba(var(--lamp), 0.07), rgba(var(--lamp), 0) 70%);
}
.fly-world {
  position: absolute; left: 50%; top: 46%; width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.fly-p {
  position: absolute; left: 0; top: 0;
  max-width: none;
  filter: drop-shadow(0 20px 22px rgba(12, 3, 5, 0.55));
  backface-visibility: hidden;
  opacity: 0;
  user-select: none; -webkit-user-drag: none;
}
.fly-copy {
  position: absolute; left: 50%; top: 46%; z-index: 2;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  text-align: center;
  display: grid; justify-items: center; gap: 6px;
  padding: 26px 22px;
  pointer-events: none;
}
.fly-copy::before {           /* a soft pool of dark under the words so the passing people never swallow them */
  content: ""; position: absolute; left: -12%; right: -12%; top: -30%; bottom: -30%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(27, 7, 10, 0.78), rgba(27, 7, 10, 0) 70%);
}
.fly-copy .act__cta { pointer-events: auto; margin-top: 18px; }

/* ================= act 4: the Chinese Bridge, a red room ================= */
.act--win {
  padding: clamp(110px, 18vh, 200px) 0;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 50%, rgba(154, 28, 36, 0.62), rgba(154, 28, 36, 0) 72%),
    linear-gradient(180deg, rgba(91, 12, 19, 0) 0%, rgba(91, 12, 19, 0.55) 30%, rgba(91, 12, 19, 0.55) 70%, rgba(91, 12, 19, 0) 100%);
}
.win-glyphs {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: grid; place-items: center; pointer-events: none;
}
.win-glyphs span {
  font: 900 clamp(9rem, 30vw, 26rem)/1 var(--font-zh);
  letter-spacing: 0.02em; white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgba(234, 203, 134, 0.16), rgba(234, 203, 134, 0.02) 85%);
  -webkit-background-clip: text; background-clip: text;
  will-change: transform;
}
/* the island game's panel (.isle, shared.css) tilts up to face you as it rises, and leans toward the pointer */
.tilt { display: block; perspective: 1100px; border-radius: 20px; }
.tilt__card { transform-origin: 50% 100%; will-change: transform; }

/* ================= the rooms: one row of photos per room of his life ================= */
.act--rooms { padding: clamp(110px, 18vh, 200px) 0 clamp(90px, 14vh, 160px); overflow: hidden; }
.rooms__head { padding: 0 var(--gutter); max-width: 1200px; margin: 0 auto clamp(28px, 5vh, 56px); }
.room-row { margin-top: clamp(40px, 7vh, 76px); }
.room-row__label {
  display: flex; align-items: baseline; gap: 14px;
  max-width: 1200px; margin: 0 auto 16px; padding: 0 var(--gutter);
  font: 500 var(--t-ui)/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-muted);
}
.room-row__label [lang], .room-row__label span:first-child { letter-spacing: 0.1em; }
.room-row__year { color: var(--gold); letter-spacing: 0.08em; }
.room-row__viewport { display: flex; overflow: hidden; }
.room-row__track {
  display: flex; gap: clamp(12px, 1.4vw, 22px);
  width: max-content; margin: 0; padding: 0 var(--gutter); list-style: none;
  will-change: transform;
}
.room-row.is-fit .room-row__track { margin: 0 auto; }
.shot {
  flex: none; height: clamp(220px, 38vh, 360px);
  border-radius: var(--r-photo); overflow: hidden;
  background: rgba(247, 239, 228, 0.04);
  box-shadow: 0 40px 70px -36px rgba(12, 2, 4, 0.85), 0 0 0 1px rgba(255, 230, 190, 0.1);
}
.shot img {
  display: block; height: 100%; width: auto;
  opacity: 0; filter: blur(10px);
  transition: opacity var(--dur-grace) var(--ease-grace), filter var(--dur-grace) var(--ease-grace);
}
.shot img.is-in { opacity: 1; filter: none; }

/* ================= act 5: the story, with the house lights up ================= */
.act--story { padding: clamp(120px, 20vh, 220px) 0; }
html[data-field="light"] .act--story .act__title,
html[data-field="light"] .act--story .act__line { color: var(--ink); }
html[data-field="light"] .act--story .eyebrow { color: var(--gold-deep); }
.act__window { margin: 0; perspective: 1200px; }
.act__windowframe {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 776 / 950; max-height: 76vh; margin: 0 auto;
  border-radius: var(--r-photo);
  box-shadow: var(--shadow-print);
  transform-origin: 50% 50%;
  will-change: transform;
}
.act__windowframe img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); will-change: transform; }

/* ================= act 6: the ending ================= */
.act--end {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden;
  padding-top: clamp(100px, 16vh, 180px);
}
.end__copy { display: grid; justify-items: center; align-content: center; text-align: center; padding: 0 var(--gutter); gap: 4px; }
.end__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.end__links .btn svg { width: 18px; height: 18px; }
.act--end .monument { margin-top: clamp(60px, 10vh, 120px); }

/* ================= phone ================= */
@media (max-width: 760px) {
  .act__wrap { grid-template-columns: 1fr; gap: 40px; }
  .act--win .act__copy, .act--story .act__copy { text-align: left; }
  .fly-track { height: calc(100svh + 190svh); }
  .act__windowframe { max-height: 62svh; }
  .shot { height: clamp(200px, 30svh, 280px); }
}

@media (prefers-reduced-motion: reduce) {
  .fly-track { height: auto; }
  .fly-pin { position: relative; }
  .tilt__card, .act__windowframe { transform: none !important; }
  .shot img { transition: none; filter: none; }
  /* the rooms scroll by hand instead of drifting */
  .room-row__viewport { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .room-row__viewport::-webkit-scrollbar { display: none; }
  .shot { scroll-snap-align: start; scroll-margin-left: var(--gutter); }
}