/*
 * Keep the frame contract local to the five intended WordPress components.
 * Do not reduce these selectors to the runtime class alone: standalone apps
 * (including Workout Generator) can be embedded in the same document.
 */
body.fob-maritime-background-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  background: #030405;
}

/* A real fixed layer provides consistent stationary rendering on mobile
 * browsers. The gradient keeps cards dominant. */
body.fob-maritime-background-page::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background:
    linear-gradient(rgba(3, 4, 5, .66), rgba(3, 4, 5, .66)),
    #030405 url("/assets/home-bg.png") center center / cover no-repeat;
  pointer-events: none;
  content: "";
}

/* JavaScript marks only the actual page document and its wrapper chain. This
 * reveals the fixed layer without making card components transparent. */
body.fob-maritime-background-page .fob-maritime-content-layer {
  background-color: transparent !important;
  background-image: none !important;
}