/* =============================================================================
   FILM-MOTOR — die Schicht, die aus Abschnitten Szenen macht.

   Haltung: ein Film hat einen Takt. Etwas tritt ein, etwas anderes wartet,
   dann wechselt das Bild. Nichts erscheint gleichzeitig, nichts springt.
   Deshalb gibt es hier KEINE eigenen Kurven und KEINE eigenen Dauern — alles
   kommt aus zz-motion.css. Neu ist nur der Begriff der Szene: ein Abschnitt,
   der einen eigenen Fortschritt 0..1 kennt (--p) und beim Verlassen zurueck-
   gesetzt wird, damit er sich beim naechsten Mal wieder aufbaut statt fertig
   dazustehen.

   Vokabular
     data-film="szene"      Abschnitt bekommt --p 0..1 waehrend er durchlaeuft
     data-film-pin          innere Buehne bleibt stehen, waehrend --p laeuft
     data-takt              Kinder treten nacheinander ein (--i je Kind)
     data-film-words        Ueberschrift Wort fuer Wort
     data-film-cross        Bildstapel, der ueberblendet statt schneidet
     data-film-scrub        Eigenschaft folgt --p statt einer Dauer
   ============================================================================= */

:root{
  --takt:120ms;        /* Abstand zwischen zwei Auftritten in einer Szene */
  --takt-lang:190ms;   /* Abstand bei grossen Flaechen */
  --film-weg:22px;     /* Weg, den ein eintretendes Element zuruecklegt */
}

/* ------------------------------------------------------------------ SZENE
   Der Fortschritt --p steht als Zahl 0..1 auf dem Abschnitt. Alles, was
   scroll-getaktet laufen soll, rechnet damit — nie mit eigenen Pixelwerten. */
[data-film]{--p:0}

/* Buehne bleibt stehen, der Text laeuft daran vorbei. Hoehe des Abschnitts
   bestimmt, wie lange die Szene dauert (data-film-len in Sichtfeldhoehen). */
[data-film-pin]{position:sticky;top:var(--film-top,0px);height:100svh;overflow:hidden}
@media(max-width:900px){
  /* Auf dem Telefon ist Stehenbleiben Stress, nicht Kino: die Szene laeuft
     einfach mit. Der Fortschritt bleibt derselbe, nur ohne Haftung. */
  [data-film-pin]{position:relative;height:auto;min-height:76svh}
}

/* ------------------------------------------------------------------- TAKT
   Kinder treten nacheinander ein. Der Index kommt aus dem Motor (--i), damit
   auch der zwoelfte Auftritt noch stimmt — nth-child hoerte bei acht auf. */
[data-takt]>*{opacity:0;transform:translateY(var(--film-weg));
  transition:opacity var(--t-l) var(--e),transform var(--t-l) var(--e);
  transition-delay:calc(var(--i,0) * var(--takt))}
[data-takt].takt-on>*{opacity:1;transform:none}
[data-takt="lang"]>*{transition-delay:calc(var(--i,0) * var(--takt-lang))}
/* Ein Takt, der von der Seite kommt statt von unten */
[data-takt="quer"]>*{transform:translateX(calc(var(--film-weg) * -1))}
[data-takt="quer"].takt-on>*{transform:none}

/* --------------------------------------------------------- WORT-AUFTRITT
   Jedes Wort haengt in einem eigenen Vorhang. Kein Buchstaben-Effekt — der
   liest sich als Spielerei und kostet die Ruhe, die die Marke traegt. */
.wm{display:inline-block;overflow:hidden;vertical-align:top}
.wm>i{display:inline-block;font-style:inherit;transform:translateY(110%);
  transition:transform var(--t-l) var(--e);
  transition-delay:calc(var(--i,0) * var(--takt))}
.words-on .wm>i{transform:none}

/* -------------------------------------------------------------- UEBERBLENDUNG
   Zwei Bilder liegen uebereinander, das obere wird durchsichtig. Ein Schnitt
   waere haerter und billiger; die Blende ist das, was teuer aussieht. */
.cross{position:relative;overflow:hidden;background:var(--stage)}
.cross>.f{position:absolute;inset:0;opacity:0;
  transition:opacity var(--t-in) var(--e),transform var(--t-in) var(--e);
  transform:scale(1.045)}
.cross>.f.on{opacity:1;transform:scale(1)}
.cross>.f .im{width:100%;height:100%;display:block}
/* Der Zaehler unter der Blende: welcher Takt gerade laeuft */
.cross-dots{display:flex;gap:.4rem;margin-top:.7rem}
.cross-dots i{display:block;width:16px;height:1.5px;background:var(--line);
  transition:background var(--t-s) var(--e)}
.cross-dots i.on{background:var(--ink)}

/* ------------------------------------------------------------------ SCRUB
   Eigenschaften, die direkt an --p haengen. Bewusst wenige: Bildweg, Massstab,
   Freilegung, waagerechter Lauf. Mehr wuerde flackern. */
[data-film-scrub="zoom"] .im{transform:scale(calc(1.08 - .08 * var(--p)))}
[data-film-scrub="weg"]{transform:translate3d(0,calc((1 - var(--p)) * 26px),0)}
[data-film-scrub="quer"]{transform:translate3d(calc(var(--p) * var(--quer,-40%)),0,0)}
[data-film-scrub="frei"]{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}

/* ------------------------------------------------------- SZENE: TITELTAFEL
   Der Auftakt eines Films: Vollbild, ein Wort nach dem anderen, dann Ruhe. */
