/* ============================================================
   THEMES — edit colors here.
   --family-* : Himalayan blues (the family brand)
   --become-* : warm creams/tans (BECOME company chapters only)
   ============================================================ */
:root {
  --family-ink:    #0a1c2e;  /* deepest night blue */
  --family-navy:   #12304d;
  --family-blue:   #16395a;
  --family-sky:    #7fb2d9;
  --family-pale:   #eaf2f8;  /* light section background */
  --family-mist:   #d7e6f2;  /* quiz band background */
  --gold:          #e9c46a;  /* stars, donate accent */

  --become-bg:     #f5ead8;
  --become-bg2:    #efe2c9;
  --become-ink:    #5b4a2e;
  --become-accent: #b08d57;
  --become-green:  #6a8f6b;

  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--family-ink);
  background: var(--family-ink);
  line-height: 1.65;
}
body.locked { overflow: hidden; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }

.chapter { padding: clamp(3rem, 8vw, 6rem) 1.5rem; }
.chapter__inner { max-width: 680px; margin: 0 auto; }
.chapter--pale { background: var(--family-pale); color: var(--family-blue); }
.chapter--deep { background: linear-gradient(180deg, var(--family-blue), var(--family-ink)); color: var(--family-pale); }
.chapter--warm {
  background: linear-gradient(180deg, var(--become-bg), var(--become-bg2));
  color: var(--become-ink);
  border-left: 6px solid var(--become-accent);
  text-align: center;
}
.chapter--warm p { max-width: 48ch; margin-left: auto; margin-right: auto; }
.chapter h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); margin-bottom: 1rem; }
.chapter p + p { margin-top: 1rem; }

.kicker {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; opacity: .65;
  display: block; margin-bottom: .75rem;
}

/* ============ 0 · THE DOOR ============ */
#door-scene {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; /* short/landscape viewports: keep title + button reachable */
  background:
    linear-gradient(180deg, rgba(10,28,46,.55) 0%, rgba(10,28,46,.15) 45%, rgba(10,28,46,.65) 100%),
    url("images/hero-mountains-real.webp") center / cover no-repeat,
    linear-gradient(180deg, #0a1c2e, #16395a); /* fallback if image missing */
  transform-origin: 50% 44%; /* zoom toward the doorway when walking through */
  transition: transform 1.5s cubic-bezier(.5, 0, .75, 0), opacity 1.2s ease .25s;
}
/* Walking through: the doorway rushes toward the viewer and everything fades. */
#door-scene.through { transform: scale(8); opacity: 0; pointer-events: none; }
#door-scene.gone { display: none; }

.door-content { text-align: center; padding: 1.5rem; margin: auto; color: var(--family-pale); }
/* Fade the words away as the doors open, so only the doorway zooms. */
.door-title, .door-tagline, .door-btn { transition: opacity .5s ease; }
#door-scene.opening .door-title,
#door-scene.opening .door-tagline,
#door-scene.opening .door-btn { opacity: 0; }

.door-title { font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: .02em; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.door-title span { display: block; font-size: .42em; font-weight: 400; font-style: italic; opacity: .85; margin-top: .2rem; }

/* ---- The portal (carved double door) ---- */
.portal {
  position: relative; margin: 1.8rem auto 1.6rem;
  height: clamp(300px, 58vh, 560px); aspect-ratio: 2 / 3;
  perspective: 1400px;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 3px rgba(0,0,0,.35);
  overflow: hidden;
}
/* Dimmed living room seen once the doors part (no light flooding out). */
.portal-glow {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(rgba(10,20,32,.62), rgba(10,20,32,.62)),
    url("images/home-lloyd2.webp") center / cover no-repeat;
  opacity: 1;
}
.leaf {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1;
  background-image: url("images/door-real.webp");
  background-size: 200% 100%; background-repeat: no-repeat;
  backface-visibility: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,.4) inset;
  transition: transform 1.2s cubic-bezier(.5, .05, .3, 1);
}
.leaf-left  { left: 0;  background-position: left center;  transform-origin: left center; }
.leaf-right { right: 0; background-position: right center; transform-origin: right center; }
/* Non-interactive frame ring to seat the door in a threshold. */
.portal-frame {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: 8px; box-shadow: 0 0 0 4px rgba(20,12,4,.55) inset, 0 0 40px rgba(0,0,0,.5) inset;
}
#door-scene.opening .leaf-left  { transform: rotateY(105deg); }
#door-scene.opening .leaf-right { transform: rotateY(-105deg); }

