/* Resollect — Scroll-driven multi-color backdrop
   One soft wash per major section. Cross-fades smoothly so the page
   reads like a single continuous surface, not stacked colored blobs. */

/* dim the static orbs so the scene wash leads */
.bg_fx .bg_orb { opacity: 0.18; }
.bg_fx .bg_grid { opacity: 0.55; }

/* scene canvas — stacked translucent layers, one per section */
.bg_scenes {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  /* a heavy blur smears every gradient edge into the next, so
     transitions feel like atmosphere shifting rather than shapes moving */
  filter: blur(60px) saturate(1.05);
}
.bg_scene {
  position: absolute;
  /* extend past the viewport so the blur doesn't reveal hard edges */
  inset: -10vh -10vw;
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.bg_scene.is-active { opacity: 1; }

/* Each scene = ONE big diagonal gradient + ONE soft accent.
   Low alpha + huge radii so colors merge into a single smooth wash. */

/* hero — cool brand blue → soft cyan */
.bg_scene[data-scene="hero"] {
  background:
    radial-gradient(120vw 120vh at 20% 0%,   rgba(96,165,250,0.18) 0%, transparent 70%),
    radial-gradient(120vw 120vh at 80% 100%, rgba(56,189,248,0.12) 0%, transparent 70%),
    linear-gradient(160deg, #FBFCFF 0%, #F2F6FE 100%);
}

/* prologue — warm ivory → soft peach */
.bg_scene[data-scene="prologue"] {
  background:
    radial-gradient(130vw 130vh at 30% 10%, rgba(251,191,36,0.10) 0%, transparent 70%),
    radial-gradient(130vw 130vh at 75% 90%, rgba(244,114,182,0.08) 0%, transparent 70%),
    linear-gradient(160deg, #FFFCF6 0%, #FCF8F2 100%);
}

/* act 1 — soft lavender → indigo */
.bg_scene[data-scene="act1"] {
  background:
    radial-gradient(130vw 130vh at 20% 20%, rgba(167,139,250,0.16) 0%, transparent 70%),
    radial-gradient(130vw 130vh at 85% 80%, rgba(99,102,241,0.10) 0%, transparent 70%),
    linear-gradient(160deg, #FBFAFF 0%, #F4F2FE 100%);
}

/* act 2 — amber → coral */
.bg_scene[data-scene="act2"] {
  background:
    radial-gradient(130vw 130vh at 15% 25%, rgba(251,146,60,0.14) 0%, transparent 70%),
    radial-gradient(130vw 130vh at 85% 75%, rgba(244,63,94,0.09) 0%, transparent 70%),
    linear-gradient(160deg, #FFFAF4 0%, #FFF4EE 100%);
}

/* platform — mint → soft sky */
.bg_scene[data-scene="platform"] {
  background:
    radial-gradient(130vw 130vh at 20% 20%, rgba(45,212,191,0.13) 0%, transparent 70%),
    radial-gradient(130vw 130vh at 85% 85%, rgba(56,189,248,0.10) 0%, transparent 70%),
    linear-gradient(160deg, #F6FCF9 0%, #F0F8F8 100%);
}

/* inside — sky → cyan */
.bg_scene[data-scene="inside"] {
  background:
    radial-gradient(130vw 130vh at 25% 20%, rgba(14,165,233,0.13) 0%, transparent 70%),
    radial-gradient(130vw 130vh at 80% 90%, rgba(34,211,238,0.10) 0%, transparent 70%),
    linear-gradient(160deg, #F4FAFF 0%, #EEF6FE 100%);
}

/* outcomes — emerald → soft cream */
.bg_scene[data-scene="outcomes"] {
  background:
    radial-gradient(130vw 130vh at 20% 25%, rgba(34,197,94,0.13) 0%, transparent 70%),
    radial-gradient(130vw 130vh at 85% 85%, rgba(132,204,22,0.09) 0%, transparent 70%),
    linear-gradient(160deg, #F7FCF5 0%, #F2F9F0 100%);
}

/* faq — slate-blue → soft violet */
.bg_scene[data-scene="faq"] {
  background:
    radial-gradient(130vw 130vh at 25% 20%, rgba(100,116,139,0.11) 0%, transparent 70%),
    radial-gradient(130vw 130vh at 85% 90%, rgba(139,92,246,0.08) 0%, transparent 70%),
    linear-gradient(160deg, #F8FAFD 0%, #F3F5FB 100%);
}

/* demo — indigo → violet finale */
.bg_scene[data-scene="demo"] {
  background:
    radial-gradient(130vw 130vh at 20% 20%, rgba(79,70,229,0.18) 0%, transparent 70%),
    radial-gradient(130vw 130vh at 85% 85%, rgba(139,92,246,0.14) 0%, transparent 70%),
    linear-gradient(160deg, #F6F4FF 0%, #F0ECFE 100%);
}

/* let the scene wash show through previously opaque sections */
section.story_prologue,
section.problem,
section.outcomes,
section.demo,
section.hero { background: transparent !important; }

/* dense panels keep a translucent wash so text stays crisp */
section.platform,
section.faq,
section.inside {
  background: rgba(255,255,255,0.62) !important;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bg_scene { transition: none; }
}