/* ============================================================================
   Coffee Festival Europe — KINO III · Schnitt (Stand 10.09.2026, Fassung 5)
   Fassung 5: Der Fortschritt des Abgangs heisst --kn-ab statt --kn-out. Der alte
   Name war zugleich die Bewegungskurve in kino.css: in jedem Abschnitt, dem
   kino3.js den Abgang gab, wurde aus „animation: knLi .6s var(--kn-out) both"
   die Wiederholungszahl 0 — die Animation blieb im Startbild stehen, und
   Antworten, Listen und Aufzaehlungen waren unsichtbar (seit 05.09.).

   Der dritte Teil der filmischen Ausarbeitung, nach kino.css (die Behandlung je
   Abschnittstyp) und kino2.css (Zeilen, Szene, Staub, Vignette). Hier geht es
   um den SCHNITT — wie ein Abschnitt geht, wie der naechste kommt, und wie
   sich Bilder und Kinobahnen unter dem Blick bewegen:

     Schnitt      Der verlassene Abschnitt blendet ab und tritt zurueck, sobald
                  seine Unterkante die Bildmitte passiert (--kn-ab, 0..1 aus
                  kino3.js). Der neue Abschnitt kommt ungeschmaelert.
     Lichtleck    Beim Eintreffen jedes Abschnitts zieht ein weicher, warmer
                  Lichtstreif schraeg ueber ihn hinweg — einmal, wie ein Leck
                  in der Kamera.
     Kamerafahrt  Jedes Bild im Inhalt faehrt, solange es steht, langsam weiter
                  (Ken Burns); gerade und ungerade Bilder in Gegenrichtung.
     Blick        In der Kinobahn folgen Text, Lichtschein und Staub dem Zeiger
                  ein wenig — Tiefe unter der Maus (nur mit feinem Zeiger).
     Wischschnitt Im Klebesatz wechseln die Bilder nicht mehr nur durch
                  Ueberblendung, sondern mit einem Wisch — abwechselnd von rechts
                  und von unten; im Bildfenster zeigt ein Ring den Stand.
     Chronik      Auf grossen Bildschirmen bleibt die Chronik stehen, und das
                  Scrollen faehrt die Jahre waagerecht durch (kino3.js).

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

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

/* ---- 1 · Schnitt ------------------------------------------------------------------ */
html.kn body #main > section.kn-lit > .shell{transform-origin:50% 100%;
  opacity:calc(1 - var(--kn-ab,0) * .62);transform:scale(calc(1 - var(--kn-ab,0) * .035))}
/* Der Klebesatz haelt sein Bild fest — er darf sich nicht verkleinern, solange er klebt */
html.kn body #main > section.stick > .shell{transform:none}

/* ---- 2 · (Lichtleck entfernt, Fassung 2: wirkte billig) ---------------------------- */
html.kn .kn-leak{display:none}

/* ---- 3 · Kamerafahrt ---------------------------------------------------------------- */
/* Die Animation ersetzt den Eintritts-Uebergang aus kinetik.css (scale 1.06 -> 1) und
   fuehrt ihn weiter: von 1.06 ueber 1 hinaus zu einer langsamen Fahrt. Bilder mit
   eigenem Versatz (data-mpar) bleiben aussen vor — dort steuert motion.js. */
html.kn .kx-img.kx-in > img:not([data-mpar]),html.kn .kx-img.kx-in > video:not([data-mpar]),html.kn .kx-img.kx-in > picture > img:not([data-mpar]){
  animation:knBurnsA 18s var(--kn-cam,cubic-bezier(.2,.6,.2,1)) both;transform-origin:50% 50%}
html.kn .kx-img.kx-in:nth-child(even) > img:not([data-mpar]),html.kn .kx-img.kx-in:nth-child(even) > video:not([data-mpar]),
html.kn .kx-img.kx-in:nth-child(even) > picture > img:not([data-mpar]){animation-name:knBurnsB}
@keyframes knBurnsA{0%{transform:scale(1.06) translate3d(0,0,0)}100%{transform:scale(1.13) translate3d(-1.6%,1%,0)}}
@keyframes knBurnsB{0%{transform:scale(1.06) translate3d(0,0,0)}100%{transform:scale(1.13) translate3d(1.6%,-1%,0)}}