.f-title{position:relative;min-height:92svh;display:grid;place-items:center;
  background:var(--stage);overflow:hidden;isolation:isolate}
.f-title .bg{position:absolute;inset:0;z-index:0}
.f-title .bg .im{width:100%;height:100%}
/* Der Schleier traegt den Text, nicht das Motiv. Er ist deshalb so gebaut,
   dass er auch auf einem vollstaendig weissen Bild noch traegt. */
.f-title::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 76% at 50% 52%,rgba(0,0,0,.72) 0%,rgba(0,0,0,.58) 52%,rgba(0,0,0,.34) 100%)}
.f-title .cnt{position:relative;z-index:2;text-align:center;padding:0 var(--pad-x);max-width:1100px}
.f-title .kick{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#EDE7DC;
  opacity:0;transform:translateY(10px);transition:opacity var(--t-m) var(--e),transform var(--t-m) var(--e)}
.f-title.film-on .kick{opacity:1;transform:none}
.f-title h2{color:#fff;margin:.9rem 0 0}
.f-title .sub{color:#EDE7DC;font-size:14.5px;margin-top:1rem;max-width:52ch;
  margin-left:auto;margin-right:auto;opacity:0;
  transition:opacity var(--t-l) var(--e);transition-delay:520ms}
.f-title.film-on .sub{opacity:1}

/* ------------------------------------------------------ SZENE: STEHENDE BUEHNE
   Bild steht, Kapitel laufen daran vorbei. Das ist der Takt, den die grossen
   Haeuser fuer Herkunftsgeschichten benutzen. */
.f-stage{position:relative}
.f-stage .buehne{display:grid;grid-template-columns:1.15fr .85fr;height:100%;align-items:stretch}
.f-stage .media{position:relative;overflow:hidden;background:var(--stage)}
.f-stage .media .cross{position:absolute;inset:0}
.f-stage .side{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.4rem,4vw,3.4rem);background:var(--paper)}
.f-stage .kap{position:relative}
.f-stage .kap>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity var(--t-m) var(--e),transform var(--t-m) var(--e)}
.f-stage .kap>div.on{opacity:1;transform:none;pointer-events:auto}
.f-stage .kap{min-height:min(52svh,420px)}
.f-stage .no{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.f-stage h3{font-family:var(--mark);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,3rem);line-height:.98;margin:.6rem 0 .8rem}
.f-stage p{font-size:14.5px;color:var(--ink2);max-width:44ch}
@media(max-width:900px){
  .f-stage .buehne{grid-template-columns:1fr;grid-template-rows:auto auto}
  .f-stage .media{height:52svh}
  .f-stage .kap{min-height:auto;position:static}
  .f-stage .kap>div{position:static;opacity:1;transform:none;padding-bottom:1.4rem}
  .f-stage .kap>div+div{border-top:.5px solid var(--line);padding-top:1.4rem}
}

/* --------------------------------------------------------- SZENE: SCHNITT
   Harte Folge gleich grosser Vollbilder — der Rhythmus, nicht das Motiv,
   traegt hier. Jedes Bild bekommt exakt denselben Platz. */
.f-cut{position:relative;background:var(--stage)}
.f-cut .frame{position:relative;height:100svh;overflow:hidden}
.f-cut .frame .im{width:100%;height:100%}
.f-cut .lb{position:absolute;left:var(--pad-x);bottom:clamp(1.4rem,4vh,2.6rem);z-index:2;color:#fff;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.f-cut .frame::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.22) 34%,rgba(0,0,0,0) 62%)}
@media(max-width:900px){.f-cut .frame{height:64svh}}

/* ------------------------------------------------------- SZENE: ABSPANN
   Rollen laufen von unten durch. Reine Typografie, kein Bild — das ist der
   Ruhepunkt nach einer Bildstrecke. */
.f-credits{background:var(--stage);color:#F3EEE4;padding:clamp(3rem,10vh,7rem) 0}
.f-credits .rows{display:grid;gap:.9rem;max-width:720px;margin:0 auto;padding:0 var(--pad-x)}
.f-credits .r{display:grid;grid-template-columns:1fr 1.4fr;gap:1.4rem;
  border-bottom:.5px solid rgba(243,238,228,.16);padding-bottom:.9rem}
.f-credits .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#B9B1A2}
.f-credits .v{font-size:15px}
@media(max-width:640px){.f-credits .r{grid-template-columns:1fr;gap:.3rem}}

/* --------------------------------------------------- WIEDERAUFBAU-MARKIERUNG
   Wenn eine Szene das Sichtfeld ganz verlassen hat, nimmt der Motor die
   Klassen wieder ab. Diese Regel sorgt dafuer, dass der Ruecklauf kurz ist —
   niemand soll beim Zurueckscrollen einer langen Blende zusehen muessen. */
.film-reset [data-takt]>*,.film-reset .wm>i,.film-reset .cross>.f{transition-duration:var(--t-out)}

/* -------------------------------------------------------- RUHIGE HALTUNG
   Wer Bewegung abgestellt hat, sieht den fertigen Zustand. Der Film ist die
   Zugabe, nie die Bedingung dafuer, dass man die Seite lesen kann. */
@media(prefers-reduced-motion:reduce){
  [data-takt]>*,.wm>i,.cross>.f,.f-title .kick,.f-title .sub,.f-stage .kap>div{
    opacity:1!important;transform:none!important;transition:none!important}
  .cross>.f{position:relative;inset:auto}
  .cross>.f+.f{display:none}
  [data-film-scrub]{transform:none!important;clip-path:none!important}
  [data-film-pin]{position:relative;height:auto}
}