/* ===========================================================================
   Bewegung
   ---------------------------------------------------------------------------
   Subtile Bewegung für den Personen-Container, getrennt einstellbar nach

     VORNE   – die mittlere Person, sie steht am nächsten
     HINTEN  – die beiden äußeren Personen

   Jede Gruppe hat Drift (Handkamera), Neigung, Tempo und Atmen.

   Warum überhaupt zwei Gruppen und nicht drei Einzelwerte: Bei einer
   Kamerabewegung verschiebt sich Nahes stärker als Fernes. Diese Staffelung
   ist es, die aus dem Wackeln eine glaubwürdige Kamera macht statt drei
   zappelnder Ausschnitte. Die Trennung nach Tiefe bildet genau das ab –
   und lässt sich trotzdem frei dosieren.

   Die Werte sind so normiert, dass gleiche Zahlen auch gleiche Bewegung
   ergeben: --drift-hinten: .95% bewegt die hinteren genauso weit wie
   --drift-vorn: .95% die vordere. Die Staffelung entsteht allein dadurch,
   dass hinten kleiner eingestellt ist.

   Werte eingestellt am 24.08.2026 am fertigen Bild.

   Einbinden: Klasse .bewegt an den Personen-Container.
       <div class="personen bewegt"> … </div>
   =========================================================================== */

.bewegt {
  /* --- VORNE (mittlere Person) ------------------------------------------ */
  --drift-vorn:       .75%;   /* Ausschlag, Prozent der Containerbreite */
  --kipp-vorn:        .14deg; /* Neigung. Über .3deg wirkt es schnell wacklig */
  --tempo-vorn:       2.1;      /* Zeitmaß, dimensionslos. Größer = langsamer */
  --puls-vorn:        1.012;  /* Atmen: Endgröße */
  --puls-tempo-vorn:  8.5s;

  /* --- HINTEN (äußere Personen) ----------------------------------------- */
  --drift-hinten:      1.2%;
  --kipp-hinten:       .24deg;
  --tempo-hinten:      2.5;
  --puls-hinten:       1.008;
  --puls-tempo-hinten: 6.5s;
}

