/* Keep background artwork at its native resolution on wide displays. */
body {
  position: relative;
  isolation: isolate;
  background-color: #1e1530;
  background-image: radial-gradient(ellipse at 50% 0, #925be84d, transparent 72%), linear-gradient(#281a3c55, #1710208c), url('./assets/luna/stone-wall-tile.png');
  background-position: center top;
  background-size: auto, auto, 1254px 1254px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed;
}

body::before {
  content: none;
  position: fixed;
  z-index: -2;
  top: 0;
  left: 50%;
  width: min(100%, 1672px);
  aspect-ratio: 1672 / 941;
  transform: translateX(-50%);
  background-image: radial-gradient(ellipse at 50% 0, #925be84d, transparent 72%), linear-gradient(#281a3c55, #1710208c), url('./assets/luna/stone-arch-detailed.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Soft violet light falls over the artwork, beneath the page panels. */
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(ellipse 620px 330px at 50% -90px, #d8baff55, #a377e82e 38%, transparent 76%), conic-gradient(from 150deg at 50% -10%, transparent, #8e61d000 3deg, #8e61d026 12deg, #bf8fff33 26deg, #d4b7ff38 30deg, #bf8fff33 34deg, #8e61d026 48deg, transparent 57deg);
  -webkit-mask-image: linear-gradient(#000, #000a 55%, transparent);
  mask-image: linear-gradient(#000, #000a 55%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}

@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  body::before {
    content: '';
    -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(#000 65%, transparent);
    mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(#000 65%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}