/* ==========================================================================
   Sectors — Shared animated background
   ==========================================================================
   The deep-navy shared canvas + two slow, GPU-only drifting glows behind every
   Sector page (`#marketing-shared-background`). Self-contained: scoped to
   body.sectors-page, consumes the --sec-* tokens (Tokens.css) and owns its own
   reduced-motion handling. Loaded after Tokens.css, before PageStyles.css.
   ========================================================================== */

body.sectors-page {
  background: var(--sec-bg) !important;
}

body.sectors-page #marketing-shared-background {
  overflow: hidden;
  background:
    radial-gradient(ellipse 75% 65% at 12% 16%, rgba(76, 90, 255, 0.2), transparent 60%),
    radial-gradient(ellipse 65% 55% at 88% 8%, rgba(34, 211, 238, 0.13), transparent 60%),
    radial-gradient(ellipse 62% 80% at 50% 84%, rgba(124, 60, 255, 0.16), transparent 62%),
    var(--sec-bg);
}

/* Two slow, GPU-only drifting glows give the page a living, sector-agnostic
   ambience without any JS or extra DOM. */
body.sectors-page #marketing-shared-background::before,
body.sectors-page #marketing-shared-background::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  will-change: transform, opacity;
}

body.sectors-page #marketing-shared-background::before {
  width: 46vw;
  height: 46vw;
  left: -8vw;
  top: 4vh;
  background: radial-gradient(circle, rgba(var(--brand-violet-600-rgb), 0.5), transparent 68%);
  animation: sec-glow-drift-a 34s ease-in-out infinite alternate;
}

body.sectors-page #marketing-shared-background::after {
  width: 42vw;
  height: 42vw;
  right: -10vw;
  top: 34vh;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.3), transparent 68%);
  animation: sec-glow-drift-b 44s ease-in-out infinite alternate;
}

@keyframes sec-glow-drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.55;
  }
  to {
    transform: translate3d(7vw, 9vh, 0) scale(1.18);
    opacity: 0.8;
  }
}

@keyframes sec-glow-drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.05);
    opacity: 0.45;
  }
  to {
    transform: translate3d(-8vw, -7vh, 0) scale(1.25);
    opacity: 0.7;
  }
}

/* -------------------------------------------------------------------------- */
/*  Motion — freeze the drifting glows when reduced motion is requested.        */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.sectors-page #marketing-shared-background::before,
  body.sectors-page #marketing-shared-background::after {
    animation: none !important;
  }
}