/* Beispielfilme als Coverflow - Stylesheet der React-Insel src/components/if-film/ImmoFilmReel.tsx.
   Eigene Datei wie os-preview.css, damit die Insel vollstaendig beschrieben ist und nicht am
   <style>-Block von immofilm.html haengt. Eingebunden im <head> von immofilm.html.
   Die Poster-Regeln am Ende sind bewusst eine auf .if-flow eingegrenzte Kopie der Seitenregeln:
   die Insel soll ohne den Seitenblock funktionieren, wenn sie einmal woanders steht. */
/* Fuenf Karten auf einer Buehne, die mittlere steht frontal, die Nachbarn drehen sich weg.
   --if-flow-b ist die Kartenbreite, der Versatz steht in Prozent davon und waechst deshalb mit
   der Karte mit. Jeder Zustand haengt an data-pos, die Komponente setzt nur dieses Attribut. */
/* Unter 640 px steht die mittlere Karte mit 13rem (208 px auf 390 px) - bei 11.5rem waren Titel und
   Play-Knopf auf dem Hochkantfilm zu klein; die Nachbarn bleiben als gedrehte Streifen sichtbar. */
.if-flow { --if-flow-b: 13rem; --if-flow-v1: 72%; --if-flow-v2: 130%; }
@media (min-width: 640px)  { .if-flow { --if-flow-b: 13rem; } }
@media (min-width: 768px)  { .if-flow { --if-flow-b: 15rem; } }
@media (min-width: 1024px) { .if-flow { --if-flow-b: 17rem; } }
@media (min-width: 1280px) { .if-flow { --if-flow-b: 19rem; } }
/* Umgebungslicht: das Standbild der mittleren Karte unscharf, darueber ein Schleier bis zum Rand */
.if-flow-licht { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.if-flow-licht img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); filter: brightness(0.2) blur(40px); transition: opacity 600ms ease; }
.if-flow-licht::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.92) 62%, #000000 100%); }
.if-flow-buehne { position: relative; height: calc(var(--if-flow-b) * 16 / 9); perspective: 1400px; }
/* Lichtkegel hinter der mittleren Karte, wie im Hero */
.if-flow-buehne::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--if-flow-b) * 2.6); height: calc(var(--if-flow-b) * 2.6); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(36,83,255,0.22), rgba(36,83,255,0) 70%); pointer-events: none; }
.if-flow-karte { position: absolute; top: 0; left: 50%; width: var(--if-flow-b); aspect-ratio: 9 / 16; margin-left: calc(var(--if-flow-b) / -2); overflow: hidden; transform-origin: center center; transition: transform 800ms cubic-bezier(.25,1,.5,1), opacity 800ms cubic-bezier(.25,1,.5,1), filter 800ms ease, box-shadow 800ms ease; }
.if-flow-karte[data-pos="0"]    { transform: translateX(0) scale(1); opacity: 1; z-index: 30; filter: brightness(1); box-shadow: 0 25px 60px rgba(0,0,0,0.85); }
.if-flow-karte[data-pos="1"]    { transform: translateX(var(--if-flow-v1)) scale(0.84) rotateY(-24deg); opacity: 0.7; z-index: 20; filter: brightness(0.72); box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
.if-flow-karte[data-pos="-1"]   { transform: translateX(calc(var(--if-flow-v1) * -1)) scale(0.84) rotateY(24deg); opacity: 0.7; z-index: 20; filter: brightness(0.72); box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
.if-flow-karte[data-pos="2"]    { transform: translateX(var(--if-flow-v2)) scale(0.68) rotateY(-38deg); opacity: 0.4; z-index: 10; filter: brightness(0.55) blur(1px); }
.if-flow-karte[data-pos="-2"]   { transform: translateX(calc(var(--if-flow-v2) * -1)) scale(0.68) rotateY(38deg); opacity: 0.4; z-index: 10; filter: brightness(0.55) blur(1px); }
.if-flow-karte[data-pos="fern"] { transform: scale(0.4); opacity: 0; z-index: 0; filter: brightness(1); }
/* Die Nachbarkarten sind Ziele: ihre Flaeche holt sie in die Mitte. Erst die mittlere Karte gibt
   Beschriftung und Play-Knopf frei, das Overlay selbst faengt keine Klicks. */
.if-flow-wahl { position: absolute; inset: 0; z-index: 2; cursor: pointer; border-radius: inherit; }
.if-flow-wahl:focus-visible { outline: 2px solid #2453ff; outline-offset: -6px; }
.if-flow-karte .if-video-overlay { z-index: 3; pointer-events: none; }
.if-flow-karte .if-play { pointer-events: auto; }
.if-flow-karte:not([data-pos="0"]) .if-play { pointer-events: none; }
.if-flow-inhalt { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.if-flow-karte[data-pos="0"] .if-flow-inhalt { opacity: 1; transform: translateY(0); }
.if-flow-punkt { height: 0.5rem; width: 0.5rem; border-radius: 999rem; background: rgba(255,255,255,0.25); transition: width 300ms ease, background-color 300ms ease; }
.if-flow-punkt[aria-current="true"] { width: 1.75rem; background: #ffffff; }
.if-flow-punkt:focus-visible { outline: 2px solid #2453ff; outline-offset: 4px; }

/* Standbild als Poster ueber dem Video, Overlay darueber; beim Abspielen blenden beide aus */
.if-flow .if-still { z-index: 1; pointer-events: none; transition: opacity 300ms ease; }
.if-flow .if-video.is-playing .if-still { opacity: 0; }
.if-flow .if-video.is-playing .if-video-overlay { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .if-flow-karte, .if-flow-inhalt, .if-flow-licht img, .if-flow-punkt, .if-flow .if-still { transition: none; }
}