/* lon3s — weiche Seitenwechsel (22.10.)
 * Cross-Document View Transitions: alte Seite blendet aus (leicht nach oben),
 * neue blendet weich ein (von leicht unten). Die Navigationsleiste bleibt stehen.
 * Nur im oeffentlichen Layout geladen (templates/layout.html.twig), NICHT im
 * Admin. Browser ohne Unterstuetzung wechseln wie bisher sofort;
 * "Bewegung reduzieren" im System schaltet die Animation ab.
 */
@view-transition { navigation: auto; }
.site-nav { view-transition-name: site-nav; }
@keyframes vt-raus { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(12px); } }
::view-transition-old(root) { animation: 240ms cubic-bezier(0.4, 0, 1, 1) both vt-raus; }
::view-transition-new(root) { animation: 460ms cubic-bezier(0.2, 0.7, 0.2, 1) 90ms both vt-rein; }
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav) { display: none; }
::view-transition-new(site-nav) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Ersatz fuer Browser ohne seitenuebergreifende View Transitions (z. B. Firefox):
 * Klasse vt-ersatz setzt das Inline-Script im <head> (templates/layout.html.twig).
 * Neue Seite blendet ein, beim Klick auf einen internen Link blendet die alte
 * erst aus (vt-weg), dann wird gewechselt. Navigationsleiste bleibt stehen. */
/* WICHTIG: main selbst NICHT verschieben (transform) — das Knotenfeld-Canvas
 * der Startseite ist position:fixed IN main; ein transform auf main macht main
 * zum Bezugsrahmen (Hintergrund verrutscht, Explosion sitzt zu tief). Daher:
 * main nur Deckkraft, die Bewegung bekommen die Inhaltsbloecke (ohne Canvas).
 * Fill "backwards" statt "both": nach dem Einblenden bleibt nichts haengen. */
@keyframes vt-ein-deck { from { opacity: 0; } }
@keyframes vt-ein-hoch { from { transform: translateY(12px); } }
@keyframes vt-aus-deck { to { opacity: 0; } }
@keyframes vt-aus-hoch { to { transform: translateY(-8px); } }
@media (prefers-reduced-motion: no-preference) {
  .vt-ersatz main, .vt-ersatz .site-footer { animation: 460ms cubic-bezier(0.2, 0.7, 0.2, 1) 40ms backwards vt-ein-deck; }
  .vt-ersatz main > :not(canvas):not(.arcade):not(.lightbox) { animation: 460ms cubic-bezier(0.2, 0.7, 0.2, 1) 40ms backwards vt-ein-hoch; }
  .vt-ersatz.vt-weg main, .vt-ersatz.vt-weg .site-footer { animation: 220ms cubic-bezier(0.4, 0, 1, 1) forwards vt-aus-deck; }
  .vt-ersatz.vt-weg main > :not(canvas):not(.arcade):not(.lightbox) { animation: 220ms cubic-bezier(0.4, 0, 1, 1) forwards vt-aus-hoch; }
}