/* =====================================================================
   kapitel.css — DIE KAPITELTAFEL (A.1.40.0)

   Seine Ansage vom 21.09.: die Kapitel sollen „filmisch" erscheinen.

   Filmisch heisst hier NICHT „ein schwarzes Bild mit Schrift". Es heisst:
   der Raum bleibt stehen, und ueber ihn legt sich ein Titel — so wie im
   Film die Szene weiterlaeuft, waehrend der Vorspann darueber liegt. Die
   Werkstatt sackt nur ein Stueck ins Dunkle (die Tafel bringt ihren
   eigenen Schleier mit, sie nimmt niemandem das Licht weg), zwei duenne
   Striche fahren aus der Mitte nach aussen, dazwischen steht die Nummer
   klein und weit gesperrt, darunter der Titel gross. Dann geht alles
   wieder auf.

   ⚠️⚠️ SIE FAENGT KEINE ZEIGER. `pointer-events: none` auf allem: wer
   waehrend der Tafel schon weiterzieht, wird nicht ausgebremst — eine
   Titeltafel, die eine Hand blockiert, ist ein Dialogfenster.
   ⚠️ Der Schleier ist ein eigenes Kind, keine Hintergrundfarbe auf der
   Tafel selbst: so kann er weich ausblenden, waehrend die Schrift noch
   steht, und die Striche liegen nicht in seinem Dunst.
   ⚠️ Alle Zeiten stehen ZWEIMAL — hier und als EIN, HALT, AUS in
   kapitel.js. Wer eine aendert, aendert beide (dieselbe Kopplung wie
   STURZ in platte.js).
   ===================================================================== */

.kapiteltafel {
  position: fixed;
  inset: 0;
  z-index: 40;                       /* ueber allem, auch ueber Licht und Koernung */
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
  contain: strict;
}
.kapiteltafel.an { visibility: visible; }

/* ---- der Schleier: der Raum sackt ins Dunkle, mehr nicht ---- */
.kapiteltafel .kt-schleier {
  position: absolute;
  inset: 0;
  /* nach aussen hin dunkler — die Mitte, wo der Titel steht, bleibt am
     hellsten, damit die Werkstatt hinter der Schrift noch zu lesen ist */
  background: radial-gradient(ellipse 78% 62% at 50% 50%,
    rgba(4, 6, 10, 0.34) 0%,
    rgba(4, 6, 10, 0.62) 58%,
    rgba(2, 3, 6, 0.80) 100%);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.kapiteltafel.an .kt-schleier { opacity: 1; }
.kapiteltafel.weg .kt-schleier { opacity: 0; }

/* ---- der Satz ---- */
.kapiteltafel .kt-satz {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.42em;
  padding: 0 6vw;
  text-align: center;
  font-size: clamp(15px, 2.1vw, 30px);
}

/* Die zwei Striche. Sie fahren aus der Mitte auf — `scaleX` von 0, nicht
   `width`: eine Breite laesst das Layout arbeiten, eine Skalierung nicht. */
.kapiteltafel .kt-strich {
  display: block;
  width: min(30em, 76vw);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(216, 163, 60, 0) 0%,
    rgba(216, 163, 60, 0.85) 18%,
    rgba(240, 214, 160, 0.95) 50%,
    rgba(216, 163, 60, 0.85) 82%,
    rgba(216, 163, 60, 0) 100%);
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.16, .8, .3, 1), opacity 0.5s ease;
}
.kapiteltafel.an .kt-strich { transform: scaleX(1); opacity: 1; }
.kapiteltafel.weg .kt-strich { transform: scaleX(0.82); opacity: 0; }
.kapiteltafel .kt-unten { transition-delay: 0.07s; }

/* Die Nummer: klein, weit gesperrt, Messing — dieselbe Sprache wie die
   Schildchen an der Maschine. */
.kapiteltafel .kt-nr {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.44em;
  text-indent: 0.44em;               /* die Sperrung haengt sonst rechts an */
  text-transform: uppercase;
  color: #d8a33c;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.6s ease 0.16s, transform 0.7s cubic-bezier(.16, .8, .3, 1) 0.16s;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

/* Der Titel: gross, schwer, hell. Dieselbe schwere Schrift wie der Name
   auf der Platte (Zeile 345 in maschine.css) — es ist dieselbe Werkstatt. */
.kapiteltafel .kt-titel {
  font-family: "Arial Black", "Segoe UI Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  font-size: 2.1em;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: #eef2f8;
  opacity: 0;
  transform: translateY(0.34em);
  transition: opacity 0.7s ease 0.24s, transform 0.8s cubic-bezier(.16, .8, .3, 1) 0.24s;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.kapiteltafel.an .kt-nr,
.kapiteltafel.an .kt-titel { opacity: 1; transform: translateY(0); }
.kapiteltafel.weg .kt-nr,
.kapiteltafel.weg .kt-titel {
  opacity: 0;
  transform: translateY(-0.28em);
  transition: opacity 0.55s ease, transform 0.7s ease;
}

/* ---- die Ansage fuer alle, die nicht sehen ----
   Sie steht im Dokument und wird vorgelesen, ist aber kein Bild: ein
   Punkt am Rand, der nichts verdeckt und nichts faengt. */
.kapitel-ansage {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* ⚠️ Wer weniger Bewegung bestellt hat, bekommt den Titel trotzdem — nur
   ohne Fahrt: er blendet auf und wieder ab. Der Inhalt darf nicht an der
   Bewegung haengen. */
@media (prefers-reduced-motion: reduce) {
  .kapiteltafel .kt-strich,
  .kapiteltafel .kt-nr,
  .kapiteltafel .kt-titel {
    transition: opacity 0.4s ease;
    transform: none !important;
  }
}