.door-tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 3.4vw, 1.9rem); line-height: 1.2; color: #cfe3f2; text-shadow: 0 1px 10px rgba(0,0,0,.6); max-width: 26ch; margin: 0 auto 1.6rem; }

.door-btn {
  font: 600 1rem var(--sans); letter-spacing: .04em;
  color: var(--family-ink); background: var(--family-sky);
  border: none; border-radius: 999px; padding: .8rem 2.1rem; cursor: pointer;
  box-shadow: 0 4px 22px rgba(127,178,217,.45);
  transition: transform .2s ease, box-shadow .2s ease, opacity .5s ease;
}
.door-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 26px rgba(127,178,217,.6); }

@media (prefers-reduced-motion: reduce) {
  #door-scene, .leaf, .portal-glow, .door-title, .door-tagline, .door-btn { transition: none; }
}

/* ============ SCROLL REVEALS ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ COUNTERS (shared: home scene, chapters) ============ */
.counters { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.counter { flex: 1 1 130px; text-align: center; padding: 1.1rem .8rem; border-radius: 14px; }
.counter .count { font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 2.4rem); font-weight: 700; display: block; line-height: 1; margin-bottom: .35rem; }
.counter small { opacity: .78; font-size: .82rem; }

/* ============ 1 · HOME SCENE (you walk into the room) ============ */
.home-scene {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center;
  padding: clamp(3rem, 8vh, 7rem) 1.5rem;
  color: var(--family-pale);
}
.home-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 28%;
}
/* Scrim: softens the room (privacy) and keeps the copy readable. */
.home-scene::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,28,46,.50) 0%, rgba(10,28,46,.66) 55%, rgba(10,28,46,.82) 100%);
}
.home-copy { position: relative; z-index: 2; text-align: center; margin: 0 auto; }
.home-copy--wide { max-width: 860px; }
.home-copy .lead-line {
  font-size: clamp(1.8rem, 4.4vw, 2.6rem); font-weight: 700; line-height: 1.15;
  max-width: 24ch; margin-top: 1.8rem; color: var(--gold);
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}

/* Stats row (e.g. community-square unreached figures) */
.square-stats { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 2.2rem auto 0; }
.square-stats .sq-stat {
  flex: 1 1 190px; padding: 1.2rem .9rem; border-radius: 14px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(3px);
}
.square-stats .sq-num { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 2.5rem); line-height: 1; display: block; }
.square-stats .sq-sub { font-size: .5em; font-weight: 600; opacity: .82; }
.square-stats small { display: block; margin-top: .5rem; opacity: .85; font-size: .84rem; line-height: 1.3; }
.home-copy .kicker { opacity: .8; }
.home-copy h2 { font-size: clamp(2rem, 5.5vw, 3rem); margin-bottom: 1.1rem; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.home-copy p { max-width: 46ch; margin: 0 auto 1.1rem; font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.6; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.home-copy .counters { justify-content: center; }
.home-scene .counter,
.home-lead .counter,
.journey .counter {
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: none; color: var(--family-pale);
}
.scroll-cue {
  margin-top: 2rem; font: 600 .8rem var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--family-sky);
  animation: cueBob 1.8s ease-in-out infinite;
}
@keyframes cueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ============ CINEMATIC SCENE TRANSITIONS ============
   Markup:
   <section class="scene-transition" data-motion="dolly|pan|dissolve|chair">
     <div class="st-stage">
       <div class="st-layer st-back" style="background-image:url(...)"></div>
       <div class="st-layer st-fore" style="background-image:url(...)"></div>
       <div class="st-caption"> optional text over the scene </div>
     </div>
   </section>
   JS writes --p (0..1) on the section as it scrolls; motions read it below. */
.scene-transition { position: relative; height: 200vh; --p: 0; }
.st-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--family-ink);
}
.st-layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  will-change: transform, opacity; backface-visibility: hidden;
}
.st-caption {
  position: absolute; left: 0; right: 0; bottom: clamp(4rem, 24vh, 13rem);
  text-align: center; padding: 0 1.5rem; z-index: 3; color: var(--family-pale);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 3.8vw, 2.1rem); text-shadow: 0 2px 16px rgba(0,0,0,.7);
  /* fade the caption in quickly near the start */
  opacity: clamp(0, calc(var(--p) * 14), 1);
}
.st-hint {
  position: absolute; left: 0; right: 0; bottom: 1.4rem; text-align: center;
  z-index: 3; color: var(--family-sky); font: 600 .8rem var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  opacity: clamp(0, calc(1 - var(--p) * 4), .8); /* nudge to scroll, fades as you go */
}

