/* ══════════════════════════════════════════════════════════════════════
   KAMUI BEWEGUNG: die Regeln zu bewegung.js
   ══════════════════════════════════════════════════════════════════════ */

/* ── Abschnitte blenden auf ────────────────────────────────────────────
   Kurzer Weg, ruhige Kurve. 18 px reichen: die Bewegung soll gefuehlt,
   nicht gesehen werden.

   ── Warum hier eine ANIMATION steht und keine transition ─────────────

   Vorher lief das Aufblenden ueber `transition: opacity, transform`.
   Gemessen am 25.08. war das Ergebnis uneinheitlich:

     0.75s  der grosse Rest
     0.50s  sechs Kartenbilder auf "Unser Angebot"  (Theme: transition all)
     0.30s  die Schaltflaechen auf jeder Seite      (navigation.css)

   Die Schaltflaechen waren der auffaellige Fall: ihre Regel lautet
   `transition: background-color, color, border-color` - opacity kommt
   darin gar nicht vor. Eine zweite transition-Deklaration ERSETZT die
   erste vollstaendig, sie ergaenzt sie nicht. Also hatten die Knoepfe
   keinen Uebergang auf der Deckung und sprangen hart an, waehrend
   alles daneben weich kam. Genau das Unruhige.

   Ein Wettruesten mit !important waere hier falsch: dann verlieren
   die Knoepfe ihre Farbuebergaenge beim Zeigen.

   Deshalb der Wechsel auf @keyframes. Animation und transition sind
   zwei getrennte Kanaele im Browser: eine Animation ueberschreibt
   keine transition und umgekehrt. Das Aufblenden laeuft also ueberall
   mit derselben Dauer und Kurve, und jede fremde transition bleibt
   unangetastet.

   Die Regel greift nur, wenn JavaScript das Attribut gesetzt hat.
   Ohne JavaScript bleibt alles sichtbar - Inhalt darf nie von einem
   Skript abhaengen, das vielleicht nicht laedt. */
[data-kamui-auf] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

[data-kamui-auf="da"] {
  animation: kamui-auf 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  /* Nach dem Aufblenden die Bremse loesen: will-change dauerhaft
     stehen zu lassen kostet Speicher auf jedem Element der Seite. */
  will-change: auto;
}

@keyframes kamui-auf {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ── Der Schleier fuer Seitenwechsel ───────────────────────────────────
   Liegt ueber dem INHALT, ist in Tusche gehalten und nimmt dem Wechsel den
   Weissblitz. Er faengt jeden Klick ab, deshalb pointer-events: none -
   sonst waere die Seite nach dem Ankommen unbedienbar.

   Z-STUFE, gemessen 26.08.: der Schleier lag mit 9999 UEBER der Kopfzeile
   (9000). Da er erst per JavaScript gebaut wird, erschien er NACH der
   Leiste und legte sich nachtraeglich darueber: bei 586ms war die ganze
   Navigation abgedunkelt, danach blendete sie wieder auf. Im Bild sah das
   aus wie ein Aufblitzen der Leiste, war aber der Vorhang davor.
   Franky will die Leiste durchgehend sichtbar, also gehoert sie NICHT
   unter den Vorhang: Schleier auf 8500, unter Kopfzeile (9000) und unter
   die Glasplatte (8999). Der Weissblitz-Schutz fuer den Seiteninhalt
   bleibt dabei vollstaendig erhalten - der Inhalt liegt weit darunter. */
.kamui-schleier {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: #161B19;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kamui-schleier.weg {
  opacity: 0;
}

/* ── Ruhiger Modus ─────────────────────────────────────────────────────
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt den
   Inhalt ohne Weg und ohne Schleier. */
@media (prefers-reduced-motion: reduce) {
  [data-kamui-auf],
  [data-kamui-auf="da"] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .kamui-schleier {
    display: none !important;
  }
}

/* ── Von links und von rechts ──────────────────────────────────────────

   Franky, 25.08.: die Teammitglieder sollen von links und rechts
   hereinkommen.

   Dieselbe Familie wie das Aufblenden oben, nur eine andere Achse:
   gleiche Dauer, gleiche Kurve, gleicher Kanal (@keyframes statt
   transition, aus den Gruenden weiter oben). Die Richtung setzt
   v2-baulig.js ueber `data-kamui-seite`, den Versatz zwischen Bild
   und Text setzt bewegung.js ueber die Geschwisterreihenfolge.

   54px statt der 18px in der Senkrechten. Ein halbbreiter Bildblock
   braucht mehr Weg als eine Zeile, sonst ist die Richtung nicht zu
   erkennen - und die Richtung ist hier der Punkt. Drei Mal die
   Grundeinheit, damit es ein Vielfaches bleibt und keine neue Zahl. */
[data-kamui-auf][data-kamui-seite="links"] {
  transform: translateX(-54px);
}

[data-kamui-auf][data-kamui-seite="rechts"] {
  transform: translateX(54px);
}

[data-kamui-auf="da"][data-kamui-seite="links"] {
  animation-name: kamui-auf-links;
}

[data-kamui-auf="da"][data-kamui-seite="rechts"] {
  animation-name: kamui-auf-rechts;
}

@keyframes kamui-auf-links {
  from { opacity: 0; transform: translateX(-54px); }
  to   { opacity: 1; transform: none; }
}

@keyframes kamui-auf-rechts {
  from { opacity: 0; transform: translateX(54px); }
  to   { opacity: 1; transform: none; }
}

/* ── Und dieselbe Bewegung in der Tiefe ────────────────────────────────

   Franky, 25.08.: "Wir wollen ja jetzt eigentlich die anderen Sachen
   3D animieren. Wollen wir das hier auch 3D animieren?" - "Ja."

   Der Weg bleibt derselbe: 54px zur Seite, dieselben 0,75s, dieselbe
   Kurve, dasselbe `data-kamui-seite` aus v2-baulig.js. Dazu kommen
   zwei Achsen:

       translateZ(-90px)   der Block steht hinter der Seitenebene und
                           kommt nach vorn
       rotateY(±9°)        er steht schraeg und dreht sich gerade

   DIE DREHRICHTUNG FOLGT DER HERKUNFT, nicht dem Zufall. Ein Block,
   der von links kommt, haengt an seiner LINKEN Kante: die rechte steht
   noch im Raum zurueck und schwingt nach vorn, wie ein Blatt, das
   aufgeschlagen wird. Von rechts spiegelverkehrt. Deshalb gehoert zu
   jeder Richtung ein eigener transform-origin. Mit dem Ursprung in der
   Mitte kaeme eine Wippe heraus, keine Ankunft.

       rotateY(θ) schiebt bei θ > 0 die rechte Kante nach hinten
       (z = -x·sinθ). Also links +9°, rechts -9°.

   NUR HIER, nicht ueberall. `perspective` gehoert an das Elternteil,
   also an den Zeilencontainer, nicht an die zwei Haelften: sonst
   bekaeme jede Haelfte ihren eigenen Fluchtpunkt und die zwei Drehungen
   sahen aus wie zwei verschiedene Raeume. Derselbe Grund wie beim
   Bildstapel in referenzen.css.

   1400px, nicht die 1000px des Bildstapels: der Zeilencontainer ist
   mit 1248px fast doppelt so breit wie die Bildsaeule dort. Bei gleicher
   Brennweite stuende die aeussere Kante des Bildes stark verzerrt.

   90px Tiefe zu 54px Seite: die Tiefe muss den groesseren Weg haben,
   sonst ist sie neben der Seitwaertsbewegung nicht zu sehen. Es bleibt
   ein Vielfaches der Grundeinheit von 18px. */
#kamui-menschen .art-fr-content-section-alpha__inner {
  perspective: 1400px;
}

