/*
 * Überleitung Anmeldung → Portal. Wird nur auf der Anmeldeseite und auf der ersten Seite danach geladen.
 *
 * Browser mit seitenübergreifenden „View Transitions“ (Chrome, Edge, Safari): Die Anmeldeseite bleibt eingefroren
 * stehen, bis die erste Portalseite fertig gezeichnet ist. Dann fährt die rechte Spalte nach rechts heraus, das Bild
 * links blendet aus, und das Portal liegt schon darunter und zoomt von 125 % auf 100 %.
 * Alle anderen Browser (anmeldung.js, ankunft.js): gleiche Bewegung in zwei Schritten – erst fährt die Anmeldung
 * heraus, dann zoomt das Portal herein.
 * Bei „weniger Bewegung“ gilt nichts davon, die Seiten wechseln wie sonst.
 */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    /* Teile der Anmeldeseite, die einzeln mitbewegt werden (diese Namen liest der Browser von der alten Seite) */
    .anmeldung-bild { view-transition-name: anmeldung-bild; }
    .anmeldung-feld { view-transition-name: anmeldung-feld; background: var(--farbe-flaeche); }

    /* Die Pseudo-Elemente gehören zur neuen Seite – deshalb steht das hier auch im Portal */
    ::view-transition-old(root) { animation: none; }
    ::view-transition-new(root) {
        animation: uebergang-zoom 0.95s cubic-bezier(0.22, 0.7, 0.2, 1) both;
        mix-blend-mode: normal;
    }
    ::view-transition-old(anmeldung-feld) {
        animation: uebergang-raus 0.75s cubic-bezier(0.55, 0, 0.25, 1) both;
        mix-blend-mode: normal;
    }
    ::view-transition-old(anmeldung-bild) {
        animation: uebergang-aus 0.75s ease both;
        mix-blend-mode: normal;
    }

    /* Ohne seitenübergreifende Übergänge: Anmeldeseite fährt heraus, bevor das Portal lädt (anmeldung.js) */
    body.anmeldung-geht .anmeldung-feld { transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.55, 0, 0.25, 1); }
    body.anmeldung-geht .anmeldung-bild { opacity: 0; transition: opacity 0.5s ease; }
    /* … und das Portal zoomt herein (ankunft.js setzt die Klasse nur, wenn der Browser den Übergang nicht kann) */
    html.ankunft-weich { overflow: hidden; }
    html.ankunft-weich body { animation: uebergang-zoom 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) backwards; }
}

@keyframes uebergang-zoom {
    from { transform: scale(1.25); opacity: 0; }
    35% { opacity: 1; }
    to { transform: none; opacity: 1; }
}
@keyframes uebergang-raus { to { transform: translateX(100%); } }
@keyframes uebergang-aus { to { opacity: 0; } }