/* The page background. Today White (Dasha, 23 Oct: pure white with a light grey dot grid). Before it (20 Oct: not the pastel
   blobs; more modern, and interactive) three that answer the pointer: Grid (a dot grid that lights up under the pointer), Mesh (a slow blue gradient with grain) and
   Studio (a photo-studio sweep with a light that follows the pointer). assets/bg.js sets White (?bg=grid|mesh|studio shows the others), moves --px/--py with the pointer, and on a phone drifts them by itself. The pages keep their <div class="aura">. */
html[data-bg] body { background: var(--bgx-base); }
html[data-bg] .aura, html[data-bg] body.glass .aura { inset: 0; filter: none; animation: none; transform: none; overflow: hidden; }
html[data-bg] .aura::before, html[data-bg] .aura::after { content: ''; position: absolute; inset: 0; pointer-events: none; }

/* White (Dasha, 23 Oct): pure white, a still grid of light grey dots, nothing that follows the pointer */
html[data-bg="white"] { --bgx-base: #fff; }
html[data-bg="white"] .aura, html[data-bg="white"] body.glass .aura { background: radial-gradient(circle at 1px 1px, #ececf0 1.1px, transparent 1.7px) 0 0 / 24px 24px, #fff; }  /* the dots as faint as the landing's (Dasha, 27 Oct: the same background on every page) */
html[data-bg="white"] .aura::before, html[data-bg="white"] .aura::after { content: none; }

/* Grid: the dots show only in the light under the pointer (Dasha, 20 Oct), in our blue #6E72F2 (21 Oct: not violet) */
html[data-bg="grid"] { --bgx-base: #eef0f6; }
html[data-bg="grid"] .aura { background:
  radial-gradient(420px 420px at var(--px, 50%) var(--py, 40%), rgba(110, 114, 242, .12), transparent 70%),
  radial-gradient(70vmax 46vmax at 50% -12%, rgba(110, 114, 242, .1), transparent 70%),
  radial-gradient(50vmax 40vmax at 100% 100%, rgba(140, 170, 255, .16), transparent 70%), var(--bgx-base); }
html[data-bg="grid"] .aura::after { background: radial-gradient(240px 240px at var(--px, 50%) var(--py, 40%), #6E72F2, #8E9BFF 80%);
  -webkit-mask-image: radial-gradient(circle at 1px 1px, #000 1.3px, transparent 1.8px), radial-gradient(230px 230px at var(--px, 50%) var(--py, 40%), #000, transparent 75%);
  mask-image: radial-gradient(circle at 1px 1px, #000 1.3px, transparent 1.8px), radial-gradient(230px 230px at var(--px, 50%) var(--py, 40%), #000, transparent 75%);
  -webkit-mask-size: 24px 24px, 100% 100%; mask-size: 24px 24px, 100% 100%;
  -webkit-mask-composite: source-in; mask-composite: intersect; }

/* Mesh */
html[data-bg="mesh"] { --bgx-base: #e7e9f7; }
html[data-bg="mesh"] .aura { background:
  radial-gradient(46vmax 40vmax at calc(10% + var(--mx, 0px)) calc(12% + var(--my, 0px)), rgba(110, 114, 242, .42), transparent 70%),
  radial-gradient(42vmax 36vmax at 92% 8%, rgba(176, 186, 255, .7), transparent 70%),
  radial-gradient(48vmax 40vmax at 84% 92%, rgba(124, 196, 255, .34), transparent 70%),
  radial-gradient(40vmax 34vmax at 6% 96%, rgba(204, 196, 255, .7), transparent 70%), var(--bgx-base); }
html[data-bg="mesh"] .aura::before { opacity: .22; mix-blend-mode: multiply;
  background: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .55 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-bg="mesh"] .aura::after { background: radial-gradient(360px 360px at var(--px, 50%) var(--py, 40%), rgba(255, 255, 255, .45), transparent 70%); }

/* Studio */
html[data-bg="studio"] { --bgx-base: #e4e5ec; }
html[data-bg="studio"] .aura { background:
  radial-gradient(520px 380px at var(--px, 50%) var(--py, 40%), rgba(255, 255, 255, .7), transparent 70%),
  radial-gradient(90vmax 30vmax at 50% 86%, rgba(255, 255, 255, .75), transparent 70%),
  linear-gradient(180deg, #f3f3f7 0%, #e6e7ee 55%, #d8dae4 100%); }