/* ==========================================================================
   BACKGROUND FX
   Subtle animated backdrops — gradient blobs, a faint network layer, and
   small ambient icon shapes. Decoration only: low opacity, behind content
   (z-index: 0), never intercepts clicks (pointer-events: none), and fully
   respects prefers-reduced-motion (see animations.css).
   ========================================================================== */

/* ---- Hero backdrop: gradient blobs + faint network ---- */

.hero-bg-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.4;
}

.bg-blob-1 {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -100px;
  background: radial-gradient(circle, var(--accent-300), transparent 70%);
  animation: blob-float-1 22s ease-in-out infinite;
}

.bg-blob-2 {
  width: 360px;
  height: 360px;
  bottom: -160px;
  right: 8%;
  background: radial-gradient(circle, var(--accent-500), transparent 70%);
  animation: blob-float-2 26s ease-in-out infinite;
}

.bg-blob-3 {
  width: 260px;
  height: 260px;
  top: 22%;
  right: -110px;
  background: radial-gradient(circle, var(--accent-400), transparent 70%);
  animation: blob-float-3 19s ease-in-out infinite;
}

@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(36px, 26px) scale(1.08); }
}

@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-28px, -22px) scale(1.05); }
}

@keyframes blob-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-18px, 30px) scale(1.1); }
}

.hero-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.hero-network line { opacity: 0.5; }
.hero-network circle { opacity: 0.7; }

.hero-network circle {
  animation: node-pulse 3.6s ease-in-out infinite;
}

.hero-network circle:nth-of-type(2) { animation-delay: 0.5s; }
.hero-network circle:nth-of-type(3) { animation-delay: 1s; }
.hero-network circle:nth-of-type(4) { animation-delay: 1.5s; }
.hero-network circle:nth-of-type(5) { animation-delay: 2s; }
.hero-network circle:nth-of-type(6) { animation-delay: 2.5s; }

@keyframes node-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.75; }
}

/* ---- Ambient section icons (calendar, message, CRM card, etc.) ---- */

.section-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.section-fx .fx-icon {
  position: absolute;
  opacity: 0.07;
  color: var(--navy-900);
  animation: fx-float 15s ease-in-out infinite;
}

.section-fx .fx-icon svg {
  width: 56px;
  height: 56px;
}

.section-fx .fx-icon.fx-2 { animation-duration: 18s; animation-delay: 1.2s; }
.section-fx .fx-icon.fx-3 { animation-duration: 13s; animation-delay: 2.4s; }
.section-fx .fx-icon.fx-4 { animation-duration: 20s; animation-delay: 0.6s; }

@keyframes fx-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}

/* Sections hosting decorative icons need a positioning context + clipping,
   without affecting their existing padding/background rules. */
.section-fx-host {
  position: relative;
  overflow: hidden;
}

/* ---- Connected-system pulse: give the traveling dot a soft glow ----
   Per-connector animation-delay is set inline in the HTML (evenly spaced
   against the dot's 4.5s loop) so the pulse reads as one wave traveling
   down the whole chain rather than every dot blinking in sync. */
.flow-dot {
  box-shadow: 0 0 8px 2px var(--accent-glow);
}

@media (max-width: 860px) {
  /* Keep ambient icons from overlapping tightly-stacked mobile content. */
  .section-fx .fx-icon { opacity: 0.05; }
  .bg-blob-3 { display: none; }
}