/* The journey: one tall scroll section with a sticky full-viewport film canvas */
#journey{height:1000vh}
#journey .sticky{position:sticky;top:0;height:100vh;overflow:hidden}
#film{position:absolute;inset:0;width:100%;height:100%;max-width:none}

/* Chapters overlay the canvas; visibility driven by scroll progress (js/chapters.js) */
.chapter{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
}
.chapter .content{
  padding:9vh 6vw;
  background:radial-gradient(ellipse 70% 60% at center, rgba(5,5,8,.72), rgba(5,5,8,.38) 55%, transparent 78%);
}
.chapter h1,.chapter h2,.chapter .lede,.chapter .eyebrow{text-shadow:0 1px 22px rgba(0,0,0,.65)}
.chapter h1{font-size:var(--step-hero);color:var(--omega-white)}
.chapter h2{font-size:var(--step-h2);color:var(--omega-white)}
.chapter .lede{max-width:34em;margin:1.2em auto 0;color:var(--omega-steel);font-size:var(--step-body);line-height:1.7}

.chevron{
  display:block;width:14px;height:14px;margin:7vh auto 0;
  border-right:1px solid var(--craft-rose);border-bottom:1px solid var(--craft-rose);
  transform:rotate(45deg);animation:chev 2.4s var(--ease-out-quint) infinite;
}
@keyframes chev{0%,100%{transform:translateY(0) rotate(45deg);opacity:.9}50%{transform:translateY(8px) rotate(45deg);opacity:.35}}

.chapter-close .wordmark{font-size:var(--step-hero);letter-spacing:.18em;color:var(--omega-white)}
.chapter-close{pointer-events:none}
.chapter-close .cta{
  pointer-events:auto;display:inline-block;margin-top:2.2em;padding:.9em 2.4em;
  border:1px solid var(--craft-rose);color:var(--craft-rose-soft);text-decoration:none;
  text-transform:uppercase;letter-spacing:.22em;font-size:var(--step-label);
  transition:background .4s var(--ease-out-quint),color .4s var(--ease-out-quint);
}
.chapter-close .cta:hover{background:var(--craft-rose);color:var(--omega-black)}
.credit{margin-top:6vh;color:var(--omega-muted);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}

/* Frame preload progress: thin hairline at viewport bottom */
.loader{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;background:rgba(255,255,255,.06)}
.loader-bar{display:block;width:0;height:100%;background:var(--craft-glow);transition:width .3s linear}
.loader.done{opacity:0;transition:opacity .8s var(--ease-out-quint)}

/* Reduced-motion fallback: plain stacked keyframe sections (built by main.js) */
.rm-fallback .rm-block{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12vh 6vw;text-align:center}
.rm-fallback img{width:min(900px,100%);height:auto;margin-bottom:4vh}