@view-transition {
    navigation: auto;
}

::view-transition-group(site-header) {
    animation: none !important;
}

::view-transition-new(site-header) {
    animation: none !important;
}

::view-transition-old(site-header) {
    animation: none !important;
}

::view-transition-group(page-content) {
    animation-duration: 0.4s;
    animation-timing-function: ease;
}

::view-transition-new(page-content) {
    animation: fadeIn 0.4s ease forwards;
}

::view-transition-old(page-content) {
    animation: fadeOut 0.3s ease forwards;
}

::view-transition-group(site-footer) {
    animation: none !important;
}

::view-transition-new(site-footer) {
    animation: none !important;
}

::view-transition-old(site-footer) {
    animation: none !important;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}