/* ===========================================================================
   bewegung.css - Dezente Bewegung nach Konzept A (P9)

   VIER GRUNDSAETZE, die in dieser Datei ohne Ausnahme gelten:

   1. Bewegung ist eine Zugabe. Kein Inhalt haengt von ihr ab.
   2. Nichts wird dauerhaft unsichtbar gemacht. Wo mit Deckkraft gearbeitet
      wird, geschieht das ausschliesslich unter der Klasse .js-reveal, die
      allein das Skript setzt - und die es bei prefers-reduced-motion gar
      nicht erst setzt.
   3. Ohne JavaScript steht alles an seinem Platz und ist vollstaendig
      sichtbar. Die Figuren atmen dann trotzdem: ihre Bewegung ist reines
      CSS und braucht kein Skript.
   4. Bei prefers-reduced-motion steht alles still.

   Wird als LETZTE Stilangabe geladen, nach sektionen.css.
   Keine externen URLs, keine Bibliothek.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Die fuenf Figuren - "Atem"

   Reines CSS, wie in Konzept A vorgesehen. Die fuenf Dateien tragen alle
   dieselbe viewBox wie das ganze Band und liegen deckungsgleich
   uebereinander; dadurch steht jede Figur exakt an ihrer urspruenglichen
   Stelle.

   Bewegt wird ausschliesslich "transform" - das laeuft im Compositor und
   loest kein Neuberechnen des Layouts aus. Es gibt deshalb auch keine
   Layoutverschiebung.
   ------------------------------------------------------------------------ */
.signaturleiste__figuren {
  position: relative;
  width: clamp(11rem, 30vw, 20rem);
  /* Das Seitenverhaeltnis des Bandes. Es haelt den Platz frei, bevor die
     Bilder geladen sind - sonst spraenge das Layout nach. */
  aspect-ratio: 6091 / 1099;
}

.signaturleiste__figur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Waagrecht die Mitte der jeweiligen Figur, senkrecht ihr unterer Rand.
     Die Werte stammen aus design/logo/figuren-manifest.json. So richtet
     sich jede Figur auf, statt zu kippen. */
  transform-origin: var(--drehpunkt-x) var(--drehpunkt-y);
}

.signaturleiste__figur--1 {
  --drehpunkt-x: 6.25%;
  --drehpunkt-y: 100%;
  --figur-versatz: 0;
}

.signaturleiste__figur--2 {
  --drehpunkt-x: 26.55%;
  --drehpunkt-y: 100%;
  --figur-versatz: 1;
}

.signaturleiste__figur--3 {
  --drehpunkt-x: 49.52%;
  --drehpunkt-y: 90.22%;
  --figur-versatz: 2;
}

.signaturleiste__figur--4 {
  --drehpunkt-x: 71.16%;
  --drehpunkt-y: 94.29%;
  --figur-versatz: 3;
}

.signaturleiste__figur--5 {
  --drehpunkt-x: 91.36%;
  --drehpunkt-y: 93.52%;
  --figur-versatz: 4;
}

/* Das Aufrichten - laeuft einmal beim Laden.

   Es nutzt die EINZELNEN Transform-Eigenschaften `rotate` und `translate`,
   nicht die Sammel-Eigenschaft `transform`. Das ist der Kniff: So kann der
   Atem unten gleichzeitig auf `transform` laufen, ohne dass sich beide
   ueberschreiben. Wuerden beide `transform` animieren, gaebe es nur eine
   Bewegung - die zuletzt genannte. */
@keyframes figur-aufrichten {
  from {
    rotate: -7deg;
    translate: 0 6%;
  }

  to {
    rotate: 0deg;
    translate: 0 0;
  }
}

/* Der Atem - laeuft endlos und ist deutlich sichtbar.

   Vier Punkte statt zwei: hoch und leicht nach rechts, zurueck und nach
   links, nochmals hoch, dann in die Ausgangslage. Dadurch hat die Bewegung
   keine erkennbare Mitte, an der sie zu stehen scheint - sie laeuft
   durchgehend weiter. Anfang und Schluss sind identisch, deshalb gibt es
   keinen Sprung. */
