/* Native document navigation: a quiet dissolve without moving measured surfaces. */
@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

::view-transition-old(root) {
    animation: sl-page-out 240ms cubic-bezier(.4, 0, 1, 1) both;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation: sl-page-in 320ms cubic-bezier(.16, 1, .3, 1) both;
    mix-blend-mode: normal;
}

@keyframes sl-page-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes sl-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

html[data-sl-reduced-motion="true"]::view-transition-group(root),
html[data-sl-reduced-motion="true"]::view-transition-old(root),
html[data-sl-reduced-motion="true"]::view-transition-new(root) {
    animation: none !important;
}

@media (max-width: 760px) {
    ::view-transition-group(root),
    ::view-transition-new(root) { animation-duration: 280ms; }
    ::view-transition-old(root) { animation-duration: 200ms; }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none !important; }
}