#kamui-menschen [data-kamui-auf][data-kamui-seite="links"] {
  transform-origin: left center;
  transform: translateX(-54px) translateZ(-90px) rotateY(9deg);
}

#kamui-menschen [data-kamui-auf][data-kamui-seite="rechts"] {
  transform-origin: right center;
  transform: translateX(54px) translateZ(-90px) rotateY(-9deg);
}

#kamui-menschen [data-kamui-auf="da"][data-kamui-seite="links"] {
  animation-name: kamui-auf-links-tief;
}

#kamui-menschen [data-kamui-auf="da"][data-kamui-seite="rechts"] {
  animation-name: kamui-auf-rechts-tief;
}

@keyframes kamui-auf-links-tief {
  from { opacity: 0; transform: translateX(-54px) translateZ(-90px) rotateY(9deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes kamui-auf-rechts-tief {
  from { opacity: 0; transform: translateX(54px) translateZ(-90px) rotateY(-9deg); }
  to   { opacity: 1; transform: none; }
}

/* Ein Element, das 54px links neben seiner Spalte startet, verbreitert
   das Dokument und erzeugt einen waagerechten Scrollbalken - auf
   schmalen Geraeten, wo die Bloecke volle Breite haben, sofort.

   `clip` statt `hidden`: `overflow-x: hidden` zwingt die Senkrechte
   auf `auto` und macht aus der Sektion einen Scrollbehaelter. `clip`
   schneidet nur ab. Die Zeile mit `hidden` steht als Rueckfall fuer
   Browser ohne `clip` davor. */
#kamui-menschen {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Wer im System weniger Bewegung eingestellt hat, bekommt den Inhalt
   ohne Weg. bewegung.js setzt in diesem Fall sofort "da", die
   Animation liefe also trotzdem - nur alle drei auf einmal. */
@media (prefers-reduced-motion: reduce) {
  [data-kamui-auf][data-kamui-seite] { transform: none; }
  [data-kamui-auf="da"][data-kamui-seite] {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* Die Regeln fuer die Tiefe stehen auf einer ID und schlagen die
     zwei Zeilen darueber sonst. Sie brauchen ihre eigene Ausnahme,
     auf derselben Spezifitaet. */
  #kamui-menschen .art-fr-content-section-alpha__inner { perspective: none; }
  #kamui-menschen [data-kamui-auf][data-kamui-seite] { transform: none; }
  #kamui-menschen [data-kamui-auf="da"][data-kamui-seite] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}