/* DOLLY — walk forward: the near scene scales up and fades, revealing the next. */
.scene-transition[data-motion="dolly"] .st-back  { transform: scale(calc(1.18 - .18 * var(--p))); }
.scene-transition[data-motion="dolly"] .st-fore  {
  transform: scale(calc(1 + 1.9 * var(--p)));
  opacity: clamp(0, calc(1 - (var(--p) - .5) * 2.4), 1);
}

/* WALK-UP — the street shows on its own (no living-room layer), then pans up. */
.scene-transition[data-motion="walk-up"] .st-fore {
  background-position: center calc(60% - 50% * var(--p));
  transform: scale(calc(1 + .18 * var(--p)));
}

/* PAN — walk down the street: wide near layer slides sideways, destination fades in. */
.scene-transition[data-motion="pan"] .st-fore {
  transform: translateX(calc(-42% * var(--p))) scale(1.12);
  opacity: clamp(0, calc(1 - (var(--p) - .72) * 3.6), 1);
}
.scene-transition[data-motion="pan"] .st-back {
  transform: scale(calc(1.12 - .12 * var(--p)));
  opacity: clamp(.15, calc(var(--p) * 1.4), 1);
}

/* DISSOLVE — the room shifts / a chair empties: cross-fade two layers. */
.scene-transition[data-motion="dissolve"] .st-fore { opacity: calc(1 - var(--p)); }
.scene-transition[data-motion="dissolve"] .st-back {
  opacity: var(--p); transform: scale(calc(1.06 - .06 * var(--p)));
}
/* Once the classroom is in focus, fade the caption off and reveal the logo. */
.scene-transition[data-motion="dissolve"] .st-caption {
  opacity: clamp(0, min(calc(var(--p) * 14), calc((0.85 - var(--p)) * 12)), 1);
}
.st-brand {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 60% 55% at center,
    rgba(248,244,236,.86) 0%, rgba(248,244,236,.5) 45%, rgba(248,244,236,0) 72%);
  opacity: clamp(0, calc((var(--p) - .8) * 6), 1);
}
.st-brand img { width: min(58vw, 300px); height: auto; }
.brand-cue {
  margin-top: 1.4rem; color: var(--family-sky);
  font: 600 .8rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
  animation: cueBob 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .brand-cue { animation: none; } }

/* CHAIR — a chair slides out from the table, inviting you to sit. */
.scene-transition[data-motion="chair"] .st-chair {
  position: absolute; z-index: 2;
  transform-origin: bottom center;
  transform:
    translate(calc(-9% * var(--p)), calc(7% * var(--p)))
    rotate(calc(-7deg * var(--p)))
    scale(calc(1 + .06 * var(--p)));
}

