/*
 * W9_SR_SCROLL_PAINT_BOUNDARY_V2
 *
 * Shared SRHub scroll/compositor boundary.
 * Applies automatically to every current and future brand.
 *
 * Important:
 * Do not inherit --color-secondary here.
 * Its default source value is #efebe6 and was the visible
 * white/cream flash during mobile overscroll/compositor movement.
 */

:root {
  --w9-sr-scroll-paint: #1c1202;
}

/*
 * html owns the browser overscroll canvas.
 * body and #app own the document/application paint.
 */
html,
body,
#app {
  width: 100%;
  min-height: 100%;
  background-color:
    var(--w9-sr-scroll-paint) !important;
}

html {
  min-height: 100%;
  overscroll-behavior:
    none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-x:
    none;
  overscroll-behavior-y:
    none;
}

/*
 * Persistent application backing layer.
 * Normal body scrolling remains unchanged.
 */
#app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  isolation: isolate;
}

/*
 * Paint behind every route while Vue replaces route components.
 * This does not cover content and does not receive pointer events.
 */
#app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color:
    var(--w9-sr-scroll-paint);
}

/*
 * Platform routes use the dark source presentation.
 * Keep transient empty/list areas opaque during rapid scrolling.
 */
body:has(
  .bg-golden-flower
),
body:has(
  [class*="platform"]
) {
  background-color:
    var(--w9-sr-scroll-paint) !important;
}

/*
 * Mobile safe-area must use the same opaque paint.
 */
@supports (
  padding-bottom:
    env(safe-area-inset-bottom)
) {
  html,
  body,
  #app {
    background-color:
      var(--w9-sr-scroll-paint) !important;
  }
}