/* ============================================================
   Entwurf-Wechsler – der Seitenübergang

   Gehört zu `wechsler.js` und wird im Kopf jedes Entwurfs verlinkt,
   direkt nach dessen eigenem Stylesheet.

   Warum als eigene Datei und nicht im Skript: Ein Übergang zwischen
   zwei Seiten braucht die Zustimmung von beiden - der alten und der
   neuen. Der Browser sieht sich diese Zustimmung an, während er die
   neue Seite einliest. Regeln, die erst ein Skript nachschiebt, kämen
   dafür zu spät und der Browser blätterte hart um.

   Die Richtung setzt das Skript als `data-wechsel` an das
   <html>-Element: "vor" für den nächsten Entwurf, "zurueck" für den
   vorigen. Ohne das liefe in beide Richtungen dieselbe Bewegung, und
   man verlöre beim Blättern das Gefühl, wo man gerade ist.

   Kann der Browser keine Seitenübergänge (alles außer Chrome und Edge,
   Stand September 2026), passiert hier nichts. Die Pfeile
   funktionieren trotzdem, nur ohne Gleiten.
   ============================================================ */

@view-transition { navigation: auto; }

@keyframes wechsel-raus-links  { to   { transform: translateX(-20%); opacity: 0; } }
@keyframes wechsel-rein-rechts { from { transform: translateX(100%); } }
@keyframes wechsel-raus-rechts { to   { transform: translateX(20%);  opacity: 0; } }
@keyframes wechsel-rein-links  { from { transform: translateX(-100%); } }

/* Die neue Seite liegt über der alten, damit sie wirklich
   hereinschiebt und nicht durchscheint. */
::view-transition-new(root) { z-index: 2; }
::view-transition-old(root) { z-index: 1; }

html[data-wechsel="vor"]::view-transition-old(root) {
  animation: wechsel-raus-links 300ms cubic-bezier(.4, 0, .2, 1) both;
}
html[data-wechsel="vor"]::view-transition-new(root) {
  animation: wechsel-rein-rechts 300ms cubic-bezier(.4, 0, .2, 1) both;
}
html[data-wechsel="zurueck"]::view-transition-old(root) {
  animation: wechsel-raus-rechts 300ms cubic-bezier(.4, 0, .2, 1) both;
}
html[data-wechsel="zurueck"]::view-transition-new(root) {
  animation: wechsel-rein-links 300ms cubic-bezier(.4, 0, .2, 1) both;
}

/* Wer in seinem System weniger Bewegung eingestellt hat, bekommt den
   harten Schnitt - das ist genau das, wofür die Einstellung da ist. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}