/* Natural scroll: the pinned film becomes a normal flow of sections.
   Nothing is locked; the story is told by scroll-linked motion inside each section. */
html { scroll-behavior: auto; }
body { background: var(--paper); }

.film { height: auto; }
.film-pin {
  position: relative;
  height: auto;
  overflow: clip; /* scenes bleed past the right edge; clip without creating a scroll container */
  background: transparent;
  perspective: none;
}
.background-reel { display: none; }
.grain { display: none; } /* the old tapestry texture read as a watermark once the page scrolled */

.chapter {
  position: relative;
  inset: auto;
  min-height: 100vh;
  opacity: 1;
  visibility: visible;
}

/* Each section carries its own colour, so copy always sits on the right background.
   Where the tone changes, the top of the section fades in from the previous colour. */
.chapter[data-tone="paper"] { --tone: var(--paper); }
.chapter[data-tone="ink"]   { --tone: var(--ink); }
.chapter[data-prev="paper"] { --prev: var(--paper); }
.chapter[data-prev="ink"]   { --prev: var(--ink); }

@media (min-width: 801px) {
  /* Desktop only: light copy on ink chapters is a desktop rule, mobile stays on paper. */
  .chapter { background: linear-gradient(180deg, var(--prev) 0, var(--tone) 12vh); }
  .chapter-switch {
    background:
      linear-gradient(180deg, var(--prev) 0, transparent 12vh),
      linear-gradient(108deg, var(--ink) 0 46%, var(--paper) 46.1% 100%);
  }
  .chapter-interlude { min-height: 115vh; }
  .film-progress { position: fixed; }
}