/* ============================================================
   Shared brand background: the Algolia hero-gradient wash plus a drifting
   particle field that parallaxes toward the cursor.

   Every page in this prototype links this file instead of carrying its
   own copy, so the survey and the admin tool cannot drift apart. Pair it
   with brand-background.js, which injects the canvas and runs the sim.

   Ported from a React component. There is no React, no Tailwind and no
   build step here, so the same canvas engine runs as plain JS.
   ============================================================ */

body {
  /* Contains the first child's top margin. Without this, a child with a top
     margin collapses through the body box, the body's background starts
     lower than the viewport top, and html's flat background shows as a white
     strip across the top of the page. Visible on admin.html, whose .wrap has
     a top margin. */
  display: flow-root;
  /* Full-bleed brand atmosphere instead of flat dead gray: a soft wash of
     Algolia's real hero-gradient accent colors (colors_and_type.css's
     --accent-* tokens, sourced from algolia.com's own hero blobs), fixed
     so it reads as one continuous surface behind the whole scroll, not a
     tiled section background. */
  background-color: var(--bg-canvas);
  background-image:
    radial-gradient(1100px 700px at 12% -8%, var(--algolia-blue-050) 0%, transparent 60%),
    radial-gradient(900px 650px at 108% 10%, rgba(138, 79, 255, 0.10) 0%, transparent 55%),
    radial-gradient(800px 600px at -5% 65%, rgba(0, 182, 255, 0.08) 0%, transparent 55%),
    radial-gradient(1000px 800px at 105% 95%, rgba(0, 194, 154, 0.07) 0%, transparent 55%);
  background-attachment: fixed;
}

#bg-particles {
  position: fixed;
  inset: 0;
  /* Deliberately 0, not -1. colors_and_type.css sets a background on `html`
     AND `body`, so html's is what propagates to the canvas and body's paints
     as a normal opaque block background, which would cover any negative
     z-index child. The canvas therefore sits at 0 and page content is
     lifted to 1 via .above-bg below. */
  z-index: 0;
  pointer-events: none;  /* never steals a click or a hover from the form */
}

/* Any page content that must sit above the background canvas. */
.above-bg { position: relative; z-index: 1; }