/* AdenFace · Startseite, die Text-Ebene über dem Einstiegsfilm. Gefüllt, gestellt und im Takt
   gehalten von js/einstieg.js. Die Frage als blaue Blase wie im Programm, die Antwort als
   Untertitel mit einer Platte je Zeile. Alle Maße in em: einstieg.js setzt die Schriftgröße der
   Ebene nach der Größe des Films, alles andere wächst mit.
   Bewegt werden nur opacity, translate, transform und color. Lage per transform aus dem Skript,
   das Auftauchen per translate: die beiden stören einander nicht, und nichts verschiebt das Layout. */

.einblendung {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
  font-size: 16px; line-height: 1.4; color: var(--text);
  --platte: rgb(8 11 15 / 0.86);
}
.einblendung__frage, .einblendung__antwort {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; gap: 0.4em;
}
.einblendung p { margin: 0; hyphens: manual; -webkit-hyphens: manual; }

/* Wer spricht: DU über der Frage, EVIE über der Antwort. Eigene kleine Platte, weil das Etikett
   je nach Bildschirm über Haut, Haar oder Hintergrund liegt. */
.einblendung__wer {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.3em 0.6em 0.25em; border-radius: 0.3em; background: var(--platte);
  font-family: var(--schrift-etikett); font-size: 0.625em; letter-spacing: 0.18em; line-height: 1.3;
  text-transform: uppercase; color: var(--akzent);
}

/* ------------------------------------------------------------------ Frage */
.einblendung__frage { align-items: flex-end; opacity: 0; translate: 0 0.5em; transition: opacity 320ms var(--kurve), translate 420ms var(--kurve); }
.einblendung[data-frage] .einblendung__frage { opacity: 1; translate: none; }
.einblendung__blase {
  max-width: 100%; padding: 0.6em 0.9em 0.65em; border-radius: 0.95em 0.95em 0.3em 0.95em;
  background: rgb(15 38 54 / 0.9); border: 1px solid rgb(92 200 255 / 0.42);
  box-shadow: 0 0.8em 2em -0.9em rgb(0 0 0 / 0.8);
  font-size: 0.94em; font-weight: 500; letter-spacing: -0.005em; text-wrap: balance;
}
/* Der noch ungetippte Rest hält schon seinen Platz: die Blase hat von Anfang an ihre Endgröße,
   beim Tippen verschiebt sich keine Zeile. */
.einblendung__rest { visibility: hidden; }
/* Der Zeiger ist der rechte Rand der getippten Spanne, mit gleich großem negativem Abstand: er
   nimmt keinen Platz, und weil nur die Spanne wächst, statt dass ein eigenes Element wandert,
   zählt der Browser beim Tippen keine Layout-Verschiebung. */
.einblendung__getippt {
  border-right: 0.1em solid var(--akzent); margin-right: -0.1em;
}
/* Fest, nicht blinkend: wer tippt, dessen Zeiger blinkt nicht. Und border-color liefe nicht auf
   dem Compositor, ein Blinken kostete in jedem Bild eine Stilberechnung. */
.einblendung[data-gesendet] .einblendung__getippt { border-right-color: transparent; }
/* Abgeschickt: einmal ein kurzes Aufleuchten, dann ruhig. */
.einblendung[data-gesendet] .einblendung__blase { animation: einblendung-gesendet 900ms var(--kurve) 1; }
@keyframes einblendung-gesendet {
  0% { border-color: rgb(92 200 255 / 0.42); box-shadow: 0 0.8em 2em -0.9em rgb(0 0 0 / 0.8), 0 0 0 0 rgb(92 200 255 / 0); }
  25% { border-color: rgb(142 217 255 / 0.95); box-shadow: 0 0.8em 2em -0.9em rgb(0 0 0 / 0.8), 0 0 1.6em 0.1em rgb(92 200 255 / 0.4); }
  100% { border-color: rgb(92 200 255 / 0.42); box-shadow: 0 0.8em 2em -0.9em rgb(0 0 0 / 0.8), 0 0 0 0 rgb(92 200 255 / 0); }
}

/* ------------------------------------------------------------------ Antwort */
.einblendung__antwort { align-items: center; text-align: center; opacity: 0; transition: opacity 320ms var(--kurve); }
.einblendung[data-antwort] .einblendung__antwort { opacity: 1; }
/* Beide Sätze und die Punkte liegen, je mit Etikett, in derselben Zelle. Die Zelle ist so hoch wie der längste
   Satz, unten bündig: der Wechsel zwischen den Sätzen bewegt nichts. */
