/* Only the four artwork detail pages load this file. Cross-document view
   transitions therefore apply to Gallery-category navigation, while in-page
   hash links keep their existing vertical positioning behavior. */
@view-transition {
    navigation: auto;
}

/* Keep the shared site navigation outside the sliding root snapshot. */
.nav {
    view-transition-name: detail-top-navigation;
}

::view-transition-group(detail-top-navigation) {
    z-index: 1000;
    animation: none;
}

::view-transition-old(detail-top-navigation),
::view-transition-new(detail-top-navigation) {
    mix-blend-mode: normal;
    animation: none;
}

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

::view-transition-old(root) {
    z-index: 1;
    mix-blend-mode: normal;
    animation: detailMajorPageExit 500ms cubic-bezier(.22, .61, .36, 1) both;
}

::view-transition-new(root) {
    z-index: 2;
    mix-blend-mode: normal;
    animation: detailMajorPageEnter 500ms cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes detailMajorPageExit {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: .72;
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes detailMajorPageEnter {
    from {
        opacity: .82;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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