/* Native same-origin document transitions preserve all WordPress initialization.
 * https://developer.chrome.com/docs/web-platform/view-transitions/cross-document
 * The browser retains the outgoing view until the incoming snapshot is ready.
 */
@view-transition{navigation:auto}

/* The opacity fade keeps the progress track mounted after a request. Stop its
 * infinite child animation while idle so hidden UI cannot invalidate each frame.
 * The original loading animation and reduced-motion override remain in layout.css.
 */
html:not(.sc-is-navigating) .sc-navigation-progress>span{animation:none}

:root{--sc-page-enter-y:9px;--sc-page-exit-y:-5px}
:root.sc-page-back{--sc-page-enter-y:-9px;--sc-page-exit-y:5px}
.song-community>.sc-workspace,.song-community>.sc-login-main{view-transition-name:sc-page-content}
.song-community>.sc-sidebar{view-transition-name:sc-page-sidebar}
.song-community>.sc-topbar{view-transition-name:sc-page-topbar}
.song-community>#wpadminbar{view-transition-name:sc-page-adminbar}

/* Geometry changes must not stretch a long article into a short inbox. */
::view-transition-group(root),
::view-transition-group(sc-page-content),
::view-transition-group(sc-page-sidebar),
::view-transition-group(sc-page-topbar),
::view-transition-group(sc-page-adminbar){animation:none}
::view-transition-old(root){display:none}
::view-transition-new(root){animation:none}
::view-transition-image-pair(sc-page-content){isolation:isolate}
::view-transition-old(sc-page-content),
::view-transition-new(sc-page-content){mix-blend-mode:normal;object-fit:none;object-position:left top;width:100%;height:100%}
::view-transition-old(sc-page-content){animation:sc-page-leave 180ms ease-out both}
::view-transition-new(sc-page-content){animation:sc-page-arrive 240ms cubic-bezier(.2,.7,.2,1) both}

/* Persistent chrome updates its active item, but does not move or replay a fade. */
::view-transition-old(sc-page-sidebar),
::view-transition-old(sc-page-topbar),
::view-transition-old(sc-page-adminbar){display:none}
::view-transition-new(sc-page-sidebar),
::view-transition-new(sc-page-topbar),
::view-transition-new(sc-page-adminbar){animation:none;mix-blend-mode:normal}
::view-transition-group(sc-page-sidebar){z-index:3}
::view-transition-group(sc-page-topbar){z-index:2}
::view-transition-group(sc-page-adminbar){z-index:4}
::view-transition-group(sc-page-content){z-index:1}

/* No full-page opacity toggle: unsupported browsers always retain visible text.
 * This runs only after real DOM content exists, never while waiting for a URL.
 */
.sc-page-entry .song-community>.sc-workspace,
.sc-page-entry .song-community>.sc-login-main{animation:sc-page-entry 220ms ease-out both!important}
.sc-page-transition .song-community .tab-pane.active{animation:none!important}
@keyframes sc-page-arrive{from{opacity:0;transform:translateY(var(--sc-page-enter-y))}to{opacity:1;transform:translateY(0)}}
@keyframes sc-page-leave{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sc-page-exit-y))}}
@keyframes sc-page-entry{from{opacity:.82;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){
    @view-transition{navigation:none}
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
    .sc-page-entry .song-community>.sc-workspace,
    .sc-page-entry .song-community>.sc-login-main{animation:none!important}
}