@keyframes figur-atmen {
  0%,
  100% {
    transform: none;
  }

  20% {
    transform: translateY(-4%) scale(1.05) rotate(1.4deg);
  }

  45% {
    transform: translateY(-1.5%) scale(1.02) rotate(-1.2deg);
  }

  70% {
    transform: translateY(-3.2%) scale(1.04) rotate(0.8deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .signaturleiste__figur {
    animation:
      figur-aufrichten 1.3s var(--kurve-standard) backwards,
      figur-atmen 6s ease-in-out infinite;
    /* Das Aufrichten mit kleinem Versatz von links nach rechts.

       Der Atem dagegen beginnt bei allen fuenf sofort - mit NEGATIVEM
       Versatz. Eine negative Verzoegerung startet die Bewegung nicht
       spaeter, sondern mitten drin: Figur 1 bei 0 Sekunden, Figur 2 schon
       bei 1,2 Sekunden und so fort. Fuenf Figuren mal 1,2 Sekunden ergeben
       genau die 6 Sekunden eines Durchlaufs. Daraus wird eine Welle, die
       ohne Anfang und ohne Ende durch die Gruppe laeuft - keine Figur steht
       je still, und im Gleichschritt sind sie nie. */
    animation-delay:
      calc(var(--figur-versatz) * 0.22s),
      calc(var(--figur-versatz) * -1.2s);
  }
}

/* ---------------------------------------------------------------------------
   2. Reveal - sanftes Einblenden beim Hereinscrollen

   ENTSCHEIDEND: Die Vorbereitung haengt an .js-reveal auf dem
   <html>-Element. Diese Klasse setzt ausschliesslich reveal.js, und zwar
   erst nachdem es geprueft hat, dass IntersectionObserver vorhanden ist
   und keine reduzierte Bewegung gewuenscht wird.

   Ohne JavaScript gibt es die Klasse nicht, und damit greift keine einzige
   Regel dieses Abschnitts. Die Inhalte sind dann schlicht da - sie waren
   nie versteckt.
   ------------------------------------------------------------------------ */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--dauer-lang) var(--kurve-standard),
    transform var(--dauer-lang) var(--kurve-standard);
}

.js-reveal [data-reveal].ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Zweite Sicherung. Sollte die Klasse je gesetzt sein, obwohl reduzierte
   Bewegung gewuenscht ist - etwa weil die Einstellung nach dem Laden
   geaendert wurde -, ist sofort alles sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Wer mit der Tastatur in einen noch nicht eingeblendeten Bereich springt,
   muss ihn sehen. Das ist kein Randfall: die Inhaltsuebersicht und die
   Sprungmarken tun genau das. */
.js-reveal [data-reveal]:focus-within {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
   3. Parallaxe - sehr zurueckhaltend

   Auch hier haengt alles an einer Klasse, die nur das Skript setzt. Ohne
   sie sitzen die Bilder exakt so im Rahmen wie bisher.

   Die Ueberhoehe von 12 Prozent und der Versatz von -6 Prozent gehoeren
   zusammen: das Bild ist oben und unten so viel groesser als sein Rahmen,
   dass der Versatz nie einen leeren Rand freigibt. Das Skript begrenzt
   seinen Ausschlag zusaetzlich auf die Haelfte davon.
   ------------------------------------------------------------------------ */
@media (min-width: 48rem) {
  .js-parallaxe [data-parallaxe-rahmen] {
    position: relative;
    overflow: hidden;
  }

  /* Das <picture> liegt zwischen Rahmen und Bild und traegt im
     Grundlayout die volle Rahmengroesse. Es wird hier zum Bezugspunkt der
     absoluten Positionierung - sonst richtete sich das Bild am
     Seitenkoerper aus. */
  .js-parallaxe [data-parallaxe-rahmen] picture {
    position: relative;
  }

  .js-parallaxe [data-parallaxe] {
    position: absolute;
    top: -6%;
    left: 0;
    height: 112%;
    /* will-change nur hier, nicht global: es kostet Speicher und soll
       genau die Elemente betreffen, die sich wirklich bewegen. */
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-parallaxe [data-parallaxe] {
    position: static;
    height: 100%;
    top: 0;
    transform: none !important;
    will-change: auto;
  }
}