/* ============================================================
   Page Transitions — View Transitions API (Cross-Document)
   Sanfter Cross-Fade beim Seitenwechsel bei Full-Page-Navigation
   (same-origin, keine Pjax-Swaps auf dieser Seite). Progressive
   Enhancement: Browser ohne Support navigieren ganz normal ohne
   Effekt. Muss im globalen Bundle auf ALT- und NEU-Seite vorhanden
   sein — ist es, da global geladen.
   ============================================================ */
@view-transition {
  navigation: auto;
}

/* Deutlich sichtbarer, gerichteter Übergang statt reinem Cross-Fade:
   - Alte Seite: ausblenden + leicht nach oben wegdriften.
   - Neue Seite: von unten hereingleiten + einblenden.
   Beide bewegen sich nach oben → zusammenhängendes "Hochschieben"-Gefühl. */
::view-transition-old(root) {
  animation: vt-leave 300ms ease both;
}
::view-transition-new(root) {
  animation: vt-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vt-leave {
  to {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
}
@keyframes vt-enter {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* A11y: "Bewegung reduzieren" → kein Fade, sofortiger Seitenwechsel.
   Der globale Reduced-Motion-Block (02-base.css) matcht die
   ::view-transition-*-Pseudos NICHT (kein *-Match im eigenen Pseudo-
   Baum), daher hier explizit die Animation abschalten. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}