/* ============================================================================
 * buehne.css — tc-buehne: der Augenblick, der sich nicht wegklicken lässt
 * ----------------------------------------------------------------------------
 * Ein Vollbild-Moment, der nach drei Sekunden von selbst geht. Kein Dialog:
 * Es gibt nichts zu bedienen, nichts zu bestätigen, keinen Schließen-Knopf.
 * Wer nicht warten will, klickt einmal hin.
 *
 * WARUM ES DIESE DATEI GIBT (02.09.2026, Taskwerk #417)
 * Das Muster war da und nicht benutzbar: `js/post-battle-drama.js` baut seit
 * jeher einen `.drama-overlay` mit injiziertem CSS — Heldentod und der 66er
 * Wurf sind die zwei schönsten Momente der Plattform. Die Datei ist aber eine
 * anonyme IIFE ohne Export, liegt nur auf mordheim.html und hängt sich in
 * Mordheim-Funktionen ein. Für den Listen-Reveal in AoS und The Old World
 * hätte man sie kopieren müssen — die Doppelung aus CLAUDE.md §11.
 *
 * ⚠️ ES GIBT DAMIT VORÜBERGEHEND ZWEI FASSUNGEN. `post-battle-drama.js` ist
 * bewusst NICHT umgestellt: Seine zwei Splashes sind visuell abgenommen, und
 * ein Umbau, der ihr Aussehen ändert, gehört hinter eine eigene Abnahme —
 * nicht nebenbei in ein Ticket über Armeelisten. Der Umzug gehört zur
 * Mordheim-Migration (#163). Bis dahin steht in beiden Dateien, dass sie
 * dasselbe Ding sind, und die z-index-Ebene ist bereits dieselbe (60 000).
 *
 * Struktur:
 *   .tc-buehne[.tc-buehne--<variante>]        das Overlay, klickbar
 *     .tc-buehne__inhalt
 *       .tc-buehne__zeichen                   ein großes Symbol
 *       .tc-buehne__titel
 *       .tc-buehne__unterzeile                Kleinkapitälchen-Zeile darunter
 *       .tc-buehne__zeile                     eine ruhige Zusatzzeile
 *       .tc-buehne__zitat                     kursiv, das, was jemand sagt
 *       .tc-buehne__signatur                  wer es gesagt hat
 *
 * Zustände setzt js/ui/buehne.js: `is-sichtbar` beim Einblenden,
 * `is-schwindend` beim Gehen.
 *
 * Varianten: --gold (ein Gewinn), --blut (ein Verlust), --stahl (eine
 * Feststellung). Die Variante färbt NUR den Grund und den Schein; die
 * Schriftfarben kommen durchweg aus Tokens.
 *
 * BEWEGUNG: Ein eigener `prefers-reduced-motion`-Block steht hier bewusst
 * NICHT — css/tokens.css trägt seit dem 18.08.2026 den plattformweiten
 * `*`-Rückfall, ausdrücklich damit man ihn nicht je Datei anmelden muss.
 * Die drei Sekunden Standzeit laufen ohnehin über setTimeout und sind von
 * der Einstellung unberührt: Wer Bewegung reduziert hat, sieht den Moment
 * sofort vollständig — und das ist richtig, es geht um seinen INHALT.
 *
 * Demonstriert in library-feedback.html.
 * ========================================================================== */

/* ⚠️ DER GRUND IST GANZ UNDURCHSICHTIG — in zwei Schritten dorthin gemessen.
   Erste Fassung: 0.95 in der Mitte. Im Browser las man den Seitentitel quer
   durch den Moment („ARMEELISTEN"). Zweite: 0.985 — auf dem Telefon immer
   noch als Schimmer zu sehen, weil die Listen-Seiten helle Ueberschriften auf
   dunklem Grund tragen und schon anderthalb Prozent davon durchkommen.

   Die Tiefe des Verlaufs braucht die Transparenz gar nicht: Sie entsteht aus
   der HELLIGKEIT (#141b22 in der Mitte gegen Schwarz aussen), nicht daraus,
   dass die Seite durchscheint. Ein Augenblick, durch den man die Seite liest,
   ist keiner. */
.tc-buehne {
  position: fixed;
  inset: 0;
  z-index: var(--tc-z-buehne, 60000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tc-space-4, 24px);

  opacity: 0;
  transition: opacity 500ms ease;

  cursor: pointer;
  /* Der ganze Schirm ist die Schaltfläche. Ein Knopf hätte hier nichts zu
     sagen — er würde behaupten, es gäbe eine Entscheidung zu treffen. */
  -webkit-tap-highlight-color: transparent;
}

