/* ----- Urbar-Seitenübergang (Startseite/Karte/Detailsuche) -----
   Sehr zurückhaltender Eintritts-Effekt beim Wechsel zwischen den drei Urbar-Ansichten: der
   Hauptinhalt UNTERHALB der Bereichsnavigation (#content-outer-wrap, siehe ritterorden.php/
   ritterorden-karte.php/ritterorden-suche.php) blendet beim Laden der Zielseite minimal aus der
   Richtung des Navigationsziels ein. #top-nav und .urbar-subnav bleiben davon unberührt, da beide
   außerhalb von #content-outer-wrap liegen und hier nicht angesprochen werden.
   Die Richtung (links/rechts) wird von einem winzigen, synchronen Inline-Skript im <head> jeder der
   drei Seiten bestimmt (Reihenfolge Startseite=0 -> Karte=1 -> Detailsuche=2, siehe
   ritterorden-subnav.php) und als Klasse auf <html> gesetzt, BEVOR dieser Bereich gerendert wird -
   kein Framework, keine Abhängigkeit, nur zwei @keyframes plus eine Klasse pro Richtung. Ohne
   bekannte vorherige Seite (Direktaufruf, erster Tab-Aufruf, Reload) setzt das Inline-Skript keine
   Klasse, der Inhalt erscheint dann sofort normal ohne Übergang - siehe Kommentar dort.
   Eigene, neue Datei statt Aufnahme in ritter.css/ritterkarte.css/ritterorden-statistik.css: die drei
   Seiten laden ohnehin kein gemeinsames CSS (siehe .secondary-nav-link/.urbar-subnav-Kommentare in
   diesen Dateien), eine identische Regel dreifach zu duplizieren wäre hier aber reine Redundanz ohne
   Nutzen, da alle drei Seiten exakt dasselbe Übergangsverhalten benötigen. */

@keyframes urbar-inhalt-einblenden-rechts {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes urbar-inhalt-einblenden-links {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

html.urbar-enter-right #content-outer-wrap {
    animation: urbar-inhalt-einblenden-rechts 0.2s ease-out;
}

html.urbar-enter-left #content-outer-wrap {
    animation: urbar-inhalt-einblenden-links 0.2s ease-out;
}

/* Sicherheitsnetz zusätzlich zur JS-seitigen Prüfung im Inline-Skript (dort wird die Klasse bei
   aktivem prefers-reduced-motion erst gar nicht gesetzt): falls sich die Systemeinstellung zwischen
   Skriptlauf und Rendern ändert, bleibt der Inhalt so in jedem Fall sofort vollständig sichtbar. */
@media (prefers-reduced-motion: reduce) {

    html.urbar-enter-right #content-outer-wrap,
    html.urbar-enter-left #content-outer-wrap {
        animation: none;
    }
}