/* Canonical viewport background layer for full-screen Home and Menu pages.
   Keep this on body so .app-shell transforms never become the containing block for fixed positioning. */
body::before{
    content:"";
    position:fixed;
    z-index:0;
    top:0;
    height:110vh;
    height:110lvh;
    left:50%;
    width:min(100vw,560px);
    transform:translateX(-50%);
    pointer-events:none;
    opacity:0;
    background:var(--paper)
}
body[data-page="home"]::before{
    opacity:1;
    background-color:#26342d;
    background-image:linear-gradient(180deg,
        rgba(13,23,19,.05) 0%,
        rgba(13,23,19,.02) 50%,
        rgba(13,23,19,.08) 68%,
        rgba(13,23,19,.30) 84%,
        rgba(10,18,15,.68) 100%),var(--app-house-photo);
    background-size:cover;
    background-position:56% center;
    background-repeat:no-repeat
}
body[data-page="menu"]::before{
    opacity:1;
    background:linear-gradient(180deg,
            rgba(0,0,0,.40) 0%,
            rgba(0,0,0,.34) 22%,
            rgba(0,0,0,.27) 48%,
            rgba(0,0,0,.19) 74%,
            rgba(0,0,0,.12) 100%),
        linear-gradient(180deg,rgba(26,102,191,.48) 0%,rgba(42,122,211,.30) 20%,rgba(36,104,181,.14) 39%,rgba(242,237,229,.04) 60%,rgba(242,237,229,.13) 100%),
        url('../images/menu-house-v3.jpg?v=1') center top/cover no-repeat,
        #d8e0da
}
/* A permanent will-change: opacity would create a Backdrop Root and hide this body background from descendant glass filters. */
.app-shell{z-index:1;will-change:auto}
body[data-page="home"] .app-shell,
body[data-page="menu"] .app-shell{background:transparent}

@media(min-width:700px){
    body[data-page="home"]::before,
    body[data-page="menu"]::before{
        clip-path:inset(28px 0 calc(10vh + 28px) 0 round 34px);
        clip-path:inset(28px 0 calc(10lvh + 28px) 0 round 34px)
    }
}