/* Only the decorative stacking context changes; content geometry is untouched. */
body[data-inri-mineral] { isolation: isolate; }

.inri-mineral-background {
  /* Shared material and light settings for every connected page. */
  --mineral-texture: url('./mineral-slate.webp');
  --mineral-surface-color: #111210;
  --mineral-edge-rgb: 15, 17, 15;
  --mineral-light-color: #bb9670;
  --mineral-light-falloff: #766348;
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  contain: strict;
}

.inri-mineral-background[data-active] { display: block; }

.inri-mineral-background__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  overflow: hidden;
  background-color: var(--mineral-surface-color);
  background-size: 200% 100%;
  background-repeat: no-repeat;
}

/* Texture is assigned only after JS confirms a wide viewport and visible gutters. */
.inri-mineral-background[data-active] .inri-mineral-background__panel {
  background-image: var(--mineral-texture);
}

.inri-mineral-background__panel--left {
  left: 0;
  background-position: left center;
  --mineral-light-x: 3%;
  --mineral-edge-direction: to right;
}

.inri-mineral-background__panel--right {
  right: 0;
  background-position: right center;
  --mineral-light-x: 97%;
  --mineral-edge-direction: to left;
}

.inri-mineral-background__panel::before,
.inri-mineral-background__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.inri-mineral-background__panel::before {
  background: radial-gradient(ellipse 115% 42% at var(--mineral-light-x) var(--mineral-light-y, 70%),
    var(--mineral-light-color) 0%, var(--mineral-light-falloff) 35%, transparent 76%);
  mix-blend-mode: screen;
  opacity: var(--mineral-light-opacity, 0.035);
}

.inri-mineral-background__panel::after {
  background: linear-gradient(var(--mineral-edge-direction),
    rgba(var(--mineral-edge-rgb), 0.12) 0%, rgba(var(--mineral-edge-rgb), 0.25) 46%, rgb(var(--mineral-edge-rgb)) 100%);
}