/* ============================================================
   CEE "network at work" band — a live, breathing map of the
   Kansas county network. Active counties glow and pulse on a
   loop; light pulses travel between them and the hub. The band
   self-animates (not scroll-dependent); scroll adds gentle depth.
   ============================================================ */
.cee-px {
  --cee-blue: #6ca5d5;
  --cee-deep: #3d6f9e;
  --cee-ink: #1d3043;
  --cee-gold: #e8a13d;
  --p: 0;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(620px, 92vh, 900px);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  background:
    radial-gradient(1100px 620px at 70% 8%, rgba(108,165,213,.22), transparent 60%),
    radial-gradient(900px 520px at 12% 110%, rgba(232,161,61,.12), transparent 55%),
    linear-gradient(160deg, #0f2438 0%, #1a2c42 48%, #122033 100%);
}

/* drifting ambient blobs */
.cee-px-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.cee-px-blob.b1 { width: 420px; height: 420px; left: 58%; top: -10%;  background: rgba(108,165,213,.5);  transform: translateX(calc(var(--p) * -90px)); }
.cee-px-blob.b2 { width: 320px; height: 320px; left: 2%;   top: 46%;  background: rgba(61,111,158,.5);   transform: translateX(calc(var(--p) * 70px)); }
.cee-px-blob.b3 { width: 240px; height: 240px; left: 44%;  bottom: -8%; background: rgba(232,161,61,.26); transform: translateY(calc(var(--p) * -60px)); }

/* the map */
.cee-px-map {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  transform: translateY(calc((var(--p) - .5) * 36px));
}
.cee-px-map svg { width: min(1040px, 94%); height: auto; overflow: visible; }

.cee-px-states { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.07); stroke-width: .8; }
.cee-px-ks-outline { fill: none; stroke: rgba(143,192,230,.45); stroke-width: 1.6; }
.cee-px-county { fill: rgba(255,255,255,.045); stroke: rgba(143,192,230,.16); stroke-width: .6; }
.cee-px-county.is-active { fill: rgba(108,165,213,.18); stroke: rgba(143,192,230,.5); stroke-width: .9; }
.cee-px-link { stroke: rgba(143,192,230,.22); stroke-width: 1; fill: none; }
.cee-px-hub-core { fill: #bfe0f5; }
.cee-px-pulse { fill: #ffd98a; }
.cee-px-spark { fill: #fff; }

/* centered copy overlay */
.cee-px-inner {
  position: relative; z-index: 3; text-align: center; max-width: 740px; padding: 54px 24px;
  transform: translateY(calc((1 - var(--p)) * 40px));
  opacity: calc(.3 + var(--p) * .9);
}
.cee-px-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #bfe0f5; background: rgba(108,165,213,.16); border: 1px solid rgba(108,165,213,.4);
  border-radius: 999px; padding: 7px 16px; margin-bottom: 20px;
}
.cee-px-inner h2 {
  font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.08; margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  text-shadow: 0 8px 40px rgba(8,18,30,.6);
}
.cee-px-inner h2 em { font-style: italic; color: #8fc0e6; }
.cee-px-inner p { font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,.84); margin: 18px auto 0; max-width: 560px; text-shadow: 0 4px 24px rgba(8,18,30,.7); }
.cee-px-stats { display: flex; gap: 36px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cee-px-stat b { display: block; font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 42px); color: #fff; line-height: 1; }
.cee-px-stat span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(190,222,245,.85); margin-top: 7px; }

@media (prefers-reduced-motion: reduce) {
  .cee-px-blob, .cee-px-map, .cee-px-inner { transform: none !important; }
  .cee-px-inner { opacity: 1; }
}