/* Olowo tribal mask background pattern (Studio spec) */

body.has-olowo-bg-pattern {
  position: relative;
}

.olowo-bg-pattern {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.olowo-bg-pattern__tone {
  position: absolute;
  inset: 0;
  color: rgba(186, 181, 173, 0.5);
  transition: opacity 700ms ease;
}

.olowo-bg-pattern__corner {
  position: absolute;
  width: 380px;
  height: 500px;
  pointer-events: none;
}

.olowo-bg-pattern__corner--top-right {
  top: -3rem;
  right: -3rem;
}

.olowo-bg-pattern__corner--bottom-left {
  bottom: -3rem;
  left: -3rem;
}

.olowo-bg-pattern__corner svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .olowo-bg-pattern__corner {
    width: 480px;
    height: 640px;
  }
}

/* Lifts the page off the fixed pattern behind it — but with z-index left at
   auto, deliberately. A positioned element with a z-index creates a stacking
   context, and <main> holds every dialog in the app: a sheet asking for
   z-index 1300 would only be sorting itself against its siblings inside main,
   while main itself sat at 1 against a .pf-bottom-nav at 65. The nav covered
   every bottom sheet. Relative alone creates no stacking context, and main
   still paints over .olowo-bg-pattern because it comes later in the document.
   Anything that needs to sit above the page chrome from inside main depends on
   this staying auto. */
body.has-olowo-bg-pattern .pf-page {
  position: relative;
}

body.has-olowo-bg-pattern .pf-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

body.has-olowo-bg-pattern .pf-mobile-nav {
  z-index: 50;
}