/* Drehtag - Stylesheet der React-Insel src/components/if-film/ImmoFilmDrehtag.tsx auf immofilm.html.
   Die Mechanik (Szenen, Stepper mit Zeitsegmenten, Auftritt der Punkte) kommt aus ablauf.css und
   src/components/ablauf/ablauf.tsx; hier steht nur, was der Filmstreifen selbst braucht.

   Der Streifen liegt auf einer festen Hoehe (--if-dreh-h). Die laufende Kachel ist 9:16 breit,
   die anderen bleiben schmale Streifen und sind entfaerbt - so ist immer zu sehen, wieviele
   Stationen es gibt, ohne dass drei Hochkantkacheln die Breite sprengen. Jeder Zustand haengt
   an data-state, die Komponente setzt nur dieses Attribut. */

.if-dreh { --if-dreh-h: 22rem; --if-dreh-schmal: 3rem; }
@media (min-width: 640px)  { .if-dreh { --if-dreh-h: 26rem; --if-dreh-schmal: 3.5rem; } }
@media (min-width: 1024px) { .if-dreh { --if-dreh-h: 27rem; } }
@media (min-width: 1280px) { .if-dreh { --if-dreh-h: 30rem; --if-dreh-schmal: 4rem; } }

.if-dreh-streifen { display: flex; gap: 0.5rem; height: var(--if-dreh-h); }

.if-dreh-kachel {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  width: var(--if-dreh-schmal);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--ab-linie);
  background-color: #0b1920;
  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.06), transparent 45%, rgba(0, 0, 0, 0.6));
  filter: grayscale(1) brightness(0.5);
  opacity: 0.75;
  transition: width 700ms var(--ab-ease), filter 700ms ease, opacity 700ms ease,
    border-color 700ms ease, box-shadow 700ms ease;
}
/* Die laufende Kachel steht im Format des Films, die Nachbarn bleiben Streifen. */
.if-dreh-kachel[data-state="active"] {
  width: calc(var(--if-dreh-h) * 9 / 16);
  filter: none;
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
}
/* Erledigte Stationen bleiben etwas heller als die noch ausstehenden. */
.if-dreh-kachel[data-state="done"] { opacity: 0.9; filter: grayscale(1) brightness(0.62); }

.if-dreh-kachel video,
.if-dreh-kachel img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
/* Das Standbild liegt ueber dem Video und wirkt als Poster, bis eine Quelle laeuft. */
.if-dreh-kachel img { z-index: 1; }
.if-dreh-kachel[data-laeuft="true"] img { opacity: 0; transition: opacity 300ms ease; }

.if-dreh-schleier {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* Nummer oben, auf der laufenden Kachel unten dazu das Wort mit dem pulsenden Punkt. */
.if-dreh-marke {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.75rem;
  font-family: Inter, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.if-dreh-kachel[data-state="active"] .if-dreh-marke { padding: 1.25rem; color: #ffffff; }
.if-dreh-wort { display: flex; align-items: center; gap: 0.5rem; opacity: 0; transition: opacity 400ms ease; }
.if-dreh-kachel[data-state="active"] .if-dreh-wort { opacity: 1; transition-delay: 250ms; }
.if-dreh-punkt {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999rem;
  background: var(--ab-akzent);
  animation: if-dreh-puls 1.6s ease-in-out infinite;
}
@keyframes if-dreh-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Szenentext: die Szenen stapeln in einer Grid-Zelle (.ab-buehne aus ablauf.css), die hoechste
   Szene bestimmt die Hoehe - deshalb steht hier kein min-height. */

.if-dreh-punkte { display: grid; gap: 0; }
.if-dreh-punkte li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-top: 1px solid var(--ab-linie);
  padding: 0.875rem 0;
}
.if-dreh-punkte li:last-child { border-bottom: 1px solid var(--ab-linie); }
.if-dreh-punkte svg { flex: 0 0 auto; margin-top: 0.2rem; color: var(--ab-akzent); }

@media (prefers-reduced-motion: reduce) {
  .if-dreh-kachel, .if-dreh-marke, .if-dreh-wort, .if-dreh-kachel img { transition: none; }
  .if-dreh-punkt { animation: none; }
}