/* =========================================================
   CINEMATIC REVEAL — Monochrom → Farbe → Licht
   Story-Bilder der Heldenreise. Ergänzt style.css.
   Mechanik: zwei deckungsgleiche Ebenen (Farbe unten, Mono oben),
   die Mono-Ebene wird per OPAZITÄT ausgeblendet (GPU-freundlich,
   kein animiertes CSS-grayscale). Danach setzt ein warmer Licht-
   Layer ein. Gestartet per Klasse .is-live (JS: Hover / Scroll).
   ========================================================= */

.cinema {
  position: relative;
  margin: 44px 0 10px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: var(--shadow-md);
}
.cinema-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  transform: scale(1);
  transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1); /* Rücklauf: power2.inOut */
  will-change: transform;
}
.cinema-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Bild-Ebenen sind <picture> mit innerem <img> (AVIF/WebP/JPG + srcset) */
.cinema-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Farbige Basisebene (immer sichtbar, darunter) */
.cinema-color { z-index: 0; }

/* Monochrome Ebene darüber – wird ausgeblendet, um Farbe freizugeben.
   Ohne JS bleibt sie unsichtbar (Farbe wird gezeigt) → No-JS-/SEO-sicher. */
.cinema-mono {
  z-index: 1;
  opacity: 0;
  filter: grayscale(1) contrast(1.03) brightness(0.985);
  transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: opacity;
}
html.js .cinema-mono { opacity: 1; }

/* Warmer Licht-Overlay – Golden-Hour, sehr dezent (max. 12 %) */
.cinema-light {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(58% 54% at 50% 42%,
              rgba(233, 226, 211, 0.85) 0%,
              rgba(233, 226, 211, 0) 70%);
  mix-blend-mode: screen;
  transition: opacity 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Feines Filmkorn (statisch, sehr subtil) */
.cinema-grain {
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}

/* dezente Bildunterschrift

   ABSTAND ZUR RUNDEN ECKE — NICHT VERKLEINERN
   Die Zeile lag vorher bei `margin: 14px 2px 0`, also buendig auf der
   Unterkante und 2 px vom linken Rand. `.cinema` hat aber
   `border-radius: 26px` zusammen mit `overflow: hidden` — die runde
   Ecke schnitt damit diagonal durch den ersten Buchstaben, und weil
   die Schrift kursiv ist und nach links lehnt, traf es ihn zusaetzlich.
   Nachgerechnet: bei 2 px Abstand vom Rand beginnt der Beschnitt schon
   16 px ueber der Unterkante.
   Die 22 px links und 20 px unten halten die Zeile aus dem Radius
   heraus (bei 22 px Abstand reicht die Rundung nur noch 0,3 px hoch).
   Wer hier kuerzt, schneidet den Anfangsbuchstaben wieder ab. */
.cinema-caption {
  margin: 14px 0 0;
  padding: 0 22px 20px;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  line-height: 1.6;
  color: var(--text-muted);
  font-style: italic;
}

/* =========================================================
   AKTIVER ZUSTAND — Hover (Desktop) / im Blick (Mobile)
   Eintritt: langsamer, edler (power3.out), gestaffelt.
   ========================================================= */
html.js .cinema.is-live .cinema-media {
  transform: scale(1.02);                                   /* Phase 1: Mikro-Zoom, mehr Präsenz */
  transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
html.js .cinema.is-live .cinema-mono {
  opacity: 0;                                               /* Phase 2–3: Farbe kehrt zurück */
  transition: opacity 1.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;
}
html.js .cinema.is-live .cinema-light {
  opacity: 0.12;                                            /* Phase 4–5: warmes Licht setzt ein */
  transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.55s;
}

/* =========================================================
   BARRIEREFREIHEIT — reduzierte Bewegung: sofort Farbe, keine Animation
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html.js .cinema-mono,
  html.js .cinema.is-live .cinema-mono { opacity: 0 !important; transition: none !important; }
  .cinema-light { opacity: 0.08 !important; transition: none !important; }
  .cinema-media,
  html.js .cinema.is-live .cinema-media { transform: none !important; transition: none !important; }
}