/* ═══════════════════════════════════════════════════════════
   Flubb Ambient Grey Gradient — scroll-reactive, site-wide
   Per V7 Brand Guideline p.16: soft, subtle, supports content.
   Uses the brand's grey scale (White Smoke → light greys).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Updated by JS on scroll. Unitless 0 → 1 across full scroll range. */
  --sg-scroll: 0;
}

/* Expose the gradient by making body/html transparent — the layer
   behind them handles all background now. */
html,
body {
  background: transparent !important;
}

/* Fixed layer — white base with gentle grey orbs drifting across. */
body::before {
  content: '';
  position: fixed;
  left: -5%;
  right: -5%;
  top: -20%;
  bottom: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    /* Top-left soft grey accent */
    radial-gradient(
      ellipse 40% 35% at 15% 20%,
      rgba(194, 200, 212, 0.28) 0%,
      rgba(194, 200, 212, 0) 65%
    ),
    /* Bottom-right soft grey accent */
    radial-gradient(
      ellipse 45% 40% at 85% 80%,
      rgba(210, 215, 224, 0.32) 0%,
      rgba(210, 215, 224, 0) 65%
    ),
    /* Base — stays white so the site doesn't read grey */
    #FFFFFF;
  transform: translate3d(
    calc(var(--sg-scroll) * 40px),
    calc(var(--sg-scroll) * -140px),
    0
  );
  transition: transform 0.15s linear;
  will-change: transform;
}

/* Let the gradient show through on light/white sections that previously
   had their own solid #ffffff background. */
.fm-teaser,
.fm-steps-section,
.fm-faq-section,
.fi,
.flubbmind-section {
  background: transparent !important;
}

/* Dark AI treatment for wwd and tone sections */
.flubb-wwd,
.flubb-tone {
  background-color: #010118 !important;
}

/* Reduced motion: kill the JS-driven drift, just show a static gradient */
@media (prefers-reduced-motion: reduce) {
  body::before {
    transform: none !important;
    transition: none;
  }
}