/* ===========================================================================
   Eintritt
   ---------------------------------------------------------------------------
   Die drei Personen steigen beim Erscheinen leicht von unten ein und blenden
   auf. Versetzt: erst die beiden hinteren, dann die vordere – so landet der
   Blick zuletzt auf der mittleren Person.

   WARUM translate UND NICHT transform:
   Drift belegt bereits transform auf derselben Ebene, Atmen belegt transform
   auf dem Bild darin. Eine dritte Animation auf transform würde eine der
   beiden überschreiben. Die eigenständigen Eigenschaften translate/rotate/
   scale werden aber VOR transform angewandt und verrechnen sich damit,
   statt es zu ersetzen. Dadurch laufen Eintritt, Drift und Atmen gleichzeitig,
   ohne sich in die Quere zu kommen.

   Einbinden: Klasse .eintritt an den Personen-Container. Die Klasse .sichtbar
   löst aus – gesetzt per IntersectionObserver, siehe eintritt.js.

       <div class="personen bewegt eintritt"> … </div>
   =========================================================================== */

.eintritt {
  --eintritt-weg:     3.5%;      /* Strecke von unten. Prozent der Elementhöhe */
  --eintritt-dauer:   3.8s;    /* Dauer der BEWEGUNG von unten */
  --eintritt-versatz: 180ms;   /* Abstand zwischen den Ebenen */

  /* Deckkraft getrennt von der Bewegung. So wird die Figur zügig deckend,
     gleitet aber weiter ruhig nach oben – man starrt nicht auf ein Gespenst,
     und die Bewegung bleibt trotzdem gelassen. */
  --eintritt-deckkraft-vorn:   1.9s;
  --eintritt-deckkraft-hinten: 2.1s;

  /* Werte eingestellt am 24.08.2026 am fertigen Bild.

     Gleichmäßige Kurve: nahezu linear, sachlich, kein Überschwingen.

     Vorher stand hier cubic-bezier(.16, 1, .3, 1) – eine harte Expo-Kurve,
     die im ersten Zehntel fast die halbe Strecke zurücklegt und dann lange
     ausschleicht. Das wirkt als Ruck, egal wie lang die Gesamtdauer ist.
     Wer den schnellen Antritt doch will, setzt sie wieder ein.

     Kein Überschwingen: Ein Nachfedern ließe die Personen kurz über ihre
     Endlage hinausschießen, was bei Menschen sofort nach Gummi aussieht. */
  --eintritt-kurve: cubic-bezier(.25, .1, .25, 1);
}

.eintritt .personen__ebene {
  opacity: 0;
  translate: 0 var(--eintritt-weg);
  /* Einzeleigenschaften statt der Kurzschreibweise: Die Kurzform würde
     transition-delay zurücksetzen, und die Verzögerungen der einzelnen
     Ebenen weiter unten wären wirkungslos. */
  transition-property: opacity, translate;
  transition-duration: var(--eintritt-deckkraft-hinten), var(--eintritt-dauer);
  transition-timing-function: var(--eintritt-kurve);
}

/* Vordere Person: Deckkraft deutlich schneller als die Bewegung. */
.eintritt .personen__ebene[data-rolle="mitte"] {
  transition-duration: var(--eintritt-deckkraft-vorn), var(--eintritt-dauer);
}

.eintritt.sichtbar .personen__ebene {
  opacity: 1;
  translate: 0 0;
}

/* Reihenfolge: hinten zuerst, vorne zuletzt.
   Die beiden hinteren starten minimal versetzt zueinander, damit sie nicht
   wie ein Block wirken. */
.eintritt .personen__ebene[data-rolle="links"]  { transition-delay: 0ms; }
.eintritt .personen__ebene[data-rolle="rechts"] { transition-delay: calc(var(--eintritt-versatz) * .55); }
.eintritt .personen__ebene[data-rolle="mitte"]  { transition-delay: calc(var(--eintritt-versatz) * 1.6); }

/* Umgekehrte Reihenfolge: vorne zuerst */
.eintritt--vorn-zuerst .personen__ebene[data-rolle="mitte"]  { transition-delay: 0ms; }
.eintritt--vorn-zuerst .personen__ebene[data-rolle="links"]  { transition-delay: var(--eintritt-versatz); }
.eintritt--vorn-zuerst .personen__ebene[data-rolle="rechts"] { transition-delay: calc(var(--eintritt-versatz) * 1.55); }

/* Alle gleichzeitig */
.eintritt--gleichzeitig .personen__ebene { transition-delay: 0ms; }

/* Zum harten Zurücksetzen ohne Überblendung.

   Nötig, weil das bloße Entfernen von .sichtbar keinen Sprung in den
   Startzustand auslöst, sondern eine Überblendung DORTHIN – über die volle
   Dauer. Wer direkt danach .sichtbar wieder setzt, blendet von fast 1
   zurück nach 1 und sieht nichts. Deshalb: Übergang aus, Startzustand
   anwenden, Übergang an, dann auslösen. */
.eintritt.ohne-uebergang .personen__ebene {
  transition: none !important;
}

/* Ohne JavaScript bleiben die Personen sichtbar – niemand darf vor einer
   leeren Fläche stehen. Das löst ein noscript-Block im HTML, NICHT eine
   Klasse hier. Aufbau dort: ein noscript-Element mit einer Stilangabe, die
   .eintritt .personen__ebene auf Deckkraft 1 und translate 0 setzt.

   ACHTUNG beim Kommentieren: In dieser Datei darf die schließende
   style-Zeichenfolge nirgends vorkommen, auch nicht im Kommentar. Wird die
   Datei in ein style-Element eingebettet, beendet der Browser die Stilvorlage
   genau dort – mitten im Kommentar – und alles danach landet als Text im
   Dokument. Genau das ist hier einmal passiert.

   Warum die Absicherung nicht über eine Klasse läuft: Eine Absicherung, die
   die Personen erst sichtbar macht und die JavaScript dann abschaltet, löst
   dabei eine Überblendung von sichtbar nach unsichtbar aus – über die volle
   Dauer. Der Startzustand ist dann nie erreicht, wenn ausgelöst wird, und die
   Animation fällt aus. Der unsichtbare Zustand muss von der allerersten
   Darstellung an gelten. */

/* Sicherheitshalber: manche Rahmen setzen die übliche Browserregel zurück. */
noscript { display: none; }

@media (prefers-reduced-motion: reduce) {
  .eintritt .personen__ebene,
  .eintritt.sichtbar .personen__ebene {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}