/* reel — minimal structural CSS. Bring your own colors/typography. */

.reel-track {
  position: relative;
  width: 100%;
}

/* The pinned stage holds the film in view while the track scrolls past it. */
.reel-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.reel-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Content scrolls over the pinned film. */
.reel-content {
  position: relative;
  z-index: 1;
  /* Pull content up over the sticky stage so both share the scroll range. */
  margin-top: -100vh;
}

@media (prefers-reduced-motion: reduce) {
  /* Respect users who don't want scroll-driven motion: show the stage still. */
  .reel-stage { position: relative; }
  .reel-content { margin-top: 0; }
}