/* ============================================
   CYBERUNITED — Bewegungsbänder zwischen den Abschnitten

   Gestaltungsidee: die Seite hat bereits eine Linien-Sprache — die
   Haarlinien, die die Wortmarke im Hero flankieren und an den Rändern
   auslaufen. Die Bänder führen sie fort: eine Linie quer über die Seite,
   auf der sich eine kleine Strichfigur bewegt.

   Richtung und Farbe sind gekoppelt. Was nach rechts läuft, wandert von
   Rot nach Blau — in Richtung des Markenverlaufs. Was nach links fliegt,
   wandert von Blau nach Rot. Der Streifen durchquert also buchstäblich
   den Verlauf.

   Zurückhaltung ist hier keine Geschmacksfrage: die Seite adressiert
   Banken und Versicherungen. Deshalb Strichzeichnung statt Fläche,
   dünne Konturen, gedeckte Deckkraft, lange Laufzeiten. Die Bewegung
   soll auffallen, wenn man hinsieht, und nicht, wenn man liest.
   ============================================ */

.anim-band {
  position: relative;
  height: 4.5rem;
  overflow: hidden;
  /* Die Bänder tragen keine Bedeutung. Sie sind aus dem Textfluss und
     aus der Vorlesereihenfolge genommen (aria-hidden im Markup). */
  pointer-events: none;
}

/* Die Linie: in der Mitte kräftig, an beiden Enden ausgelaufen —
   dasselbe Prinzip wie bei der Wortmarke im Hero. */
.anim-linie {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--color-border) 15%,
    var(--color-border) 85%,
    transparent);
}

.anim-laeufer {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  /* Die Figur sitzt auf der Linie, nicht darauf zentriert. */
  transform: translate(-6rem, -100%);
  will-change: transform;
}

.anim-laeufer svg {
  display: block;
  width: auto;
  height: 2rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

/* === Laufrichtung und Farbwanderung === */

@keyframes anim-nach-rechts {
  from { transform: translate(-6rem, -100%); }
  to   { transform: translate(calc(100vw + 6rem), -100%); }
}

@keyframes anim-nach-links {
  from { transform: translate(calc(100vw + 6rem), -100%) scaleX(1); }
  to   { transform: translate(-6rem, -100%) scaleX(1); }
}

@keyframes anim-farbe-rot-blau {
  from { color: var(--color-red); }
  to   { color: var(--color-blue); }
}

@keyframes anim-farbe-blau-rot {
  from { color: var(--color-blue); }
  to   { color: var(--color-red); }
}

/* Läuft erst, wenn das Band im Blickfeld ist. Spart Rechenzeit auf
   Geräten mit Akku und lässt die Bewegung wie eine Reaktion auf das
   Scrollen wirken statt wie ein Dauerlauf. */
.anim-band .anim-laeufer {
  animation-play-state: paused;
}

.anim-band.im-blick .anim-laeufer {
  animation-play-state: running;
}

.anim-band[data-anim="zahnraeder"] .anim-laeufer {
  animation: anim-nach-rechts 26s linear infinite,
             anim-farbe-rot-blau 26s linear infinite;
}

.anim-band[data-anim="schubkarre"] .anim-laeufer {
  /* 50 % schneller als zuvor: 34s / 1,5 = 22,67s */
  animation: anim-nach-rechts 22.67s linear infinite,
             anim-farbe-rot-blau 22.67s linear infinite;
}

/* 100 % schneller als zuvor: 22s / 2 = 11s. Die Papierflieger sind die
   einzige Figur, die fliegt statt zu rollen oder zu schreiten — bei
   22s wirkte das eher wie Treiben als wie Flug. */
.anim-band[data-anim="flugzeuge"] .anim-laeufer {
  animation: anim-nach-rechts 11s linear infinite,
             anim-farbe-rot-blau 11s linear infinite;
}

.anim-band[data-anim="voegel"] .anim-laeufer {
  animation: anim-nach-links 30s linear infinite,
             anim-farbe-blau-rot 30s linear infinite;
}

/* === Bewegung innerhalb der Figuren === */

@keyframes anim-drehen {
  to { transform: rotate(360deg); }
}

@keyframes anim-drehen-rueck {
  to { transform: rotate(-360deg); }
}

.anim-dreht {
  /* Ohne fill-box bezieht sich transform-origin in SVG auf das
     Wurzelkoordinatensystem, nicht auf das Element — die Zahnraeder
     wuerden dann um einen Punkt ausserhalb kreisen. */
  transform-box: fill-box;
  transform-origin: center;
  animation: anim-drehen 3.2s linear infinite;
}

.anim-dreht-rueck {
  transform-box: fill-box;
  transform-origin: center;
  animation: anim-drehen-rueck 3.2s linear infinite;
}

/* Das Rad der Schubkarre dreht schneller als die Zahnräder — es rollt,
   es greift nicht ineinander. */
.anim-rollt {
  transform-box: fill-box;
  transform-origin: center;
  animation: anim-drehen 1.07s linear infinite;
}

@keyframes anim-schlagen {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.45); }
}

