/* =========================================================================
   XONWARE — Section background animation library
   Each section gets a subtle, telecom-themed animated backdrop.
   Layered behind content with z-index:0; content uses position:relative.
   ========================================================================= */

/* Base — every animated bg sits inside a section */
.sec-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sec-bg svg, .sec-bg .sec-bg__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.section > .container,
.section > * {
  position: relative;
  z-index: 1;
}

/* ---- 1. FIBER STRANDS — flowing thin curves ------------------------ */
.sec-bg--fiber svg {
  width: 200%;
  left: -50%;
  animation: fiber-drift 60s linear infinite;
}
@keyframes fiber-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* ---- 2. NETWORK GRID with pulsing nodes --------------------------- */
.sec-bg--nodes::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(37,99,235,0.10) 1px, transparent 1.5px);
  background-size: 48px 48px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}
.sec-bg--nodes .node {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--leaf-500);
  box-shadow: 0 0 0 4px rgba(139,197,63,0.18);
  opacity: 0;
  animation: node-blink 6s ease-in-out infinite;
}
.sec-bg--nodes .node:nth-child(1) { top: 18%; left: 12%;  animation-delay: 0s; }
.sec-bg--nodes .node:nth-child(2) { top: 42%; left: 78%;  animation-delay: 1.4s; background: var(--cyan-400); box-shadow: 0 0 0 4px rgba(34,211,238,0.18); }
.sec-bg--nodes .node:nth-child(3) { top: 72%; left: 24%;  animation-delay: 2.8s; }
.sec-bg--nodes .node:nth-child(4) { top: 22%; left: 58%;  animation-delay: 0.7s; background: var(--cyan-400); box-shadow: 0 0 0 4px rgba(34,211,238,0.18); }
.sec-bg--nodes .node:nth-child(5) { top: 64%; left: 88%;  animation-delay: 3.5s; }
.sec-bg--nodes .node:nth-child(6) { top: 84%; left: 56%;  animation-delay: 4.2s; }
@keyframes node-blink {
  0%, 100% { opacity: 0; transform: scale(0.7); }
  10%, 25% { opacity: 0.7; transform: scale(1); }
}

/* ---- 3. DATA STREAM — horizontal flowing dots --------------------- */
.sec-bg--stream .stream-lane {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.10), rgba(139,197,63,0.10), transparent);
}
.sec-bg--stream .stream-lane:nth-child(1) { top: 28%; }
.sec-bg--stream .stream-lane:nth-child(2) { top: 56%; }
.sec-bg--stream .stream-lane:nth-child(3) { top: 78%; }

.sec-bg--stream .stream-packet {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 12px var(--cyan-400);
  top: 28%;
  animation: packet-flow 10s linear infinite;
}
.sec-bg--stream .stream-packet:nth-child(4) { top: 28%; animation-delay: 0s;   background: var(--cyan-400); }
.sec-bg--stream .stream-packet:nth-child(5) { top: 56%; animation-delay: 2.5s; background: var(--leaf-500); box-shadow: 0 0 12px var(--leaf-500); }
.sec-bg--stream .stream-packet:nth-child(6) { top: 78%; animation-delay: 5s;   background: var(--ink-600);  box-shadow: 0 0 12px var(--ink-600); }
@keyframes packet-flow {
  0%   { left: -2%;  opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { left: 102%; opacity: 0; }
}

/* ---- 4. CONCENTRIC WAVE — expanding rings ------------------------- */
.sec-bg--waves {
  display: grid;
  place-items: center;
}
.sec-bg--waves::before,
.sec-bg--waves::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,0.25);
  animation: wave-expand 8s ease-out infinite;
}
.sec-bg--waves::after { animation-delay: -4s; border-color: rgba(139,197,63,0.20); }
@keyframes wave-expand {
  0%   { width: 100px;  height: 100px;  opacity: 0.6; }
  100% { width: 1400px; height: 1400px; opacity: 0; }
}

/* ---- 5. SIGNAL CONES — broadcast arcs ----------------------------- */
.sec-bg--signal::before {
  content: '';
  position: absolute;
  top: 10%; right: -10%;
  width: 600px; height: 600px;
  background: conic-gradient(from 220deg at 50% 50%,
    transparent 0%, transparent 30%,
    rgba(34,211,238,0.08) 36%,
    rgba(139,197,63,0.10) 45%,
    transparent 60%);
  filter: blur(8px);
  animation: signal-sweep 18s linear infinite;
  pointer-events: none;
}
@keyframes signal-sweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- 6. CONSTELLATION — sparse dotted topology -------------------- */
.sec-bg--constellation svg path {
  stroke: rgba(37,99,235,0.18);
  stroke-width: 0.8;
  fill: none;
  stroke-dasharray: 3 5;
  animation: constel-flow 30s linear infinite;
}
@keyframes constel-flow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}
.sec-bg--constellation svg circle.star {
  fill: var(--ink-700);
  opacity: 0.4;
}
.sec-bg--constellation svg circle.star--bright {
  fill: var(--cyan-400);
  opacity: 0.8;
  animation: star-twinkle 4s ease-in-out infinite alternate;
}
@keyframes star-twinkle {
  0%   { opacity: 0.3; }
  100% { opacity: 0.9; }
}

/* ---- 7. RADIAL PULSE from corner ---------------------------------- */
.sec-bg--radial::before {
  content: '';
  position: absolute;
  bottom: -300px; left: -200px;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(37,99,235,0.10), transparent 70%);
  animation: radial-breathe 12s ease-in-out infinite;
}
.sec-bg--radial::after {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139,197,63,0.12), transparent 70%);
  animation: radial-breathe 14s ease-in-out infinite reverse;
}
@keyframes radial-breathe {
  0%, 100% { transform: scale(1)   translate(0,0); opacity: 0.7; }
  50%      { transform: scale(1.2) translate(40px,-40px); opacity: 1; }
}

/* ---- 8. DARK SECTION variants ------------------------------------- */
.section--dark .sec-bg--nodes::before {
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1.5px);
}
.section--dark .sec-bg--constellation svg path { stroke: rgba(34,211,238,0.30); }
.section--dark .sec-bg--constellation svg circle.star { fill: rgba(255,255,255,0.4); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .sec-bg *,
  .sec-bg::before,
  .sec-bg::after { animation: none !important; }
  .sec-bg--fiber svg { animation: none !important; }
}