/* Glass-safe motion for the two full-screen views that sample body::before.
 * Keep the layout movement short: large/slow left transitions force more backdrop repaint work. */
body[data-page="home"] .app-shell,
body[data-page="menu"] .app-shell{
    left:0;
    transition:left .14s cubic-bezier(.2,.72,.2,1)
}
body[data-page="home"] .app-shell.is-leaving,
body[data-page="menu"] .app-shell.is-leaving{
    pointer-events:none;
    left:-10px;
    opacity:1;
    transform:none;
    filter:none
}
body[data-page="home"] .app-shell[data-transition="back"].is-leaving,
body[data-page="home"] .app-shell[data-transition="menu-close"].is-leaving,
body[data-page="menu"] .app-shell[data-transition="back"].is-leaving,
body[data-page="menu"] .app-shell[data-transition="menu-close"].is-leaving{
    left:10px;
    transform:none
}
body[data-page="home"] .app-shell[data-transition="menu"].is-leaving,
body[data-page="menu"] .app-shell[data-transition="menu"].is-leaving{
    left:-6px;
    transform:none
}
body[data-page="home"] .app-shell.is-entering,
body[data-page="menu"] .app-shell.is-entering{
    left:12px;
    transition:none;
    opacity:1;
    transform:none;
    filter:none
}
body[data-page="home"] .app-shell[data-transition="back"].is-entering,
body[data-page="home"] .app-shell[data-transition="menu-close"].is-entering,
body[data-page="menu"] .app-shell[data-transition="back"].is-entering,
body[data-page="menu"] .app-shell[data-transition="menu-close"].is-entering{
    left:-12px;
    transform:none
}
body[data-page="home"] .app-shell[data-transition="menu"].is-entering,
body[data-page="menu"] .app-shell[data-transition="menu"].is-entering{
    left:8px;
    transform:none
}

@media(prefers-reduced-motion:reduce){
    body[data-page="home"] .app-shell,
    body[data-page="menu"] .app-shell{transition:none}
    body[data-page="home"] .app-shell.is-leaving,
    body[data-page="home"] .app-shell.is-entering,
    body[data-page="menu"] .app-shell.is-leaving,
    body[data-page="menu"] .app-shell.is-entering{left:0}
}