/* Sanfter Uebergang zwischen Startseite und Geschichte-Seite.
   Beide Seiten binden diese Datei ein - dokumentuebergreifende View
   Transitions wirken nur, wenn Ausgangs- und Zielseite sie anmelden.

   Zwei Wege, damit es in jedem Browser ruhiger wird:
   1. View Transitions (Chrome, Edge, Safari): der Browser blendet das
      alte Bild aus und das neue herein. Das harte Umschalten entfaellt.
   2. Ohne diese Technik (derzeit Firefox) faehrt der Inhalt der neuen
      Seite per Keyframe herein. Nicht dasselbe, aber kein Schnitt.

   Wer im System weniger Bewegung eingestellt hat, bekommt keins von
   beidem - die Seite erscheint dann sofort. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: uebergang-weg 240ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: uebergang-her 420ms cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes uebergang-weg {
  to {
    opacity: 0;
  }
}

@keyframes uebergang-her {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Rueckfall fuer Browser ohne View Transitions. Nur die Geschichte-Seite
   traegt diese Klassen, die Startseite bleibt davon unberuehrt. */
@supports not (view-transition-name: none) {
  .gs-auftakt {
    animation: uebergang-her 420ms cubic-bezier(0, 0, 0.2, 1) both;
  }
  .rt-inhalt {
    animation: uebergang-her 460ms cubic-bezier(0, 0, 0.2, 1) both;
    animation-delay: 70ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .gs-auftakt,
  .rt-inhalt {
    animation: none !important;
  }
}