.tc-buehne.is-sichtbar  { opacity: 1; }
.tc-buehne.is-schwindend { opacity: 0; transition: opacity 600ms ease; }

.tc-buehne__inhalt {
  text-align: center;
  max-width: 32rem;
  padding: var(--tc-space-5, 32px) var(--tc-space-4, 24px);
}

/* ---- Das Symbol --------------------------------------------------------- */

.tc-buehne__zeichen {
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: var(--tc-space-4, 20px);
  animation: tcBuehneZeichen 2.6s ease-in-out both;
}

@keyframes tcBuehneZeichen {
  0%   { transform: scale(0.35); opacity: 0; }
  20%  { transform: scale(1.18); opacity: 1; }
  32%  { transform: scale(1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Die Zeilen ---------------------------------------------------------
   Sie treten nacheinander auf. Die Verzögerungen sind der eigentliche
   Effekt: Erst das Symbol, dann was passiert ist, dann wem, dann der Satz
   dazu. Alles auf einmal wäre eine Anzeige, keine Bühne. */

.tc-buehne__titel {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tc-text-strong, #f0ece4);
  margin: 0 0 var(--tc-space-2, 8px);
  text-wrap: balance;
  animation: tcBuehneZeile 1s ease-out 0.4s both;
}

.tc-buehne__unterzeile {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tc-text-muted, #9e9e9e);
  margin: 0 0 var(--tc-space-2, 6px);
  animation: tcBuehneZeile 1s ease-out 0.6s both;
}

.tc-buehne__zeile {
  font-size: 0.95rem;
  color: var(--tc-text-default, #d0cdc6);
  margin: 0 0 var(--tc-space-4, 20px);
  animation: tcBuehneZeile 1s ease-out 0.75s both;
}

.tc-buehne__zitat {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--tc-highlight, #d4c4a0);
  max-width: 26rem;
  margin: 0 auto var(--tc-space-2, 8px);
  /* Ohne `balance` brach der Satz im Pruefstand nach „hat" um und liess
     „nicht gelesen" allein auf der zweiten Zeile stehen. Bei einem Zitat,
     das man in drei Sekunden lesen soll, ist der Umbruch Teil der Lesbarkeit. */
  text-wrap: balance;
  animation: tcBuehneZeile 1.2s ease-out 1.1s both;
}

.tc-buehne__signatur {
  font-size: 0.8rem;
  color: var(--tc-text-muted, #9e9e9e);
  margin: 0;
  animation: tcBuehneZeile 1s ease-out 1.45s both;
}

@keyframes tcBuehneZeile {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Varianten ----------------------------------------------------------
   Nur Grund und Schein. Hier stehen bewusst Hex-Werte und keine Theme-Token:
   Der Moment soll auf jeder Seite gleich aussehen — ein Listen-Reveal in
   AoS und einer in The Old World sind dasselbe Ereignis, und ein Grund, der
   mit dem Systemakzent wandert, machte daraus zwei verschiedene. Es ist eine
   Datenfarbe im Sinn von CLAUDE.md §9: Sie sagt etwas über den ANLASS. */

.tc-buehne--stahl {
  background: radial-gradient(ellipse at center,
    #141b22 0%, #070a0e 65%, #000000 100%);
}
.tc-buehne--stahl .tc-buehne__zeichen { filter: drop-shadow(0 0 26px rgba(150, 190, 220, 0.35)); }

.tc-buehne--gold {
  background: radial-gradient(ellipse at center,
    #262104 0%, #0e0b00 65%, #000000 100%);
}
.tc-buehne--gold .tc-buehne__zeichen { filter: drop-shadow(0 0 30px rgba(201, 169, 89, 0.6)); }

.tc-buehne--blut {
  background: radial-gradient(ellipse at center,
    #380202 0%, #0a0000 65%, #000000 100%);
}
.tc-buehne--blut .tc-buehne__zeichen { filter: drop-shadow(0 0 30px rgba(139, 0, 0, 0.6)); }

/* ---- Klein --------------------------------------------------------------
   Auf dem Telefon steht der Moment im Hochformat und hat weniger Platz als
   Zeilen. Verkleinert wird der Kopf, nicht der Text: Der Titel ist das, was
   man behalten soll. */

@media (max-width: 30rem) {
  .tc-buehne__zeichen  { font-size: 3.4rem; }
  .tc-buehne__titel    { font-size: 1.5rem; }
  .tc-buehne__zitat    { font-size: 0.95rem; }
  .tc-buehne__inhalt   { padding: var(--tc-space-4, 20px) var(--tc-space-3, 14px); }
}