/* Snapshot only the workspace: sidebar/header stay outside the cross-fade. */
:root.menu-view-transition {
    view-transition-name: none;
}

.menu-view-transition article.content {
    view-transition-name: hris-menu-panel;
}

::view-transition-group(hris-menu-panel) {
    animation: none;
}

::view-transition-old(hris-menu-panel) {
    animation: hris-menu-panel-out 180ms ease-out both;
    mix-blend-mode: normal;
}

::view-transition-new(hris-menu-panel) {
    animation: hris-menu-panel-in 180ms ease-out both;
    mix-blend-mode: normal;
}

@keyframes hris-menu-panel-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes hris-menu-panel-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(hris-menu-panel),
    ::view-transition-new(hris-menu-panel) {
        animation: none;
    }
}