/* ── Base background ────────────────────────────────────────────────
   The <style id="nbg-early"> tag injected in wp_head sets this color
   before any stylesheet loads, preventing a flash of white.
   This rule is a safety net for the no-JS / slow-load case.
──────────────────────────────────────────────────────────────────── */
html,
body {
  background-color: #0F172A;
}

/* ── Hide the system cursor when custom cursor is active ───────── */
body.nbg-no-cursor,
body.nbg-no-cursor * {
  cursor: none !important;
}

/* ── Cursor elements ───────────────────────────────────────────────
   Both are fixed at top:0 / left:0 and repositioned via JS
   transform: translate(x, y).  will-change avoids layer promotion
   churn while keeping compositing smooth.
──────────────────────────────────────────────────────────────────── */
#nbg-cursor-dot,
#nbg-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.22s ease;
}

/* Filled dot — follows cursor exactly */
#nbg-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--nbg-c, #a0c4ff);
  box-shadow:
    0 0  8px 2px var(--nbg-c, #a0c4ff),
    0 0 18px 4px color-mix(in srgb, var(--nbg-c, #a0c4ff) 40%, transparent);
}

/* Outline ring — follows with a lerp lag (set in JS) */
#nbg-cursor-ring {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--nbg-c, #a0c4ff);
  mix-blend-mode: screen;
}

/* ── Mobile: the JS-injected gradient handles most of it.
   This ensures a sensible base even if JS is slow to execute.
   We use !important to defeat theme rules that set a light body
   background on small viewports (e.g. Inspiro "body{background:#fff}").
──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html,
  body {
    background-color: #0F172A !important;
    background-image:
      radial-gradient(ellipse at 15% 60%, rgba(46, 108, 246, 0.18) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 20%, rgba(31, 163, 163, 0.14) 0%, transparent 50%),
      radial-gradient(ellipse at 55% 90%, rgba(91, 194, 102, 0.10) 0%, transparent 48%) !important;
    background-attachment: fixed !important;
  }

  /* Light mode: niente gradiente, solo colore chiaro.
     Il colore reale viene iniettato dal JS con il valore configurato
     in neural-bg (lightBg). Questa regola è il safety-net CSS. */
  html.light-mode,
  html.light-mode body {
    background-color: #F1F5F9 !important;
    background-image: none !important;
  }
}