/* =========================================================
   field.css — slow drifting colour field
   Pairs with field.js, which builds the canvas itself.
   You never write field markup, only mark the container.

   The canvas has an ALPHA background and paints nothing but soft blobs, so
   it lays over whatever is already there. Put it over an exported background
   and you keep that artwork and gain the movement; use it on a plain section
   and the blobs are the whole picture.

   Theme it from the container, or :root:
     --field-a        first drifting tint    (default pale blue)
     --field-b        second drifting tint
     --field-opacity  the whole layer        (default 1)
   ========================================================= */

.field-canvas {
  position: absolute;
  /* Bled past the edges so a blob drifting off one side never shows its own
     boundary. The canvas is a few hundred px wide and stretched to this, and
     that upscale IS the blur. A CSS filter here would cost a full-size
     convolution every frame for a picture you already have for free. */
  inset: -6%;
  width: 112%;
  height: 112%;
  z-index: 0;
  display: block;
  opacity: var(--field-opacity, 1);
  pointer-events: none;
}

/* Anything real in the container has to sit above the field. Nothing here
   raises it for you, because the field cannot know which of your children is
   content and which is another background layer. */