.einblendung__saetze { display: grid; width: 100%; justify-items: center; }
.einblendung__saetze > * {
  grid-area: 1 / 1; align-self: end; opacity: 0; translate: 0 0.35em;
  transition: opacity 240ms var(--kurve), translate 360ms var(--kurve);
}
.einblendung__saetze > [data-an] { opacity: 1; translate: none; }
.einblendung__eintrag { display: flex; flex-direction: column; align-items: center; gap: 0.4em; }
.einblendung__satz { font-size: 1.12em; font-weight: 500; line-height: 1.64; letter-spacing: -0.01em; text-wrap: balance; }
.einblendung__zeile {
  padding: 0.16em 0.5em 0.2em; border-radius: 0.28em; background: var(--platte);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Was Evie noch nicht gesagt hat, steht schon da, aber leiser. Gesagt wird hell. */
.einblendung__wort { color: var(--leise); transition: color 220ms linear; }
.einblendung__wort[data-gesagt] { color: var(--text); }

/* Links neben dem Kopf (gestapelt, wenn unter dem Kinn kein Platz ist): linksbündig, wie im Chat. */
.einblendung__antwort[data-seite="links"] { align-items: flex-start; text-align: left; }
.einblendung__antwort[data-seite="links"] .einblendung__saetze { justify-items: start; }
.einblendung__antwort[data-seite="links"] .einblendung__eintrag { align-items: flex-start; }
.einblendung__antwort[data-seite="links"] .einblendung__satz { text-wrap: pretty; }
/* Ganz knapp: ohne die Etiketten, der Text selbst geht vor. */
.einblendung[data-knapp] .einblendung__wer { display: none; }

/* Denkt nach: drei Punkte auf derselben Platte. */
.einblendung__denkt { display: inline-flex; gap: 0.38em; padding: 0.7em 0.85em; border-radius: 999px; background: var(--platte); }
.einblendung__denkt i { width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--akzent); opacity: 0.3; }
.einblendung[data-antwort="denkt"] .einblendung__denkt i { animation: einblendung-denkt 1.1s ease-in-out infinite; }
.einblendung[data-antwort="denkt"] .einblendung__denkt i:nth-child(2) { animation-delay: 160ms; }
.einblendung[data-antwort="denkt"] .einblendung__denkt i:nth-child(3) { animation-delay: 320ms; }
@keyframes einblendung-denkt { 0%, 70%, 100% { opacity: 0.3; transform: none; } 35% { opacity: 1; transform: translateY(-0.18em); } }

/* Pegel neben EVIE: einstieg.js setzt --pegel1 bis 4 mit jedem gesagten Wort neu (siehe pegeln). */
.einblendung__pegel { display: inline-flex; align-items: flex-end; gap: 0.18em; height: 1em; }
.einblendung__pegel i { width: 0.16em; height: 100%; background: currentColor; transform-origin: 50% 100%; transform: scaleY(var(--pegel1, 0.25)); transition: transform 140ms var(--kurve); }
.einblendung__pegel i:nth-child(2) { transform: scaleY(var(--pegel2, 0.25)); }
.einblendung__pegel i:nth-child(3) { transform: scaleY(var(--pegel3, 0.25)); }
.einblendung__pegel i:nth-child(4) { transform: scaleY(var(--pegel4, 0.25)); }

/* ------------------------------------------------------------------ Angehalten und Ruhe
   Ein angehaltener Film zeigt Text, der steht: kein Zeiger, kein Pulsieren, kein Pegel. */
/* !important, weil jede animation-Kurzschreibweise oben den Zustand wieder auf running setzt. */
.einblendung[data-modus="steht"] * { animation-play-state: paused !important; }
.einblendung[data-modus="steht"] .einblendung__getippt { border-right-color: transparent; }
/* Ruhiger Endzustand über dem Standbild: Frage und beide Sätze untereinander, alles gesagt. */
.einblendung[data-modus="ruhig"] .einblendung__saetze { display: flex; flex-direction: column; align-items: center; gap: 0.15em; }
.einblendung[data-modus="ruhig"] [data-seite="links"] .einblendung__saetze { align-items: flex-start; }
.einblendung[data-modus="ruhig"] .einblendung__eintrag--denkt { display: none; }
.einblendung[data-modus="ruhig"] .einblendung__eintrag--satz ~ .einblendung__eintrag--satz .einblendung__wer { display: none; }
.einblendung[data-modus="ruhig"] * { transition: none; animation: none; }

/* basis.css kürzt bei weniger Bewegung jeden Übergang auf 0,01 ms, für alle Eigenschaften. Dann
   liefe auch die Schriftgröße, die einstieg.js setzt, als Übergang, und die Messung im selben
   Takt sähe noch den alten Wert. Darum hier ganz aus, auch an der Ebene selbst. */
@media (prefers-reduced-motion: reduce) {
  .einblendung, .einblendung * { transition: none !important; animation: none !important; }
  .einblendung__getippt { border-right-color: transparent; }
  .einblendung__denkt i { opacity: 0.8; }
}
@media (scripting: none) { .einblendung { display: none; } }