/* ============================================================================
   Coffee Festival Europe — KINO II · Szenen (Stand 08.09.2026, Fassung 2)

   Der zweite Teil der filmischen Ausarbeitung. Waehrend kino.css jedem
   Abschnittstyp seine Behandlung gibt, kommen hier die vier groesseren
   Bausteine, die eine Seite wie einen Schnitt wirken lassen:

     Zeilen   Fliesstexte (Einleitungen, Kinobahn-Saetze, Klebesatz-Absaetze,
              Fliesstext-Absaetze) kommen Zeile fuer Zeile aus ihrer Maske,
              so wie Titel schon Wort fuer Wort kommen. Die Zeilen ermittelt
              kino2.js am gerenderten Text und setzt sie bei jeder Breite neu.
     Szene    Auf grossen Bildschirmen bleibt die Kinobahn stehen, waehrend
              man durch sie scrollt (ScrollTrigger-Pin): der Balken wird
              breiter, der Text zieht sich zusammen und wandert, der Filmlauf
              zeigt den Stand der Szene. Auf dem Telefon laeuft sie durch.
     Staub    Feiner Staub treibt im Licht der Kinobahnen und Signaturbaender
              (Canvas, nur solange die Bahn im Bild ist).
     Vignette (entfernt in Fassung 2)

   Alles haengt an html.kn (kino.js) und steht ohne Skript sofort da.
   ========================================================================== */

@media (prefers-reduced-motion:no-preference){

/* ---- 1 · Zeilen ------------------------------------------------------------------ */
/* Die Maske hat unten Luft fuer Unterlaengen; der negative Rand haelt die
   Zeilenhoehe, damit der Absatz so hoch bleibt wie vor dem Zerlegen. */
html.kn .kl-l{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
html.kn .kl-i{display:block;opacity:0;transform:translate3d(0,108%,0);
  transition:transform .95s var(--kn-out,cubic-bezier(.16,1,.3,1)),opacity .55s ease;
  transition-delay:calc(var(--i,0) * 75ms + var(--kl-b,0ms))}
html.kn .kl-in .kl-i,html.kn .kl-done .kl-i{opacity:1;transform:none}
html.kn .kl-done .kl-i{transition:none}
/* In Kinobahnen kommt der Satz spaeter als der Titel, in Koepfen nach dem Titel */
html.kn .cine__b{--kl-b:1050ms}
html.kn .psec__head .psec__lede{--kl-b:260ms}
html.kn .stick__b{--kl-b:120ms}
/* Der Absatz selbst darf nicht mehr zusaetzlich von unten kommen (kino.css) */
html.kn body .cine__b.kl-in,html.kn body .cine__b.kl-done{opacity:1;transform:none}
@media (max-width:760px){
  html.kn .kl-i{transition-delay:calc(var(--i,0) * 55ms + var(--kl-b,0ms))}
}

/* ---- 2 · Szene: die gepinnte Kinobahn ----------------------------------------------- */
/* --kn-s (0..1) setzt kino2.js aus dem Stand des Pins. Bewegt wird nur, was keinen
   laufenden Uebergang hat: Balkenhoehe, Textlage, Laufweite, Filmlauf. */
html.kn body .cine.kn-pin::before,html.kn body .cine.kn-pin::after{height:calc(var(--kn-bar) + var(--kn-s,0) * 4.2vh)}
html.kn body .cine.kn-pin .cine__inner{transform:translate3d(0,calc(var(--kn-s,0) * -34px),0)}
html.kn body .cine.kn-pin .cine__h{letter-spacing:calc(-.02em - var(--kn-s,0) * .014em)}
html.kn body .cine.kn-pin .kn-film i{width:calc(var(--kn-s,0) * 100%)}
html.kn body .cine.kn-pin .kn-flare{animation-play-state:running}
/* der Schleier wird zum Ende der Szene dichter — der Schnitt zum naechsten Abschnitt */
html.kn body .cine.kn-pin .kn-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--ink);
  opacity:calc(max(0, var(--kn-s,0) - .72) * 2.2)}
/* der Pin-Abstandhalter von ScrollTrigger darf die Trennlinie nicht verdecken */
html.kn body .pin-spacer{z-index:auto}

/* ---- 3 · Staub -------------------------------------------------------------------- */
html.kn .kn-dust{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;
  mix-blend-mode:screen;opacity:0;transition:opacity 1.6s ease .6s}
html.kn body .kn-in > .kn-dust{opacity:1}
html.kn body .sig .kn-dust{z-index:2}

/* ---- 4 · (Vignette entfernt, Fassung 2 — kein Farbverlauf mehr zwischen Abschnitten) ---- */

} /* Ende no-preference */

@media (prefers-reduced-motion:reduce){
  .kn-dust,.kn-shade{display:none!important}
  .kl-i{opacity:1!important;transform:none!important}
}