/* ============================================================
   Scroll cinema — fixed video-frame canvas behind the whole page,
   scrubbed by scroll position. Frosted scrim keeps every section's
   text legible without hiding the footage; sections stay exactly
   as designed, just with an opaque-background swap to transparent
   so the room shows through the gaps between cards.
   ============================================================ */

html.cine-on, html.cine-on body {
  background: transparent;
}

#cineCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background: var(--parchment);
  opacity: 0;
  transition: opacity 900ms var(--ease-out, ease);
}
body.cine-ready #cineCanvas { opacity: 1; }

/* frosted scrim: unifies contrast for text sitting directly on the
   backdrop (hero copy, section eyebrows/titles) at every scroll
   position, and softens the footage into the site's warm palette */
#cineScrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(43,38,32,.40) 0, rgba(43,38,32,.06) 130px, rgba(250,247,240,.46) 130px, rgba(250,247,240,.58) 100%),
    linear-gradient(0deg, rgba(43,38,32,.30), rgba(43,38,32,0) 220px);
}

/* slim top progress bar while frames stream in */
#cineProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--brass), var(--terracotta));
  z-index: 200; transition: width 220ms var(--ease-out, ease), opacity 400ms ease;
  pointer-events: none;
}

/* everything else in the document sits above canvas + scrim */
.page-content { position: relative; z-index: 2; }

@media (min-width: 640px) {
  #cineCanvas { max-width: none; margin: 0; left: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #cineCanvas { transition: none; }
}