/* Page Fade Transition - Native View Transitions API */

/* Enable cross-document view transitions (Chrome 126+, Edge 126+, Safari 18.2+) */
@view-transition {
    navigation: auto;
}

/* Customize the crossfade duration to 0.3s */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

/* Old page (outgoing): fade out */
::view-transition-old(root) {
    animation-name: pftFadeOut;
}

/* New page (incoming): fade in */
::view-transition-new(root) {
    animation-name: pftFadeIn;
}

@keyframes pftFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes pftFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}