.anim-schlaegt {
  transform-box: fill-box;
  transform-origin: center;
  animation: anim-schlagen 0.9s ease-in-out infinite;
}

.anim-schlaegt-spaet { animation-delay: 0.3s; }
.anim-schlaegt-frueh { animation-delay: 0.15s; }

/* === Schalter in der Navigation === */

.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-light);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.motion-toggle:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

.motion-toggle:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* === Aus === */

/* Der Schalter nimmt alles zurueck, nicht nur die Baender: auch die
   Einblendungen beim Scrollen und die Hover-Bewegungen. "Alles aus"
   soll heissen, was es sagt. */
:root[data-motion="aus"] *,
:root[data-motion="aus"] *::before,
:root[data-motion="aus"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

:root[data-motion="aus"] .anim-band {
  display: none;
}

/* Ohne diese Zeile blieben die Einblendungen unsichtbar haengen,
   weil sie ihre Sichtbarkeit ueber eine Transition bekommen. */
:root[data-motion="aus"] .animate-on-scroll {
  opacity: 1;
  transform: none;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie
   hier gar nicht erst — unabhaengig vom Schalter. Der Schalter kann sie
   danach bewusst wieder einschalten, siehe animations.js. */
@media (prefers-reduced-motion: reduce) {
  .anim-band { display: none; }
  .anim-band *,
  .anim-laeufer { animation: none !important; }
}

:root[data-motion="an"] .anim-band { display: block; }

@media (max-width: 768px) {
  .anim-band { height: 3.5rem; }
  .anim-laeufer svg { height: 1.625rem; }
}


/* ============================================
   Bewegung IN den Figuren

   Die waagrechte Fahrt liegt auf .anim-laeufer. Ein zweites Element
   darin traegt das Wippen — zwei Transformationen auf demselben Element
   wuerden einander ueberschreiben.
   ============================================ */

@keyframes anim-wippen-sanft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.12rem); }
}

/* Der Koerper hebt sich zweimal je Schrittzyklus — einmal pro Bein. */
@keyframes anim-wippen-schritt {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-0.16rem); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-0.16rem); }
}

@keyframes anim-wippen-flug {
  0%, 100% { transform: translateY(0.22rem); }
  50%      { transform: translateY(-0.22rem); }
}

.anim-wippt { display: block; }
.anim-wippt-sanft   { animation: anim-wippen-sanft 3.2s ease-in-out infinite; }
.anim-wippt-schritt { animation: anim-wippen-schritt 1.07s ease-in-out infinite; }
.anim-wippt-flug    { animation: anim-wippen-flug 3.6s ease-in-out infinite; }

/* Das Auf und Ab teilen sich Flieger und Voegel. Nur die Flieger sind
   schneller geworden, deshalb wird der Takt hier gezielt ueberschrieben
   statt in der gemeinsamen Klasse. Die Voegel behalten ihre 3,6s. */
.anim-band[data-anim="flugzeuge"] .anim-wippt-flug {
  animation-duration: 1.8s;
}

/* === Beine ===
   Jedes Bein dreht um die Huefte. Die Huefte ist der Punkt, an dem das
   Bein am Rumpf haengt — bei fill-box also die obere Ecke der eigenen
   Bounding-Box, nicht deren Mitte. */

@keyframes anim-schritt-a {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(-18deg); }
}