/* ============ 3 · BECOME (warm workshop chapter) ============ */
.become-intro { min-height: 100vh; display: flex; align-items: center; text-align: center; }
.become-intro .chapter__inner { max-width: 780px; }
.become-logo { display: block; width: min(70vw, 260px); height: auto; margin: 0 auto 1.2rem; }
.become-intro p { font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.6; max-width: 48ch; margin: 0 auto 1rem; }
.become-h3 { font-size: clamp(1.2rem, 3vw, 1.55rem); margin-top: 2.8rem; margin-bottom: 1.2rem; color: var(--become-accent); }

.stats { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 2.4rem auto 0; }
.stat { flex: 1 1 150px; background: #fff; border-radius: 14px; padding: 1.3rem .8rem; box-shadow: 0 6px 20px rgba(91,74,46,.10); }
.stat .count { font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1; display: block; color: var(--become-accent); margin-bottom: .35rem; }
.stat small { opacity: .82; font-size: .82rem; }

.tracks { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.track { flex: 1 1 140px; background: #fff; border-radius: 14px; padding: 1.15rem .6rem; font-weight: 600; box-shadow: 0 6px 20px rgba(91,74,46,.10); }
.track span { display: block; font-size: 1.9rem; margin-bottom: .35rem; }

/* ============ 4 · STUDENT BACKGROUNDS BAR ============ */
.bar { display: flex; height: 30px; border-radius: 999px; overflow: hidden; margin: 1.8rem 0 1rem; box-shadow: 0 4px 14px rgba(91,74,46,.12); }
.bar span { display: block; height: 100%; }
.legend { list-style: none; font-size: .95rem; display: grid; gap: .5rem; margin: 0 auto; max-width: 420px; text-align: left; }
.legend li { display: flex; align-items: center; }
.legend i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: .6rem; flex: none; }

/* ============ 6 · CLOSING (pull up a chair) ============ */
.closing-scene::before {
  background: linear-gradient(180deg, rgba(10,28,46,.72) 0%, rgba(10,28,46,.82) 100%);
}
.signup { max-width: 460px; margin: 1.8rem auto 0; text-align: left; }
.signup__row { display: flex; gap: .6rem; margin-bottom: .9rem; }
.signup__row input {
  flex: 1; min-width: 0; font: 1rem var(--sans); color: var(--family-ink);
  padding: .8rem .9rem; border-radius: 10px; border: 2px solid transparent; outline: none;
}
.signup__row input:focus { border-color: var(--family-sky); }
.signup__check { display: block; font-size: .95rem; opacity: .92; margin: .5rem 0; cursor: pointer; }
.signup__check input { margin-right: .5rem; accent-color: var(--family-sky); }
.signup__error { color: #f2b8a2; font-size: .9rem; margin-top: .5rem; }
.signup__btn {
  font: 700 1.05rem var(--sans); width: 100%; margin-top: 1.1rem; cursor: pointer;
  color: var(--family-ink); background: var(--family-sky);
  border: none; border-radius: 999px; padding: .9rem;
  transition: transform .15s ease;
}
.signup__btn:hover { transform: translateY(-2px); }
.signup-done { margin-top: 2rem; font-size: 1.15rem; }

.donate { margin-top: 3rem; }
.donate p { max-width: 46ch; margin: 0 auto 1.2rem; opacity: .92; }
.donate__btn {
  display: inline-block; font: 700 1.08rem var(--sans); text-decoration: none;
  color: var(--gold); border: 2px solid var(--gold); border-radius: 999px;
  padding: .85rem 2rem; transition: background .2s ease, color .2s ease;
}
.donate__btn:hover { background: var(--gold); color: var(--family-ink); }
.donate__row { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.donate__row .donate__btn { flex: 0 0 auto; }
.donate__card {
  max-width: 420px; text-align: center;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 1.1rem 1.3rem; backdrop-filter: blur(4px);
}
.donate__card p { margin: 0; max-width: none; font-size: 1.15rem; line-height: 1.5; opacity: .95; }
.footer-note { margin-top: 9rem; font-size: .82rem; opacity: .5; font-style: italic; }
.end-photo { display: block; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 2.5rem; margin-bottom: 2.5rem; }
.end-photo:has(+ .end-photo) { margin-bottom: 0; }
.end-photo + .end-photo { margin-top: 0; }
@media (max-width: 480px) { .signup__row { flex-direction: column; } }

/* Static (non-animated) stat number, e.g. the dollar figure */
.stat .count-static {
  font-family: var(--serif); font-weight: 700; line-height: 1; display: block;
  font-size: clamp(1.5rem, 3.6vw, 2rem); color: var(--become-accent); margin-bottom: .35rem;
}
/* Give the living-wage note breathing room below the stat cards */
.living-wage { margin-top: 2.6rem; }

/* Product images row (A season of growth) */
/* Six products in one row spanning the full screen width (full-bleed break-out). */
.product-row {
  display: flex; flex-wrap: nowrap; gap: clamp(.4rem, 1vw, .9rem); justify-content: center;
  margin-top: 2.4rem;
  width: 100vw; position: relative; left: 50%; margin-left: -50vw;
  padding: 0 clamp(1rem, 3vw, 3.5rem); box-sizing: border-box;
}
.product-row img {
  flex: 1 1 0; min-width: 0; max-width: 210px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* ===== 1 · HOME LEAD — the room cross-dissolves to the street on scroll =====
   Sticky background (living room -> street) with the copy flowing over it, so
   the same scene morphs; no second living-room image appears. */
.home-lead { position: relative; }
.hl-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 0;
  background: var(--family-ink);
}
.hl-stage .st-layer { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.hl-street { z-index: 0; }
.hl-living { z-index: 1; }
.hl-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,28,46,.50) 0%, rgba(10,28,46,.66) 55%, rgba(10,28,46,.82) 100%);
}
.hl-stage .st-caption { z-index: 3; }
.hl-copy-wrap {
  position: relative; z-index: 4; margin-top: -100vh; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 8vh, 7rem) 1.5rem; color: var(--family-pale);
}
.hl-spacer { height: 120vh; }

/* Motion: hold, then cross-dissolve living room -> street, then pan the street up. */
.home-lead .hl-living,
.home-lead .hl-scrim { opacity: clamp(0, calc(1 - (var(--p) - .30) / .30), 1); }
.home-lead .hl-street {
  background-position: center calc(58% - 24% * clamp(0, calc((var(--p) - .58) / .42), 1));
  transform: scale(calc(1 + .16 * var(--p)));
  transform-origin: center 40%;
}
.home-lead .st-caption { opacity: clamp(0, calc((var(--p) - .60) * 6), 1); }

@media (prefers-reduced-motion: reduce) {
  .home-lead .hl-living, .home-lead .hl-scrim, .home-lead .st-caption { opacity: 1; }
}

/* ===== CINEMA — three scene photos (family ministry → graduation → Christmas
   living room) share ONE sticky stage and cross-fade on scroll, each photo used
   exactly once, then fade to a deep-blue `cm-base` that stays behind the signup.
   JS (initTransitions) writes --p (0..1) across the section; the layers read it.
   Four content beats scroll over the pinned stage, one per quarter of --p. ===== */
.cinema { position: relative; height: 400vh; background: var(--family-ink); color: var(--family-pale); }
/* Deep-blue base spanning the whole section — what the photos finally fade to. */
.cinema .cm-base { position: absolute; inset: 0; z-index: 0; }
/* One pinned stage holds all three photo layers. */
.cinema .cm-stage { position: sticky; top: 0; height: 100vh; z-index: 1; overflow: hidden; }
.cinema .cm-layer {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
  will-change: opacity; backface-visibility: hidden;
}
/* Each upper layer holds, then fades out to reveal the layer beneath it —
   family (top) → graduation → Christmas → base. One dissolve per quarter. */
.cinema .cm-family { z-index: 3; opacity: clamp(0, calc(1 - (var(--p) - .20) * 14), 1); }
.cinema .cm-grad   { z-index: 2; opacity: clamp(0, calc(1 - (var(--p) - .45) * 14), 1); }
.cinema .cm-xmas   { z-index: 1; opacity: clamp(0, calc(1 - (var(--p) - .70) * 14), 1); }
.cinema .cm-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,28,46,.50) 0%, rgba(10,28,46,.66) 55%, rgba(10,28,46,.82) 100%);
}
.cinema .cm-content { position: relative; z-index: 3; margin-top: -100vh; }
.cinema .cm-beat {
  min-height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(3rem, 8vh, 7rem) 1.5rem;
}
/* Reduced motion: no scrub — show the deep-blue base under every beat. */
@media (prefers-reduced-motion: reduce) {
  .cinema .cm-family, .cinema .cm-grad, .cinema .cm-xmas { opacity: 0; }
}

