/* ---------- Seitenwechsel „Linse“ (Runde 14, Eldins Wahl aus drei Varianten) ----------
   Startseite ↔ Gleitsicht ↔ Impressum mit View Transitions über Seiten hinweg. Ohne Unterstützung (z. B. Firefox)
   lädt die Seite ganz normal, bei „Bewegung reduzieren“ gibt es keinen Übergang.
   - Die neue Seite öffnet sich in einem weichen Kreis ab der Stelle, an der man geklickt hat (uebergang.js setzt
     --ue-x, --ue-y und den nötigen Halbmesser --ue-r-max), die alte bleibt darunter stehen.
   - Kopfleiste und Leiste unten bleiben stehen. Das NANU bleibt an seinem Platz und wechselt nur die Farbe
     (Türkis ↔ Rot, deckungsgleiche Bilder blenden ineinander), die Zeile „gleitsichtbrille.wien“ schreibt sich
     darunter hin bzw. zieht sich wieder zurück.
   Prüfhilfe: ?ue-tempo=4 (uebergang.js) streckt alle Zeiten für die Zeitlupe. */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

:root { --ue-tempo: 1; }
.kopf { view-transition-name: ue-kopf; }
.leiste { view-transition-name: ue-leiste; }
.kopf__nanu { view-transition-name: ue-nanu; }
.kopf__zusatz { view-transition-name: ue-zusatz; }

/* Grundtakt für alles, was keine eigene Regel hat (Kopfleiste und Leiste blenden ihren Inhalt über) */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: calc(380ms * var(--ue-tempo)); animation-timing-function: cubic-bezier(0.25, 0.6, 0.25, 1); }

/* Kopfleiste, Leiste unten (Handy) und Logo liegen über dem Inhalt */
::view-transition-group(ue-kopf),
::view-transition-group(ue-leiste) { z-index: 2; }
::view-transition-group(ue-nanu),
::view-transition-group(ue-zusatz) { z-index: 3; }

/* NANU: gleiche Form, nur andere Farbe – die beiden Bilder blenden ineinander, kleiner Höhenausgleich gleitet mit */
::view-transition-group(ue-nanu) { animation-duration: calc(460ms * var(--ue-tempo)); }
::view-transition-old(ue-nanu),
::view-transition-new(ue-nanu) { animation-duration: calc(460ms * var(--ue-tempo)); animation-timing-function: ease-in-out; }

/* „gleitsichtbrille.wien“: schreibt sich von links nach rechts hin, beim Verlassen zieht sie sich nach links zurück */
::view-transition-new(ue-zusatz):only-child { animation: ue-zeile-hin calc(440ms * var(--ue-tempo)) calc(140ms * var(--ue-tempo)) cubic-bezier(0.3, 0, 0.2, 1) both; }
::view-transition-old(ue-zusatz):only-child { animation: ue-zeile-weg calc(280ms * var(--ue-tempo)) cubic-bezier(0.5, 0, 0.75, 0) both; }
@keyframes ue-zeile-hin { from { clip-path: inset(0 100% 0 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes ue-zeile-weg { from { clip-path: inset(0 0 0 0); opacity: 1; } to { clip-path: inset(0 100% 0 0); opacity: 0.4; } }

/* Linse: die alte Seite bleibt stehen und geht erst am Ende, wenn der Kreis sie schon deckt */
@property --ue-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root) { mix-blend-mode: normal; animation: ue-weichen calc(560ms * var(--ue-tempo)) linear both; }
::view-transition-new(root) {
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(circle at var(--ue-x, 50%) var(--ue-y, 50%), #000 calc(var(--ue-r) - 48px), transparent var(--ue-r));
  mask-image: radial-gradient(circle at var(--ue-x, 50%) var(--ue-y, 50%), #000 calc(var(--ue-r) - 48px), transparent var(--ue-r));
  animation: ue-linse calc(560ms * var(--ue-tempo)) cubic-bezier(0.45, 0, 0.2, 1) both;
}
@keyframes ue-weichen { 0%, 60% { opacity: 1; } to { opacity: 0; } }
@keyframes ue-linse { from { --ue-r: 0px; } to { --ue-r: var(--ue-r-max, 150vmax); } }