/* Floating Liberty – Film-Player · Kino-Look (Fassung 1.3, 07.10.2026 nach der Kundenpruefung). Gehoert zu js/fl_kino.js.
   Alles dezent und einzeln schaltbar: fl_kino.js setzt Klassen auf #film (kino-korn-an, kino-vignette, kino-balken-an,
   kino-balken-start, kino-aufblende, kino-fokus, kino-ende-an, kino-titel, kino-atmen) und Werte (--kino-*).
   Ebenen (alle z-index 2 in #film, ueber dem Video, unter Linien/Einblendungen/Karten/Leiste):
     #kino-ende (Abblende am Filmende) -> #vignette/#dimmer/#schleier (vorhanden) -> #kino-korn -> Kino-Balken.
   Einblendungen liegen immer darueber – die Balken verdecken nie Texte; sie fahren vor dem ersten Label/Untertitel weg. */

:root { --kino-schwarz: #010506; }

/* ------------------------------------------------------------------ Filmkorn
   Vorberechnete Rauschkachel (bilder/kino/korn_*.png, 256 px, nahtlos), Ebene etwas groesser als die Buehne; sie springt in
   10 Stufen (steps) – nur transform, also nur Compositor-Arbeit. Standard: normale Mischung mit korn_normal.png (weisse und
   schwarze Koerner mit Alpha) – kostet beim Zusammensetzen fast nichts. Wahlweise overlay (korn_overlay.png, 50 % Grau wirkt
   nicht): sieht in den Lichtern etwas filmischer aus, ist aber ohne GPU (Software-Compositing) deutlich teurer (Messung
   _test/kino). Deckkraft = --kino-korn (Konfig korn.staerke x Tageszeit-Faktor, auf leichten Geraeten reduziert). */
.kino-korn { display: none; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; opacity: 0; }
#kino-korn { left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); }
#kino-korn-start { top: 0; left: 0; right: 0; bottom: 0; z-index: auto; }
.kino-korn-an .kino-korn { display: block; opacity: var(--kino-korn, .028); }
.kino-korn-overlay .kino-korn { mix-blend-mode: overlay; }
.kino-korn-innen {
  position: absolute; left: -128px; top: -128px; right: -128px; bottom: -128px;
  background: url('../bilder/kino/korn_normal.png') 0 0 repeat; background-size: 256px 256px;
  will-change: transform;
  -webkit-animation: kino-korn var(--kino-korn-ms, 830ms) steps(1, end) infinite; animation: kino-korn var(--kino-korn-ms, 830ms) steps(1, end) infinite;
}
.kino-korn-overlay .kino-korn-innen { background-image: url('../bilder/kino/korn_overlay.png'); }
/* Korn steht still, solange niemand hinsieht (Startbildschirm verdeckt den Film / Film verdeckt nichts mehr) */
.film[data-zustand="start"] #kino-korn .kino-korn-innen, .film[data-zustand="laden"] #kino-korn .kino-korn-innen { -webkit-animation-play-state: paused; animation-play-state: paused; }
@-webkit-keyframes kino-korn {
  0% { -webkit-transform: translate3d(0, 0, 0); } 10% { -webkit-transform: translate3d(-61px, 37px, 0); } 20% { -webkit-transform: translate3d(83px, -94px, 0); }
  30% { -webkit-transform: translate3d(-17px, 109px, 0); } 40% { -webkit-transform: translate3d(117px, 22px, 0); } 50% { -webkit-transform: translate3d(-103px, -51px, 0); }
  60% { -webkit-transform: translate3d(41px, 71px, 0); } 70% { -webkit-transform: translate3d(-89px, -118px, 0); } 80% { -webkit-transform: translate3d(97px, 89px, 0); }
  90% { -webkit-transform: translate3d(-29px, -7px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes kino-korn {
  0% { transform: translate3d(0, 0, 0); } 10% { transform: translate3d(-61px, 37px, 0); } 20% { transform: translate3d(83px, -94px, 0); }
  30% { transform: translate3d(-17px, 109px, 0); } 40% { transform: translate3d(117px, 22px, 0); } 50% { transform: translate3d(-103px, -51px, 0); }
  60% { transform: translate3d(41px, 71px, 0); } 70% { transform: translate3d(-89px, -118px, 0); } 80% { transform: translate3d(97px, 89px, 0); }
  90% { transform: translate3d(-29px, -7px, 0); } 100% { transform: translate3d(0, 0, 0); }
}

/* ------------------------------------------------------------------ Vignette (harmonisiert mit der vorhandenen Halt-Vignette)
   Dieselbe Ebene #vignette: beim Abspielen schwach (--kino-vig x Halt-Staerke), im Halt wie bisher voll (Regel in film.css
   ist spezifischer und gewinnt), Uebergang 1,2 s aus film.css. Keine zweite Vignette. */
.kino-vignette #vignette { opacity: var(--kino-vig, .4); }

/* ------------------------------------------------------------------ Kino-Balken (Letterbox)
   Hoehe --kino-bh (JS: Format 2.39:1, aber nie bis an Kapitelkarte/Titel/Chips heran), nur im Format "cover" (Desktop 16:9).
   Erscheinen verdeckt (unter der Abblende bzw. dem ausblendenden Startbildschirm), fahren dann langsam auf. */
.kino-balken { display: none; position: absolute; left: var(--sx); width: var(--sw); height: var(--kino-bh, 0px); z-index: 2; pointer-events: none; background: var(--kino-schwarz);
  -webkit-transform: scaleY(0); transform: scaleY(0); will-change: transform;
  -webkit-transition: -webkit-transform var(--kino-b-ms, 1400ms) cubic-bezier(.45, 0, .2, 1); transition: transform var(--kino-b-ms, 1400ms) cubic-bezier(.45, 0, .2, 1); }
#kino-balken-oben { top: var(--sy); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; }
#kino-balken-unten { top: calc(var(--sy) + var(--sh) - var(--kino-bh, 0px)); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
.kino-balken-sichtbar .kino-balken { display: block; }
.kino-balken-an .kino-balken { -webkit-transform: none; transform: none; }
.kino-balken-sofort .kino-balken { -webkit-transition: none !important; transition: none !important; }

/* Startbildschirm: Balken gleiten mit dem Bild herein (Vorspann), unter Titel und Start-Knopf */
.kino-sb { display: none; position: absolute; left: 0; right: 0; height: var(--kino-sbh, 0px); pointer-events: none; background: var(--kino-schwarz);
  -webkit-transform: scaleY(0); transform: scaleY(0);
  -webkit-transition: -webkit-transform 2.2s cubic-bezier(.45, 0, .2, 1) .35s; transition: transform 2.2s cubic-bezier(.45, 0, .2, 1) .35s; }
.kino-sb.oben { top: 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; }
.kino-sb.unten { bottom: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; }
.kino-balken-start .kino-sb { display: block; }
.kino-balken-start.bereit .kino-sb { -webkit-transform: none; transform: none; }

/* ------------------------------------------------------------------ Uebergang: Aufblende aus Schwarz mit Fokus-Zug
   Abblende (in die Dunkelheit) bleibt kurz wie bisher; das Aufblenden dauert laenger (--kino-auf-ms). Waehrenddessen wird das
   Bild vom leicht Unscharfen scharf (nur filter, einmal ~1 s, nicht auf leichten Geraeten, nicht bei reduzierter Bewegung). */
.kino-aufblende #abblende:not(.an) { transition-duration: var(--kino-auf-ms, 900ms) !important; transition-timing-function: cubic-bezier(.4, 0, .4, 1) !important; }
.ruhig.kino-aufblende #abblende:not(.an) { transition-duration: 300ms !important; }
.kino-fokus .film-video.an { -webkit-animation: kino-fokus var(--kino-fokus-ms, 1000ms) cubic-bezier(.3, 0, .2, 1) 1 backwards; animation: kino-fokus var(--kino-fokus-ms, 1000ms) cubic-bezier(.3, 0, .2, 1) 1 backwards; }
@-webkit-keyframes kino-fokus { from { -webkit-filter: blur(var(--kino-fokus-px, 3px)); } to { -webkit-filter: blur(0); } }
@keyframes kino-fokus { from { filter: blur(var(--kino-fokus-px, 3px)); } to { filter: blur(0); } }

/* ------------------------------------------------------------------ Filmende: langsame Randabdunklung (Logo, Claim,
   Kontakt und Halt-Karte liegen darueber und bleiben hell). Seit 1.3 ist die Bildmitte frei (radial: Mitte durchsichtig,
   zum Rand hin deckend, mal --kino-ende = 0,15) - das Haus behaelt im Moment der Kontakt-Handlung sein Leuchten
   (vorher wurde die Bildmitte um 25 % dunkler). */
#kino-ende { position: absolute; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(1, 5, 6, 0) 0%, rgba(1, 5, 6, 0) 28%, rgba(1, 5, 6, .55) 62%, rgba(1, 5, 6, 1) 100%);
  -webkit-transition: opacity .6s ease; transition: opacity .6s ease; }
.kino-ende-an #kino-ende { opacity: var(--kino-ende, .3); -webkit-transition: opacity var(--kino-ende-ms, 6000ms) cubic-bezier(.35, 0, .25, 1); transition: opacity var(--kino-ende-ms, 6000ms) cubic-bezier(.35, 0, .25, 1); }

/* ------------------------------------------------------------------ Titel: Lichtschimmer (einmal) und Laufweiten-Atmen
   Schimmer: Kopie des Titels (::after, Text aus data-kino-text) mit einem schmalen Lichtband, das einmal durchlaeuft, und
   einem weichen Schein. Startbildschirm und die in der Konfig genannten Kapitel (seit 1.3 keine: titel.kapitel = []).
   1.3: Lichtband zurueckgenommen (Spitze .6 statt .95, Schein .35 statt .7). */
.kino-titel .start-titel, .kino-titel .titel-text[data-kino-text] { position: relative; }
.kino-titel .start-titel::after, .kino-titel .titel-text[data-kino-text]::after {
  content: attr(data-kino-text); position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; white-space: inherit;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  background-image: linear-gradient(104deg, rgba(255, 255, 255, 0) 38%, rgba(236, 254, 250, .32) 46%, rgba(255, 255, 255, .6) 50%, rgba(236, 254, 250, .32) 54%, rgba(255, 255, 255, 0) 62%);
  background-repeat: no-repeat; background-size: 320% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  /* 09.10.: kein filter: drop-shadow mehr - zusammen mit background-clip:text malte Chrome den ganzen Kasten (heller Rahmen).
     padding: inherit, damit die Schimmer-Kopie deckungsgleich auf dem (jetzt gepolsterten) Titel liegt. */
  padding: inherit; box-sizing: border-box;
  opacity: 0;
}
.kino-titel.bereit .start-titel::after { -webkit-animation: kino-schimmer 2.8s cubic-bezier(.45, .05, .35, 1) 1.5s 1 both; animation: kino-schimmer 2.8s cubic-bezier(.45, .05, .35, 1) 1.5s 1 both; }
.kino-titel .titel.an .titel-text[data-kino-text]::after, .kino-titel .logo-block.an .titel-text[data-kino-text]::after {
  -webkit-animation: kino-schimmer 2.6s cubic-bezier(.45, .05, .35, 1) 1.35s 1 both; animation: kino-schimmer 2.6s cubic-bezier(.45, .05, .35, 1) 1.35s 1 both; }
@-webkit-keyframes kino-schimmer { 0% { background-position: 100% 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: 0 0; opacity: 0; } }
@keyframes kino-schimmer { 0% { background-position: 100% 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: 0 0; opacity: 0; } }
/* Laufweiten-Atmen: der Starttitel atmet einmal langsam aus (Laufweite +0,03 em ueber 16 s), danach Ruhe. Nur quer, nicht klein. */
.kino-atmen.bereit.quer:not(.klein) .start-titel { -webkit-animation: kino-atmen 16s cubic-bezier(.25, .6, .3, 1) .5s 1 both; animation: kino-atmen 16s cubic-bezier(.25, .6, .3, 1) .5s 1 both; }
@-webkit-keyframes kino-atmen { from { letter-spacing: .01em; } to { letter-spacing: .04em; } }
@keyframes kino-atmen { from { letter-spacing: .01em; } to { letter-spacing: .04em; } }

/* ------------------------------------------------------------------ reduzierte Bewegung
   film.css schaltet bereits alle Animationen ab (.ruhig *) – Korn steht dann (oder ist per Konfig aus), kein Schimmer,
   kein Fokus-Zug. Balken gleiten nicht, sondern blenden nur. */
.ruhig .kino-balken, .ruhig .kino-sb { -webkit-transform: none !important; transform: none !important; opacity: 0; -webkit-transition: opacity .4s ease !important; transition: opacity .4s ease !important; }
.ruhig.kino-balken-an .kino-balken, .ruhig.kino-balken-start.bereit .kino-sb { opacity: 1; }
.ruhig.kino-balken-sofort .kino-balken {-webkit-transition: none !important; transition: none !important; }