:root {
  --liminal-sensorium-warm: hsla(42, 92%, 60%, 0.077);
  --liminal-sensorium-cool: hsla(202, 88%, 62%, 0.062);
  --liminal-sensorium-contrast: 0.680;
  --liminal-sensorium-density: 0.198;
  --liminal-sensorium-texture: 0.078;
  --liminal-sensorium-motion: 0.148;
  --liminal-sensorium-duration: 21s;
}

#liminal-sites-sensorium-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  opacity: calc(0.42 + (var(--liminal-sensorium-density, 0.2) * 0.55));
  mix-blend-mode: screen;
}

#liminal-sites-sensorium-layer::before,
#liminal-sites-sensorium-layer::after {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle at 20% 20%, var(--liminal-sensorium-warm), transparent 34%),
    radial-gradient(circle at 78% 18%, var(--liminal-sensorium-cool), transparent 32%),
    radial-gradient(circle at 50% 88%, rgba(255, 255, 255, 0.035), transparent 28%);
  filter: blur(calc(18px + (var(--liminal-sensorium-texture, 0.12) * 42px)));
  transform: translate3d(0, 0, 0);
}

#liminal-sites-sensorium-layer::after {
  opacity: calc(0.14 + (var(--liminal-sensorium-texture, 0.1) * 1.2));
  background-image: linear-gradient(120deg, rgba(255,255,255,0.11), transparent 48%, rgba(255,255,255,0.07));
  mix-blend-mode: overlay;
}

body.liminal-sites-sensorium-active > :not(#liminal-sites-sensorium-layer):not(.skip-link) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  #liminal-sites-sensorium-layer[data-motion="on"]::before {
    animation: liminal-sites-sensorium-drift var(--liminal-sensorium-duration, 22s) ease-in-out infinite alternate;
  }
}

@media (prefers-reduced-motion: reduce) {
  #liminal-sites-sensorium-layer::before {
    animation: none !important;
  }
}

@keyframes liminal-sites-sensorium-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.025); }
}