/* ============================================================================
   mv-particles.css — the drifting particle field behind hero sections.

   One definition, loaded by every page that uses it. It used to live inline in
   index.html; that was fine while the homepage was the only page with a field,
   and a fork waiting to happen the moment a second page wanted one.

   js/mv-particles.js builds the canvas inside any element carrying
   [data-mv-particles]. This file only positions it and hands it a colour.

   TO ADD IT TO A PAGE
     1. link this file and js/mv-particles.js
     2. put class="mv-particles-host" on the section that should carry the field
     3. make its FIRST child:
        <div class="mv-particles" data-mv-particles data-quantity="80"></div>

   Quantity is a count, not a density: the script spreads N particles over the
   host's box, so a taller host needs a bigger number to look the same. Roughly
   1.5 particles per 10,000px of host area matches the homepage.
   ========================================================================== */

/* The host owns a stacking context on purpose. The canvas sits at z-index -1,
   which paints it above the host's own background but below every one of its
   children — so a page can be given a field without touching the z-index of
   anything already inside the section. `isolation` is what keeps that -1 from
   escaping to an ancestor and disappearing behind the page background, which
   is the usual way this trick fails. */
.mv-particles-host {
  position: relative;
  isolation: isolate;
}

/* Colour is handed to the script as an "r, g, b" triple so it can build rgba()
   with an animated alpha — a var(--brand) would not work, the script needs the
   channels. Restated per theme: brand purple on light, a lighter lilac on dark
   where the purple sinks into the background. */
.mv-particles {
  --mv-particle-rgb: 124, 92, 252;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mv-particles-host > .mv-particles {
  z-index: -1;
}

[data-theme="dark"] .mv-particles {
  --mv-particle-rgb: 176, 156, 255;
}

/* pricing.html has no hero element of its own — the heading and the plan grid
   share one <section> — so the field is capped to the heading band rather than
   drifting behind the plan cards, which carry their own surfaces anyway. */
.pricing.mv-particles-host > .mv-particles {
  bottom: auto;
  height: 340px;
}