/* ============================================================
   scroll-film.css — reusable scroll-scrub canvas scaffold
   Generic structural classes for future Clayfield scroll films
   (clayfield hero, schnitzel layering, parkside, toast melt,
   loyalty card). The Blue Skies prototype keeps its bespoke
   .bsb styling — this file does not touch it.
   Pair with js/scroll-film.js (data-attribute driven).
   ============================================================ */

/* Outer container: supplies the scroll TRAVEL via its height.
   Default to a calm 280vh; sections may override per art direction. */
.scroll-film {
  position: relative;
  height: 280vh;
  background: var(--teal-deep);
}

/* Sticky stage pinned for the duration of the scrub */
.scroll-film__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Poster = instant paint + the mobile / reduced-motion fallback */
.scroll-film__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Canvas fades in only once enough frames are decoded */
.scroll-film__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur, 360ms) var(--ease-out-expo, ease);
}
.scroll-film__canvas[data-ready] { opacity: 1; }

/* Copy / brand overlay sits above the film */
.scroll-film__copy {
  position: relative;
  z-index: 3;
  justify-self: start;
  align-self: center;
  max-width: 32ch;
  margin-left: var(--gutter);
  color: var(--paper);
}

/* Scroll cue — fades out on first scrub (handled in JS) */
.scroll-film__hint {
  position: absolute;
  z-index: 3;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-hand);
  color: var(--paper);
  opacity: 0.9;
  transition: opacity var(--dur, 360ms) ease;
}

/* On mobile the module collapses the outer height to one panel;
   the canvas is irrelevant there, so the poster carries it. */
@media (max-width: 768px) {
  .scroll-film__canvas { display: none; }
  .scroll-film__hint { display: none; }
}

/* Reduced motion: poster only, no canvas, no scroll cue */
@media (prefers-reduced-motion: reduce) {
  .scroll-film__canvas { display: none; }
  .scroll-film__hint { display: none; }
}