/* Menu only: original warm photo beneath a separate frosted glass layer. */
body.veranda-flat-page.veranda-menu-background:not(.home) {
  isolation: isolate;
  background: #18120e;
}

body.veranda-menu-background::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('../images/backgrounds/veranda-menu-greenery-lights.jpg') center top / cover no-repeat;
  pointer-events: none;
}

body.veranda-menu-background::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(ellipse at 80% 40%, rgba(255,210,150,.05), transparent 45%),
    linear-gradient(120deg, rgba(255,255,255,.035), transparent 42%, rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.48));
  -webkit-backdrop-filter: blur(8px) saturate(105%);
  backdrop-filter: blur(8px) saturate(105%);
  pointer-events: none;
}

@media (max-width: 899px) {
  body.veranda-menu-background::before { background-position: 55% top; }

  /* Mobile Safari paints its browser controls beyond the visual viewport.
     Fade the fixed photo into the same root colour so that boundary disappears. */
  html.veranda-mobile-safari,
  html.veranda-mobile-safari body.veranda-flat-page.veranda-menu-background:not(.home) {
    background-color: #10110f;
  }

  html.veranda-mobile-safari body.veranda-menu-background::after {
    background:
      linear-gradient(to bottom,
        rgba(16,17,15,0) calc(100% - 148px),
        rgba(16,17,15,.18) calc(100% - 112px),
        rgba(16,17,15,.62) calc(100% - 54px),
        #10110f 100%),
      radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.08), transparent 40%),
      radial-gradient(ellipse at 80% 40%, rgba(255,210,150,.05), transparent 45%),
      linear-gradient(120deg, rgba(255,255,255,.035), transparent 42%, rgba(255,255,255,.02)),
      linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.48));
  }
}