/* ===== JOURNEY — the walk from home to the classroom. FIVE scene photos share
   ONE sticky stage and cross-fade on scroll (living room → street → community
   square → training center → classroom), each photo used exactly once — no photo
   is ever repeated. Same technique as .cinema. Five content beats scroll over the
   pinned stage; the BECOME logo blooms as you arrive at the classroom. ===== */
.journey { position: relative; height: 500vh; background: var(--family-ink); color: var(--family-pale); }
.journey .jn-stage { position: sticky; top: 0; height: 100vh; z-index: 1; overflow: hidden; }
.journey .jn-layer {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
  will-change: opacity; backface-visibility: hidden;
}
/* Each upper layer holds, then fades out to reveal the one beneath it. The
   classroom (bottom) never fades — it's what the journey finally rests on.
   --tint scales that layer's darkening (see .jn-layer::after below). */
.journey .jn-living   { z-index: 5; opacity: clamp(0, calc(1 - (var(--p) - .15) * 14), 1); --tint: 1; }
.journey .jn-street   { z-index: 4; opacity: clamp(0, calc(1 - (var(--p) - .35) * 14), 1); --tint: .20; }
.journey .jn-square   { z-index: 3; opacity: clamp(0, calc(1 - (var(--p) - .55) * 14), 1); --tint: 1; }
.journey .jn-training { z-index: 2; opacity: clamp(0, calc(1 - (var(--p) - .82) * 14), 1); --tint: .20; }
.journey .jn-class    { z-index: 1; --tint: .12; }
/* The street photo eases in toward its top edge as you scroll — the feeling of
   walking on down the street. Only the zoom is added here; jn-street's opacity
   cross-fade (above) is untouched. */
