/* =====================================================================
   FX – filmische Effekte (live auf allen Seiten seit 29.10.2026)
   1 Szenenwechsel zwischen Seiten (View Transitions), langsam
   2 Letterbox-Öffnung und Titelkarten: starten beim Erscheinen im Bild
     und laufen in festem Tempo, egal wie schnell man scrollt (fx.js setzt .fx-in)
   3 Filmdetails: Kapitelnummern, Zeitcode nur in den Kachel-Videos, Filmkorn
   Ältere Browser zeigen einfach die normale Seite. "Bewegung reduzieren" schaltet alles ab.
   ===================================================================== */

/* 1 · Szenenwechsel ------------------------------------------------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.fx .hd { view-transition-name: hd; }
.fx [data-vt="film-bodas"] { view-transition-name: film-bodas; }

::view-transition-group(*) { animation-duration: 1.5s; animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
/* Schnitt über Schwarz: alte Szene blendet langsam ab, neue blendet auf */
::view-transition-old(root) { animation: .7s ease both fx-out; }
::view-transition-new(root) { animation: 1s .6s ease both fx-in; }
/* das Video wächst von der Kachel zum Vollbild, ohne zu verzerren */
::view-transition-old(film-bodas), ::view-transition-new(film-bodas) { width: 100%; height: 100%; object-fit: cover; animation-duration: 1.5s; }
@keyframes fx-out { to { opacity: 0; } }
@keyframes fx-in { from { opacity: 0; } }

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

  /* Einstieg: schwarze Kinobalken öffnen sich, Titel kommt Wort für Wort */
  .fx .blm-hero { position: relative; }
  .fx .c-hero::before, .fx .c-hero::after, .fx .cover::before, .fx .cover::after, .fx .blm-hero::before, .fx .blm-hero::after {
    content: ""; position: absolute; left: 0; right: 0; height: 13vh; background: var(--ink); z-index: 4; pointer-events: none;
    animation: fx-bar 2s .2s cubic-bezier(.65, 0, .2, 1) both;
  }
  .fx .c-hero::before, .fx .cover::before, .fx .blm-hero::before { top: 0; transform-origin: top; }
  .fx .c-hero::after, .fx .cover::after, .fx .blm-hero::after { bottom: 0; transform-origin: bottom; }
  @keyframes fx-bar { from { transform: scaleY(1); } to { transform: scaleY(0); } }

  .fx .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .1em .18em; margin: -.14em -.1em -.18em; }
  .fx .fx-w > span { display: inline-block; animation: fx-word 1.5s cubic-bezier(.2, .7, .15, 1) both; animation-delay: calc(var(--i) * 120ms + .8s); }
  @keyframes fx-word { from { transform: translateY(108%); } }
  .fx .c-hero .c-side, .fx .cover .cover-side, .fx .blm-hero .wrap > :not(h1) { animation: fx-in 1.4s 1.9s ease both; }

  /* 2 · Beim Erscheinen: Breitbild öffnet sich, Titel steigen ein – festes Tempo */
  .fx .c-reel .c-frame, .fx .film > .c-frame, .fx .c-me .c-frame { clip-path: inset(24% 0 24% 0); }
  .fx .c-reel .c-frame.fx-in, .fx .film > .c-frame.fx-in, .fx .c-me .c-frame.fx-in { animation: fx-letterbox 2.2s cubic-bezier(.6, 0, .2, 1) both; }
  @keyframes fx-letterbox { from { clip-path: inset(24% 0 24% 0); } to { clip-path: inset(0 0 0 0); } }

  .fx .fx-t { clip-path: inset(0 0 100% 0); }
  .fx .fx-t.fx-in { animation: fx-title 1.6s .25s cubic-bezier(.2, .7, .15, 1) both; }
  @keyframes fx-title { from { clip-path: inset(0 0 100% 0); transform: translateY(.45em); } to { clip-path: inset(-.2em -.2em -.25em -.2em); transform: none; } }
}

/* 3 · Filmdetails ---------------------------------------------------- */
/* Kapitelnummern über den Kacheln: 01 Bodas, 02 Pedida … */
.fx .c-reel { counter-reset: ch; }
.fx .c-reel .c-shot { counter-increment: ch; }
.fx .c-reel .c-credit h2::before {
  content: counter(ch, decimal-leading-zero); display: block; margin-bottom: .9rem;
  font: 500 .8rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--teal-soft);
}
/* Zeitcode in den Kachel-Videos (nicht in den großen Einstiegsvideos) */
.fx .tc {
  position: absolute; z-index: 3; top: clamp(10px, 1.6vw, 20px); left: clamp(12px, 1.8vw, 22px);
  display: flex; align-items: center; gap: .5rem; pointer-events: none;
  font: 500 .78rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em;
  color: rgba(242, 239, 234, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.fx .tc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E2554A; box-shadow: 0 0 8px rgba(226, 85, 74, .7); }
.fx .tc.is-paused::before { background: var(--muted-2); box-shadow: none; }
/* sehr feines Filmkorn über allem (statisch, kostet kaum Leistung) */
.fx body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}