/* ============================================================
   fux_sitepackage_hsgm — Kachel-Uebergaenge beim Filtern/Sortieren
   (layout-transition.js, User-Vorgabe 2026-10-13, seitenweit)

   View-Transition-Weg: Kacheln tragen waehrend des Uebergangs
   view-transition-class "fux-lt". Dauer/Kurve = CI (--transition-base:
   0.3s cubic-bezier(0.4, 0, 0.2, 1)); der FLIP-Rueckfall liest dieselben
   Variablen.
   ============================================================ */

:root {
    --fux-layout-transition-duration: 300ms;
    --fux-layout-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Die Uebergangsschicht liegt ueber der Seite — Klicks gehen durch auf die
   echten Bedienelemente (schnelles Mehrfachklicken bleibt moeglich) */
::view-transition {
    pointer-events: none;
}

/* Der Rest der Seite wechselt ohne Ueberblendung (sonst flackert die ganze
   Seite); mix-blend-mode normal verhindert das Aufhellen der UA-Voreinstellung */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* Umsortieren/Nachruecken: Gleiten an die neue Position */
::view-transition-group(.fux-lt) {
    animation-duration: var(--fux-layout-transition-duration);
    animation-timing-function: var(--fux-layout-transition-easing);
}

/* Lageaenderung derselben Kachel: kein Ueberblenden des Inhalts */
::view-transition-old(.fux-lt),
::view-transition-new(.fux-lt) {
    animation-duration: var(--fux-layout-transition-duration);
}

/* Ausblenden (nur alter Zustand) und Einblenden (nur neuer): Fade + Scale */
::view-transition-old(.fux-lt):only-child {
    animation: fux-lt-out var(--fux-layout-transition-duration) var(--fux-layout-transition-easing) both;
}

::view-transition-new(.fux-lt):only-child {
    animation: fux-lt-in var(--fux-layout-transition-duration) var(--fux-layout-transition-easing) both;
}

@keyframes fux-lt-out {
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

@keyframes fux-lt-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* Sicherheitsnetz: das Modul startet bei reduzierter Bewegung keinen
   Uebergang; falls doch (Einstellung waehrend des Klicks geaendert) */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}