/* CLAUDE: View Transitions CSS */
/* CLAUDE: Definiert Animationen für Seitenübergänge */
/* CLAUDE: Anpassen: Timing und Easing nach Bedarf ändern */

/* ==========================================================================
   CLAUDE: Basis View Transition Setup
   ========================================================================== */

/* CLAUDE: View Transitions aktivieren für alle Navigationen */
@view-transition {
    navigation: auto;
}

/* CLAUDE: Standard Transition Timing */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 300ms;
    animation-timing-function: ease-out;
}

/* CLAUDE: Fade Out der alten Seite */
::view-transition-old(root) {
    animation-name: pvm-fade-out;
}

/* CLAUDE: Fade In der neuen Seite */
::view-transition-new(root) {
    animation-name: pvm-fade-in;
}

/* ==========================================================================
   CLAUDE: Keyframe Animationen
   ========================================================================== */

@keyframes pvm-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes pvm-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   CLAUDE: Named View Transitions (Morph-Effekte)
   ========================================================================== */

/* CLAUDE: Header bleibt stabil während Transition */
.pvm-site-header {
    view-transition-name: site-header;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
}

/* CLAUDE: Page Title morpht zwischen Seiten */
.entry-title,
h1.page-title,
.header_start h1 {
    view-transition-name: page-title;
}

::view-transition-old(page-title),
::view-transition-new(page-title) {
    animation-duration: 350ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* CLAUDE: Footer bleibt stabil */
.pvm-footer {
    view-transition-name: site-footer;
}

::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation: none;
}

/* ==========================================================================
   CLAUDE: Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(page-title),
    ::view-transition-new(page-title) {
        animation-duration: 0.01ms !important;
    }
}