/* =============================================================================
   bg-field.css — the room behind a section.

   A dark slate wall a long way back, one or two very dim lights in front of
   it, grain, and dark at the edges. Depth comes from the planes disagreeing:
   the wall is huge, soft and barely moves; the lights are smaller, sharper
   and swing several times as far. That disagreement is the only depth cue a
   flat screen has.

   An earlier version of this file was the lights on their own, bright and
   coloured, and it read as a lava lamp rather than as a room. The lights are
   now far dimmer than the wall's own mottling and are there to give the wall
   somewhere to be, not to be looked at.

   Plain elements with a background and a blur, composited on the GPU. No
   canvas and no WebGL: nothing here can fail to get a context or come back
   black. js/bg-field.js moves them.
   ========================================================================== */

.cf {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none;
  /* the whole field sits in its own stacking context so `screen` blending
     cannot reach past it into the page */
  isolation: isolate;
  background: var(--cf-base, #050505);
}
.cf-plane {
  position: absolute; inset: -14%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--pk, 1));
  will-change: transform;
}

/* the wall itself: assets/site/board.webp, a photograph of dark slate with
   its own vignette taken out so the page can put its own on */
.cf-slab {
  position: absolute; inset: 0;
  background-image: url("../assets/site/board.webp");
  background-size: cover;
  background-position: center;
  opacity: var(--o, 1);
  filter: saturate(var(--sat, .75)) brightness(var(--br, 1));
}
.cf-slab--tint {
  mix-blend-mode: color;
  background-image: none;
  background-color: var(--c1);
  opacity: var(--o, .3);
  filter: none;
}

/* a light, kept dimmer than the wall's own mottling */
.cf-glow {
  position: absolute; left: 0; top: 0;
  width: var(--s, 40vmax); height: var(--s, 40vmax);
  margin: calc(var(--s, 40vmax) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 44% 40%,
      var(--c1) 0%, var(--c2) 40%, transparent 72%);
  filter: blur(var(--b, 60px));
  opacity: var(--o, .2);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--k, 1));
  will-change: transform;
  mix-blend-mode: screen;
}

/* the grain, which is what stops a field this soft from banding into rings on
   a big screen */
.cf-grain {
  position: absolute; inset: 0; opacity: var(--cf-grain, .05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}
/* and the dark at the edges, so it reads as a room and not as a swatch. A
   room with something in front of it wants less of this: the journey hangs
   photographs over the middle of the frame and the vignette was then the only
   part of the wall you could have seen. */
.cf-vig {
  position: absolute; inset: 0;
  opacity: var(--cf-vig, 1);
  background:
    radial-gradient(120% 96% at 50% 44%,
      transparent 0%, transparent 42%, rgba(0, 0, 0, .46) 76%, rgba(0, 0, 0, .86) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .cf-plane, .cf-glow { transition: none !important; }
}