/* Light story: the scroll-driven hero on the home page (three.js scene in assets/js/light-story.js) */
.scene { position: relative; height: 2400vh; }
/* until the scene draws its first frame, the backdrop is the palette's dark, never black */
.scene__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #111437; }   /* as tall as the screen with the browser's bars drawn in, so no strip of page shows under it as they slide away */
.scene__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__fade { position: absolute; inset: 0; background: var(--background); opacity: 0; pointer-events: none; }
.scene .hero { position: absolute; inset: 0; background: none; pointer-events: none; align-items: flex-end; }
.scene .hero__copy { padding-bottom: calc(3.5rem + 100lvh - 100svh); }   /* the title clear of the bars while they show */
.scene .hero__title { font-size: clamp(3.2rem, 6.67vw, 96px); line-height: 1.05; font-weight: 500; letter-spacing: -.01em; }
.stage-copy { position: absolute; top: 50%; width: min(40rem, 46vw); color: #f4f1ec; pointer-events: none; visibility: hidden; transform: translateY(-50%); }
.stage-copy--left { left: 3rem; }
.stage-copy--right { right: 3rem; width: fit-content; max-width: min(40rem, 46vw); }
.stage-copy--bottom { top: auto; bottom: 4rem; transform: none; }
.stage-copy--center { left: 50%; width: min(64rem, 92vw); text-align: center; transform: translate(-50%, -50%); }
/* headings light up letter by letter, paragraphs come into focus word by word */
.ls-w { display: inline-block; white-space: nowrap; }
.ls-c { display: inline-block; will-change: transform, opacity, filter; }
p .ls-w { will-change: transform, opacity, filter; }
.stage-copy h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.4rem, 6.67vw, 96px); line-height: 1.05; letter-spacing: -.01em; }
.stage-copy p { text-shadow: 0 1px 14px rgba(12, 6, 26, .85), 0 0 2px rgba(12, 6, 26, .6); margin-top: 1.4rem; max-width: 26rem; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.5; color: rgba(244, 241, 236, .78); }
.stage-copy--center p { margin-inline: auto; max-width: 30rem; }
/* a phone: every stage's words on the same full-width column at the top of the screen, the closing one centred */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .scene { height: calc(2400vh * .964 + 3.6vh); }   /* the run after the closing words cut short (light-story.js TAIL_R) */
  .stage-copy, .stage-copy--right, .stage-copy--bottom, .stage-copy--center { top: 6.5rem; bottom: auto; left: 16px; right: 16px; width: auto; max-width: none; text-align: left; transform: none; }
  .stage-copy--center { top: 50%; text-align: center; transform: translateY(-50%); }   /* the closing words in the middle of the screen, as on a computer */
  .stage-copy h2, .scene .hero__title { font-size: clamp(1.9rem, 9.2vw, 2.4rem); }   /* the opening line the same size as the stages after it, as on a computer; a little smaller on the narrowest phones */
  .stage-copy p { max-width: 26rem; }
}
  
/* blocks hug their words */
.scene .hero__title, .stage-copy h2, .stage-copy p { width: fit-content; }
.stage-copy--center h2, .stage-copy--center p { margin-inline: auto; }
/* a tablet held upright: the phone's frame, the words a size up and kept to a reading width */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .stage-copy, .stage-copy--right, .stage-copy--bottom { top: 8rem; left: var(--gutter); right: auto; max-width: 40rem; }
  .stage-copy--center { top: 50%; left: 50%; right: auto; width: min(40rem, 86vw); transform: translate(-50%, -50%); }
  .stage-copy h2, .scene .hero__title { font-size: clamp(2.8rem, 6.4vw, 4rem); }
  .stage-copy p { max-width: 30rem; font-size: 17px; }
}