/* scrollfilm.css — de speler van het dikke pakket (Omni Studio, 15-10-2026).
   Een hoge sectie; daarin plakt het beeld aan de bovenkant van het scherm terwijl je erdoorheen scrolt.
   Kleuren via variabelen, zodat het blok de huisstijl van de klant aanneemt. */
.scrollfilm {
  --sf-accent: #e2572b;
  --sf-tekst: #fff;
  --sf-lengte: 500;            /* hoe ver je scrolt voor de hele film, in schermhoogtes x 100 */
  position: relative;
  height: calc(var(--sf-lengte) * 1vh);
  background: #0d0e10;
}
.scrollfilm__plak {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.scrollfilm__doek,
.scrollfilm__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* De posters liggen bóven het doek (z-index 1): het scherpe beginbeeld blijft staan tot de film echt loopt, het
   scherpe eindbeeld verschijnt zodra het laatste frame bereikt is. Daartussen tekent het doek de frames. */
.scrollfilm__poster { object-fit: cover; object-position: var(--sf-brandpunt, 50% 50%); z-index: 1; }
.scrollfilm.is-film .scrollfilm__poster { visibility: hidden; }
.scrollfilm__poster--eind { visibility: hidden; }
.scrollfilm.is-laatste .scrollfilm__poster--eind { visibility: visible; }

/* Met scènes: per scène een scherp stilbeeld (door de speler aangemaakt), zichtbaar zolang de film stilhoudt. De
   poster uit de HTML verdwijnt zodra het eerste stilbeeld er is (het is hetzelfde beeld). */
.scrollfilm__stills { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scrollfilm__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.scrollfilm__still.is-zichtbaar { visibility: visible; }
.scrollfilm.heeft-scenes.is-klaar .scrollfilm__poster { visibility: hidden; }

/* data-staand-passend: een liggende film op een staand scherm past in de breedte (maal --sf-passend) in plaats van
   uitgesneden te worden; stilbeelden en poster doen hetzelfde als het doek. Zet --sf-passend ook op de sectie. */
@media (max-aspect-ratio: 4/5) {
  .scrollfilm[data-staand-passend] .scrollfilm__still,
  .scrollfilm[data-staand-passend] .scrollfilm__poster { object-fit: contain; object-position: 50% 50% !important; transform: scale(var(--sf-passend, 1)); }
}

/* Een zachte schaduw onderaan, zodat de tekst altijd leesbaar is. */
.scrollfilm__plak::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .35) 45%, transparent);
  pointer-events: none;
}

.scrollfilm__stappen {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 4vw, 56px);
  right: clamp(16px, 4vw, 56px);
  bottom: clamp(64px, 11vh, 120px);
  color: var(--sf-tekst);
  max-width: 34rem;
}
.scrollfilm__stap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.scrollfilm__stap.is-actief { opacity: 1; transform: none; }
.scrollfilm__nr {
  display: block;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sf-accent);
  margin-bottom: .4rem;
  font-weight: 700;
}
.scrollfilm__stap h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.9rem, 5.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.scrollfilm__stap p { margin: 0; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.5; max-width: 30rem; }

/* Voortgangsbalk met de stappen eronder. */
.scrollfilm__balk {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 4vw, 56px);
  right: clamp(16px, 4vw, 56px);
  bottom: clamp(20px, 4vh, 40px);
  display: flex;
  gap: 6px;
}
.scrollfilm__deel { flex: 1; color: rgba(255, 255, 255, .6); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.scrollfilm__deel i {
  display: block;
  height: 3px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, .25);
  border-radius: 2px;
  overflow: hidden;
}
.scrollfilm__deel i::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--vol, 0) * 100%);
  background: var(--sf-accent);
}
.scrollfilm__deel.is-actief { color: #fff; }
@media (max-width: 600px) { .scrollfilm__deel span { display: none; } }