.bewegt .personen__ebene {
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Die Laufzeiten sind teilerfremd (13 / 17 / 19), damit sich die drei
   Bewegungen nie wieder auf denselben Takt treffen – sonst entstünde ein
   sichtbarer Rhythmus im Bild. Die negativen Verzögerungen starten mitten
   in der Bewegung, damit nicht alle drei gemeinsam aus der Ruhelage anfahren. */
.bewegt .personen__ebene[data-rolle="mitte"] {
  animation-name: drift-vorn;
  animation-duration: calc(var(--tempo-vorn) * 13s);
}

.bewegt .personen__ebene[data-rolle="links"] {
  animation-name: drift-hinten-a;
  animation-duration: calc(var(--tempo-hinten) * 17s);
  animation-delay: calc(var(--tempo-hinten) * -4s);
}

.bewegt .personen__ebene[data-rolle="rechts"] {
  animation-name: drift-hinten-b;
  animation-duration: calc(var(--tempo-hinten) * 19s);
  animation-delay: calc(var(--tempo-hinten) * -9s);
}

/* Das Atmen sitzt auf dem BILD, nicht auf der Ebene – sonst teilten sich Drift
   und Puls dieselbe transform-Eigenschaft und die zweite Animation überschriebe
   die erste. Zwei verschachtelte Elemente, zwei unabhängige Transformationen.

   transform-origin unten: Die Personen sind an der Unterkante angeschnitten.
   Wüchse die Figur aus ihrer Mitte, wanderte die Unterkante mit und gäbe den
   Hintergrund frei. Von unten heraus bleibt sie verankert und richtet sich auf,
   was zugleich natürlicher aussieht – wie beim Einatmen. */
.bewegt .personen__ebene img {
  transform-origin: center bottom;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.bewegt .personen__ebene[data-rolle="mitte"] img {
  animation-name: atmen-vorn;
  animation-duration: var(--puls-tempo-vorn);
}

/* Die beiden hinteren atmen leicht versetzt – gleiche Dauer sähe aus wie
   ein gemeinsames Pumpen. Der Faktor 1.27 ist krumm, damit sie sich nicht
   nach kurzer Zeit wieder treffen. */
.bewegt .personen__ebene[data-rolle="links"] img {
  animation-name: atmen-hinten;
  animation-duration: var(--puls-tempo-hinten);
}

.bewegt .personen__ebene[data-rolle="rechts"] img {
  animation-name: atmen-hinten;
  animation-duration: calc(var(--puls-tempo-hinten) * 1.27);
  animation-delay: calc(var(--puls-tempo-hinten) * -.4);
}

/* --- Bewegungsbahnen -------------------------------------------------------
   Alle drei laufen im gleichen Richtungsmuster – gleiche Vorzeichen an
   denselben Stellen. Nur so liest das Auge es als eine Kamera. Die Bahnen
   unterscheiden sich in der Feinform, damit keine zwei identisch aussehen.
   Die Faktoren sind je Bahn auf denselben Höchstwert normiert. */

@keyframes drift-vorn {
   0%, 100% { transform: translate(0, 0) rotate(0deg); }
  22% { transform: translate(calc(var(--drift-vorn) *  .85), calc(var(--drift-vorn) * -.55))
                   rotate(calc(var(--kipp-vorn) *  .8)); }
  47% { transform: translate(calc(var(--drift-vorn) *  .30), calc(var(--drift-vorn) *  .70))
                   rotate(calc(var(--kipp-vorn) * -.6)); }
  71% { transform: translate(calc(var(--drift-vorn) * -.75), calc(var(--drift-vorn) *  .20))
                   rotate(calc(var(--kipp-vorn) * -.9)); }
  88% { transform: translate(calc(var(--drift-vorn) * -.25), calc(var(--drift-vorn) * -.45))
                   rotate(calc(var(--kipp-vorn) *  .35)); }
}

@keyframes drift-hinten-a {
   0%, 100% { transform: translate(0, 0) rotate(0deg); }
  22% { transform: translate(calc(var(--drift-hinten) *  .85), calc(var(--drift-hinten) * -.58))
                   rotate(calc(var(--kipp-hinten) *  .85)); }
  47% { transform: translate(calc(var(--drift-hinten) *  .28), calc(var(--drift-hinten) *  .72))
                   rotate(calc(var(--kipp-hinten) * -.55)); }
  71% { transform: translate(calc(var(--drift-hinten) * -.78), calc(var(--drift-hinten) *  .18))
                   rotate(calc(var(--kipp-hinten) * -.90)); }
  88% { transform: translate(calc(var(--drift-hinten) * -.22), calc(var(--drift-hinten) * -.48))
                   rotate(calc(var(--kipp-hinten) *  .30)); }
}

@keyframes drift-hinten-b {
   0%, 100% { transform: translate(0, 0) rotate(0deg); }
  22% { transform: translate(calc(var(--drift-hinten) *  .82), calc(var(--drift-hinten) * -.52))
                   rotate(calc(var(--kipp-hinten) * -.80)); }
  47% { transform: translate(calc(var(--drift-hinten) *  .33), calc(var(--drift-hinten) *  .68))
                   rotate(calc(var(--kipp-hinten) *  .58)); }
  71% { transform: translate(calc(var(--drift-hinten) * -.72), calc(var(--drift-hinten) *  .22))
                   rotate(calc(var(--kipp-hinten) *  .88)); }
  88% { transform: translate(calc(var(--drift-hinten) * -.28), calc(var(--drift-hinten) * -.42))
                   rotate(calc(var(--kipp-hinten) * -.32)); }
}

@keyframes atmen-vorn {
   0%, 100% { transform: scale(1); }
  50%       { transform: scale(var(--puls-vorn)); }
}

@keyframes atmen-hinten {
   0%, 100% { transform: scale(1); }
  50%       { transform: scale(var(--puls-hinten)); }
}

/* Bewegung kann Übelkeit auslösen. Hier hört sie vollständig auf – das Bild
   bleibt in seiner Ruhelage stehen und verliert nichts an Aussage. */
@media (prefers-reduced-motion: reduce) {
  .bewegt .personen__ebene,
  .bewegt .personen__ebene img { animation: none; }
}