/* ---- 4 · Blick (Maus-Parallaxe in der Kinobahn) ------------------------------------- */
@media (hover:hover) and (pointer:fine){
  html.kn body .cine{--mx:0;--my:0}
  html.kn body .cine .cine__inner{transition:transform .9s cubic-bezier(.2,.6,.2,1);
    transform:translate3d(calc(var(--mx) * 9px),calc((.5 - var(--kn-p,.5)) * 36px + var(--my) * 6px),0)}
  html.kn body .cine.kn-pin .cine__inner{transform:translate3d(calc(var(--mx) * 9px),calc(var(--kn-s,0) * -34px + var(--my) * 6px),0)}
  html.kn body .cine .kn-flare{margin-left:calc(var(--mx) * -48px);margin-top:calc(var(--my) * -32px);transition:margin 1.2s cubic-bezier(.2,.6,.2,1),opacity 2.4s 1.2s}
  html.kn body .cine .kn-dust{transform:translate3d(calc(var(--mx) * -7px),calc(var(--my) * -5px),0);transition:transform 1.1s cubic-bezier(.2,.6,.2,1),opacity 1.6s ease .6s}
  html.kn body .cine .kn-gate{transform:translate3d(calc(var(--mx) * 4px),calc(var(--my) * 3px),0);transition:transform 1s cubic-bezier(.2,.6,.2,1)}
}

/* ---- 5 · Wischschnitt im Klebesatz -------------------------------------------------- */
html.kn body .stick__media figure{clip-path:inset(0 0 0 100%);
  transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,.72,.2,1),clip-path 1s cubic-bezier(.76,0,.24,1)}
html.kn body .stick__media figure:nth-child(even){clip-path:inset(100% 0 0 0)}
html.kn body .stick__media figure.is-on{clip-path:inset(0 0 0 0)}
/* der Ring neben dem Zaehler: pathLength 1, Offset = 1 - Anteil */
html.kn .kn-ring{width:18px;height:18px;flex:none;transform:rotate(-90deg)}
html.kn .kn-ring circle{fill:none;stroke-width:1.6;stroke-linecap:round}
html.kn .kn-ring circle:first-child{stroke:rgba(244,238,228,.22)}
html.kn .kn-ring circle:last-child{stroke:var(--ember);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--kn-r,0));transition:stroke-dashoffset .9s var(--kn-out-e,cubic-bezier(.16,1,.3,1))}
html.kn body .stick__media .kn-gate b{gap:10px}
html.kn body .stick__media .kn-gate b::before{display:none}

/* ---- 6 · Chronik (Pin) ---------------------------------------------------------------- */
html.kn body .hist.kn-pin .hist__track{overflow-x:hidden;scroll-snap-type:none;scrollbar-width:none}
html.kn body .hist.kn-pin .hist__track{overflow:visible}  /* Fassung 4: die Zeile faehrt per transform, der Abschnitt selbst schneidet ab */
html.kn .kn-histrow{display:flex;gap:inherit;will-change:transform}
html.kn body .hist.kn-pin .hist__track::-webkit-scrollbar{display:none}
html.kn .kn-histbar{position:relative;display:block;height:1px;margin-top:6px;background:rgba(244,238,228,.12)}
html.kn .kn-histbar i{position:absolute;left:0;top:0;height:100%;width:calc(var(--kn-x,0) * 100%);
  background:linear-gradient(90deg,rgba(226,85,30,.3),var(--ember))}
html.kn .kn-histbar i::after{content:'';position:absolute;right:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--ember);
  transform:translate(50%,-50%);box-shadow:0 0 10px rgba(226,85,30,.6)}

@media (max-width:760px){
  html.kn body #main > section.kn-lit > .shell{opacity:calc(1 - var(--kn-ab,0) * .5);transform:scale(calc(1 - var(--kn-ab,0) * .02))}
}

/* ---- Fassung 3: Grafikbudget auf dem Telefon (siehe kino.css, Abschnitt 19) --------- */
@media (max-width:860px){
  html.kn body #main > section.kn-lit > .shell{opacity:1;transform:none}
  html.kn .kx-img.kx-in > img:not([data-mpar]),html.kn .kx-img.kx-in > video:not([data-mpar]),html.kn .kx-img.kx-in > picture > img:not([data-mpar]),
  html.kn .kx-img.kx-in:nth-child(even) > img:not([data-mpar]),html.kn .kx-img.kx-in:nth-child(even) > video:not([data-mpar]),
  html.kn .kx-img.kx-in:nth-child(even) > picture > img:not([data-mpar]){animation:none}
  html.kn body .stick__media figure{clip-path:inset(0 0 0 100%)}
  html.kn body .stick__media figure:nth-child(even){clip-path:inset(0 100% 0 0)}
  html.kn body .stick__media figure.is-on{clip-path:inset(0 0 0 0)}
}

} /* Ende no-preference */

@media (prefers-reduced-motion:reduce){
  .kn-leak,.kn-ring,.kn-histbar{display:none!important}
  html.kn body .stick__media figure{clip-path:none!important}
}