/* ==========================================================================
   vcx-noise-bg.css
   Subtle noise + warm radial backdrop, tuned for the VitaCoreX light theme.
   Applied only when body carries class "vcx-bg-noise" (added by JS after load).
   Design intent: premium film-grain texture + warm spotlight WITHOUT reducing
   readability of the cream panels and dark body copy.
   ========================================================================== */

/* --- Radial spotlight layer --- */
/* Fixed pseudo-element anchored to viewport. Sits behind the noise canvas. */
/* Cool teal accent near top centre + soft ink-blue accent lower right.     */
/* Tuned for the cool light body (#FAFCFC) — stays subtle on white. */
body.vcx-bg-noise::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 640px at 50% 180px,
      rgba(91, 186, 167, 0.10),
      rgba(91, 186, 167, 0.03) 40%,
      transparent 70%),
    radial-gradient(circle 900px at 80% 70%,
      rgba(23, 58, 99, 0.05),
      transparent 70%);
  will-change: auto;
}

/* --- Noise canvas layer --- */
/* NOTE: The animated grain is disabled by default because `mix-blend-mode:    */
/* multiply` on dark hero sections creates a brownish/yellow muddy cast. */
/* The radial spotlight above (body.vcx-bg-noise::before) carries the brand   */
/* backdrop on its own; the grain was a cream-specific luxury that doesn't    */
/* translate to the cool-white + dark-hero palette. */
.vcx-noise-canvas {
  display: none !important;
}

/* --- Content stacking --- */
/* Main page structure must sit above backdrop (z:0) and canvas (z:1).             */
/* IMPORTANT: we deliberately do NOT target `> div` / `> a` broadly, because that  */
/* would beat the `position: fixed` declared on floating elements like the         */
/* Private Advisory side tab (.vcx-exclusive-badge), chat/calendar launchers,      */
/* exit-intent popup, and any other body-level floating CTA. Those elements stay   */
/* fixed with their own z-index from their own CSS.                                */
body.vcx-bg-noise > header,
body.vcx-bg-noise > main,
body.vcx-bg-noise > section,
body.vcx-bg-noise > footer,
body.vcx-bg-noise > nav,
body.vcx-bg-noise > aside {
  position: relative;
  z-index: 2;
}

/* Explicit safeguard — if anything global still tries to flatten a floating tab,  */
/* re-assert fixed positioning with !important so the badge survives.              */
body.vcx-bg-noise > .vcx-exclusive-badge,
body.vcx-bg-noise > .vcx-calendar-launcher,
body.vcx-bg-noise > .vcx-chat-launcher,
body.vcx-bg-noise > .vcx-ai-assistant-launcher,
body.vcx-bg-noise > .vcx-exit-intent-popup,
body.vcx-bg-noise > [data-vcx-floating] {
  position: fixed !important;
}

/* --- Readability guard --- */
/* On any section that uses a solid cream/white panel, kill the noise pass-through */
/* by giving the panel a solid background layer above the canvas.                  */
body.vcx-bg-noise .vcx-routes,
body.vcx-bg-noise .vcx-route,
body.vcx-bg-noise .card,
body.vcx-bg-noise .glass {
  position: relative;
  z-index: 2;
}

/* --- Respect user motion preference --- */
@media (prefers-reduced-motion: reduce) {
  .vcx-noise-canvas { display: none !important; }
  body.vcx-bg-noise::before {
    background:
      radial-gradient(circle 640px at 50% 180px,
        rgba(91, 186, 167, 0.08),
        transparent 70%);
  }
}

/* --- Mobile guard --- */
/* Keep the effect on mobile but lighter — animation cost is real on low-end phones. */
@media (max-width: 720px) {
  .vcx-noise-canvas { opacity: 0.4; }
  body.vcx-bg-noise::before {
    background:
      radial-gradient(circle 420px at 50% 120px,
        rgba(91, 186, 167, 0.09),
        transparent 70%);
  }
}

/* --- Print guard --- */
@media print {
  .vcx-noise-canvas { display: none !important; }
  body.vcx-bg-noise::before { display: none !important; }
}