.journey .jn-street { transform-origin: 50% 0%; transform: scale(calc(1 + .9 * var(--p))); }
/* Per-photo darkening for text legibility. The street, training, and classroom
   photos carry only a light tint so they read bright/natural; the text-heavy
   living-room and square beats keep the full scrim (--tint: 1). It lives inside
   each layer, so it cross-fades with its photo. */
.journey .jn-layer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,28,46,.50) 0%, rgba(10,28,46,.66) 55%, rgba(10,28,46,.82) 100%);
  opacity: var(--tint, 1);
}
.journey .jn-content { position: relative; z-index: 8; margin-top: -100vh; }
.journey .jn-beat {
  min-height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(3rem, 8vh, 7rem) 1.5rem;
}
/* Scroll cues sitting directly under a caption beat match the larger cues in
   the copy blocks (which get bumped by `.home-copy p`). */
.journey .jn-beat > .scroll-cue { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
/* Beat 4 rides high in its beat so the caption is nearly off the top of the
   screen by the time the classroom image has fully arrived. */
.journey .jn-beat--high { justify-content: flex-start; padding-top: clamp(1.5rem, 5vh, 3rem); }
/* Big italic caption beats (the street + training lines). */
.journey .jn-caption {
  font-family: var(--serif); font-style: italic; max-width: 20ch;
  font-size: clamp(1.5rem, 4.2vw, 2.3rem); line-height: 1.3;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
}
/* Reduced motion: no scrub — rest on the classroom under every beat, hide the halo. */
@media (prefers-reduced-motion: reduce) {
  .journey .jn-living, .journey .jn-street, .journey .jn-square,
  .journey .jn-training { opacity: 0; }
}