@keyframes anim-schritt-b {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(16deg); }
}

.anim-bein-hinten {
  transform-box: fill-box;
  transform-origin: right top;
  animation: anim-schritt-a 1.07s ease-in-out infinite;
}

.anim-bein-vorne {
  transform-box: fill-box;
  transform-origin: left top;
  animation: anim-schritt-b 1.07s ease-in-out infinite;
}

/* Die Speichen drehen mit dem Rad — sonst sieht man dem Kreis die
   Drehung nicht an. */
.anim-rollt-speichen {
  transform-box: fill-box;
  transform-origin: center;
  animation: anim-drehen 1.07s linear infinite;
}

/* === Fluegel der Voegel ===
   Der Fluegel haengt am Rumpfpunkt: beim linken Fluegel ist das die
   rechte Kante seiner Bounding-Box, beim rechten die linke. */

@keyframes anim-schwingen-l {
  0%, 100% { transform: rotate(20deg); }
  45%      { transform: rotate(-26deg); }
}

@keyframes anim-schwingen-r {
  0%, 100% { transform: rotate(-20deg); }
  45%      { transform: rotate(26deg); }
}

.anim-fluegel-l {
  transform-box: fill-box;
  transform-origin: right center;
  animation: anim-schwingen-l 0.62s ease-in-out infinite;
}

.anim-fluegel-r {
  transform-box: fill-box;
  transform-origin: left center;
  animation: anim-schwingen-r 0.62s ease-in-out infinite;
}

.anim-fluegel-spaet { animation-delay: 0.21s; }
.anim-fluegel-frueh { animation-delay: 0.11s; }

/* === Papierflieger: zusammenklappen und aufgehen ===
   Beide Flaechen drehen um die gemeinsame Mittellinie. In der Ebene
   liest sich das als Zusammenklappen zu einem Strich und wieder
   Aufgehen. Der Oberfluegel klappt an seiner Unterkante, der
   Unterfluegel an seiner Oberkante — das ist dieselbe Linie. */

@keyframes anim-klappen-oben {
  0%, 100% { transform: scaleY(1); }
  42%      { transform: scaleY(0.08); }
  58%      { transform: scaleY(0.08); }
}

@keyframes anim-klappen-unten {
  0%, 100% { transform: scaleY(1); }
  42%      { transform: scaleY(0.08); }
  58%      { transform: scaleY(0.08); }
}

/* Mit der Fahrt halbiert (siehe flugzeuge oben) halbiert sich auch das
   Klappen — sonst klappt der Flieger auf der doppelt so kurzen Strecke
   nur noch halb so oft und die Figur verliert ihren Takt. Diese beiden
   Klassen kommen ausschliesslich am Papierflieger vor. */
.anim-klappt-oben {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: anim-klappen-oben 2.1s ease-in-out infinite;
}

.anim-klappt-unten {
  transform-box: fill-box;
  transform-origin: center top;
  animation: anim-klappen-unten 2.1s ease-in-out infinite;
}

.anim-klappt-spaet { animation-delay: 0.7s; }

/* Auch die neuen Bewegungen ruhen, solange das Band nicht im Blick ist. */
.anim-band .anim-wippt,
.anim-band .anim-bein-hinten,
.anim-band .anim-bein-vorne,
.anim-band .anim-fluegel-l,
.anim-band .anim-fluegel-r,
.anim-band .anim-klappt-oben,
.anim-band .anim-klappt-unten,
.anim-band .anim-dreht,
.anim-band .anim-dreht-rueck,
.anim-band .anim-rollt,
.anim-band .anim-rollt-speichen {
  animation-play-state: paused;
}

.anim-band.im-blick .anim-wippt,
.anim-band.im-blick .anim-bein-hinten,
.anim-band.im-blick .anim-bein-vorne,
.anim-band.im-blick .anim-fluegel-l,
.anim-band.im-blick .anim-fluegel-r,
.anim-band.im-blick .anim-klappt-oben,
.anim-band.im-blick .anim-klappt-unten,
.anim-band.im-blick .anim-dreht,
.anim-band.im-blick .anim-dreht-rueck,
.anim-band.im-blick .anim-rollt,
.anim-band.im-blick .anim-rollt-speichen {
  animation-play-state: running;
}