/*
 * Fovea, a layer that shows a page the way one glance sees it.
 * By Good Citizens · https://goodcitizens.us/lab/fovea
 *
 * Only a small patch of your eye sees sharply: about two degrees, roughly a
 * thumbnail at arm's length. This layer keeps a circle of that size sharp
 * around the pointer and blurs and greys the rest. It is a rough model, not
 * a measurement of anyone's eyes. Pair it with fovea.js, which moves the
 * circle and sizes it for a viewing distance.
 */
.fovea-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--fovea-blur, 6px)) grayscale(0.6) contrast(0.9);
  backdrop-filter: blur(var(--fovea-blur, 6px)) grayscale(0.6) contrast(0.9);
  /* Sharp inside one degree of the pointer, fading out to five. */
  -webkit-mask-image: radial-gradient(circle at var(--fovea-x, 50%) var(--fovea-y, 50%), transparent var(--fovea-r, 40px), #000 calc(var(--fovea-r, 40px) * 5));
  mask-image: radial-gradient(circle at var(--fovea-x, 50%) var(--fovea-y, 50%), transparent var(--fovea-r, 40px), #000 calc(var(--fovea-r, 40px) * 5));
}

.fovea-layer[hidden] { display: none; }