/* ==========================================================================
   spoti.ch — Komponente "Scroll-Film" (Landingpage, `.film*`)
   Der Scroll steuert die Abspielzeit eines Videos, darueber liegen die
   Kapiteltexte. Farben, Schrift und Bewegung kommen aus style.css.
   Regeln: DESIGN.md.
   ========================================================================== */

.film{
  position:relative;
  background:var(--tief);
  color:var(--creme);
}

/* Buehne bleibt stehen, waehrend die Kapitel darueber wandern */
.film__buehne{
  position:sticky;
  top:0;
  height:100dvh;
  overflow:hidden;
  background:var(--tief);
}

.film__video,
.film__standbild{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Standbild liegt unter dem Video und traegt, bis das Video bereit ist */
.film__standbild{z-index:0}
.film__video{z-index:1}

/* Einfarbig schwarzes Foto-Overlay (DESIGN.md: einzige erlaubte Verlaufsart) */
.film__schleier{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to bottom,rgba(2,2,2,.55) 0,rgba(2,2,2,.10) 30%,rgba(2,2,2,.18) 72%,rgba(2,2,2,.85) 100%),
    linear-gradient(96deg,rgba(2,2,2,.74) 0,rgba(2,2,2,.34) 38%,rgba(2,2,2,0) 72%);
}

/* Fortschritt: eine Haarlinie, kein Balken */
.film__fortschritt{
  position:absolute;left:0;bottom:0;z-index:3;
  height:2px;width:100%;
  background:rgba(247,243,236,.14);
}
.film__fortschritt span{
  display:block;height:100%;width:100%;
  background:var(--koralle);
  transform:scaleX(0);
  transform-origin:left center;
}

/* Kapitel laufen ueber die stehende Buehne */
.film__kapitel-liste{
  position:relative;z-index:4;
  margin-top:-100dvh;
}

/* Etwas hoeher als der Viewport: So liegt zwischen zwei Textbloecken echte
   Leere und es stehen nie zwei Kapitel gleichzeitig mitten im Bild. */
.film__kapitel{
  min-height:125dvh;
  display:flex;
  align-items:center;
  /* Abstand zum klebenden Kopfbalken, damit nie Text darunter rutscht */
  padding:120px 0;
}

.film__kapitel-inhalt{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
  width:100%;
}

/* Der Textblock bleibt bewusst schmal und niedrig: Er darf nur einen Teil
   der Buehne belegen, sonst stehen beim Uebergang zwei Kapitel gleichzeitig
   im Bild und die Seite wirkt vermischt. */
.film__kapitel-text{max-width:30ch}

.film__kapitel h2,
.film__kapitel h1{
  color:#fdfbf7;
  font-size:clamp(1.875rem,4vw,3rem);
  line-height:1.05;
  max-width:16ch;
}

.film__kapitel p{
  margin-top:20px;
  font-size:1rem;
  color:rgba(247,243,236,.84);
  max-width:38ch;
}

/* Belege als Mono-Zeile, keine Pillen auf dem Foto (DESIGN.md) */
.film__belege{
  margin:24px 0 0;padding:0;
  list-style:none;
  display:flex;flex-wrap:wrap;gap:8px 20px;
  font-family:var(--mono);
  font-size:var(--t-meta);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--koralle-hell);
}

.film__abbinder{
  margin-top:32px;
  display:flex;flex-wrap:wrap;gap:16px;
}

/* Kapitelnummer als stille Randnotiz */
.film__nr{
  display:block;
  font-family:var(--mono);
  font-size:var(--t-meta);
  letter-spacing:.22em;
  color:rgba(247,243,236,.45);
  margin-bottom:16px;
}

/* ------------------------------------------------------------- Responsiv */

/* Hochformat: Ein 16:9-Film in einer bildschirmhohen Buehne wuerde per
   `cover` links und rechts fast dreiviertel wegschneiden. Deshalb hier eine
   flache Buehne, `contain` statt `cover` (der Film hat selbst schwarzen
   Grund, die Raender fallen also nicht auf) und der Text steht UNTER dem
   Bild statt darauf. Breakpoint identisch zu film.js. */
@media(max-width:860px){
  /* Buehne liegt jetzt OBEN: Der Text soll dahinter verschwinden, nicht
     darueber laufen. Im Querformat ist es umgekehrt. */
  .film__buehne{height:46dvh;z-index:5}

  .film__video,
  .film__standbild{object-fit:contain}

  /* Kein Ueberlagern mehr: Kapitel laufen unter der klebenden Buehne durch */
  .film__kapitel-liste{margin-top:0;z-index:0}

  .film__kapitel{
    min-height:56dvh;
    padding:32px 0;
  }

  /* Der Text liegt jetzt auf schwarzem Grund, der Schleier darf zurueck */
  .film__schleier{
    background:linear-gradient(to bottom,
      rgba(2,2,2,.30) 0,rgba(2,2,2,0) 40%,rgba(2,2,2,.55) 100%);
  }

  .film__kapitel h2,
  .film__kapitel h1{font-size:clamp(1.75rem,7vw,2.375rem);max-width:none}
  .film__kapitel-text{max-width:none}
  .film__kapitel p{max-width:none}
  .film__belege{gap:8px 16px}
}

/* --------------------------------------------------- Reduzierte Bewegung */
/* Kein Scrubbing: das Standbild traegt, die Kapitel bleiben normale
   Abschnitte. Der Inhalt ist vollstaendig lesbar. */
@media(prefers-reduced-motion:reduce){
  .film__buehne{position:relative;height:60dvh}
  .film__kapitel-liste{margin-top:0}
  .film__kapitel{min-height:auto;padding:64px 0}
  .film__video{display:none}
  .film__fortschritt{display:none}
}