@keyframes page-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes page-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Cross-document view transitions — opt-in lives inline in _Layout.cshtml for Chrome. */

.site-header__brand {
    view-transition-name: site-header;
}

.site-footer {
    view-transition-name: site-footer;
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: page-fade-out 0.2s ease forwards;
    }

    ::view-transition-new(root) {
        animation: page-fade-in 0.2s ease forwards;
    }

    ::view-transition-group(site-header) {
        animation-duration: 0.45s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

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

    /* Pin fixed footer — no morph, stays visible during page transitions. */
    ::view-transition-group(site-footer),
    ::view-transition-old(site-footer),
    ::view-transition-new(site-footer) {
        animation: none;
        mix-blend-mode: normal;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @supports not (view-transition-name: root) {
        body {
            animation: page-fade-in 0.2s ease;
        }
    }
}