/* Quiet, irregularly scattered music and dance motifs, shared by every page.
   One small local vector tile; no animation or layout elements. */
body {
  isolation: isolate;
}

body::before {
  content: "";
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/heritage-watermark.svg?v=1");
  background-repeat: repeat;
  background-position: var(--heritage-position, center 76px);
  background-size: 1200px 1000px;
  opacity: .12;
}

html.ywi-heritage-on body::before {
  display: block;
}

/* Existing route markup changes the placement without scripts or motion. */
body:has(#view > .page) {
  --heritage-position: calc(50% - 134px) -82px;
  --heritage-mobile-position: calc(38% - 67px) -26px;
}

body:has(#view > .catalog-page) {
  --heritage-position: calc(50% + 173px) -121px;
  --heritage-mobile-position: calc(38% + 87px) -40px;
}

body:has(#view > .more-page) {
  --heritage-position: calc(50% - 277px) 167px;
  --heritage-mobile-position: calc(38% - 139px) 122px;
}

body:has(#view > .release) {
  --heritage-position: calc(50% + 321px) -263px;
  --heritage-mobile-position: calc(38% + 161px) -119px;
}

body:has(#view > .desk-shell) {
  --heritage-position: calc(50% - 369px) 249px;
  --heritage-mobile-position: calc(38% - 185px) 171px;
}

body:not(:has(#view)) {
  --heritage-position: calc(50% + 243px) 153px;
  --heritage-mobile-position: calc(38% + 122px) 116px;
}

@media (max-width: 640px) {
  body::before {
    background-size: 720px 600px;
    background-position: var(--heritage-mobile-position, 38% 68px);
    opacity: .10;
  }
}

@media print, (forced-colors: active), (prefers-contrast: more) {
  body::before,
  html:root.ywi-heritage-on body::before { display: none; }
}