/* ================================================================
   View Transitions  ·  Schicht 1 (Crossfade) + Schicht 2 (Breitengrad)
   ----------------------------------------------------------------
   Globaler Cross-Document-Crossfade. Bei Navigation zwischen Ortsbuch-
   und Undercover-Seiten mit bekanntem Breitengrad wird der Crossfade
   durch eine Richtungsanimation ergaenzt: nach Norden slidet die alte
   Seite leicht nach unten weg, die neue von unten herein; nach Sueden
   umgekehrt. Distanz: 6 vh. Easing: cubic-bezier(.32,.72,0,1).
   ================================================================ */

@view-transition {
  navigation: auto;
}

/* Default-Crossfade angleichen (Chrome-Default ist ~250 ms). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Breitengrad-Richtung ----------------------------------------
   Wird nur aktiv, wenn view-transitions.js auf html die Klasse
   .vt-north oder .vt-south setzt. Reduced-Motion respektiert. */

@media (prefers-reduced-motion: no-preference) {

  /* Nach Norden: alt sinkt nach unten weg, neu steigt von unten hoch. */
  :root.vt-north::view-transition-old(root) {
    animation: vt-slide-out-down 380ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  :root.vt-north::view-transition-new(root) {
    animation: vt-slide-in-up 380ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  /* Nach Sueden: alt nach oben, neu von oben herein - leicht knapper. */
  :root.vt-south::view-transition-old(root) {
    animation: vt-slide-out-up 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  :root.vt-south::view-transition-new(root) {
    animation: vt-slide-in-down 340ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  @keyframes vt-slide-out-down {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(6vh);  opacity: 0; }
  }
  @keyframes vt-slide-in-up {
    from { transform: translateY(6vh);  opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  @keyframes vt-slide-out-up {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(-6vh); opacity: 0; }
  }
  @keyframes vt-slide-in-down {
    from { transform: translateY(-6vh); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}

/* Reduced-Motion: alle Uebergaenge auf instant. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}