/* ═══════════════════════════════════════════════════════════
   SIGNAL BACKDROP
   Shared hero ambience: aurora glow, fine mesh, a canvas of
   data packets drifting along bus rails, and the animated
   accent line used in case study headlines.
   Prefix: .sig-
═══════════════════════════════════════════════════════════ */

/* Host element for the layers below (the hero itself) */
.sig-host {
  position: relative;
  isolation: isolate;
  background: #05070c;
  overflow: hidden;
}

.sig-aurora,
.sig-mesh,
.sig-bus,
.sig-vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sig-aurora {
  background:
    radial-gradient(38rem 28rem at 12% 8%, rgba(0, 232, 255, 0.20), transparent 65%),
    radial-gradient(34rem 30rem at 88% 82%, rgba(124, 107, 255, 0.22), transparent 62%),
    radial-gradient(30rem 24rem at 66% 12%, rgba(0, 245, 181, 0.14), transparent 60%);
  filter: blur(6px);
  animation: sig-drift 22s ease-in-out infinite alternate;
}

@keyframes sig-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.5%, 2%, 0) scale(1.08); }
}

.sig-mesh {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 95% 75% at 50% 45%, #000 5%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 45%, #000 5%, transparent 78%);
}

.sig-bus {
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.sig-vignette {
  background:
    radial-gradient(ellipse 80% 65% at 50% 50%, transparent 40%, rgba(5, 7, 12, 0.85) 100%),
    linear-gradient(180deg, rgba(5, 7, 12, 0.9) 0%, transparent 22%, transparent 76%, rgba(5, 7, 12, 0.96) 100%);
}

/* ── Animated headline accent ─────────────────────────── */

.sig-accent {
  background: linear-gradient(96deg, #00f5b5 0%, #00e8ff 42%, #7c6bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: sig-sweep 9s ease-in-out infinite;
}

@keyframes sig-sweep {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Characters resolve out of noise on load — keep the run stable */
[data-scramble] { font-variant-ligatures: none; }

@media (prefers-reduced-motion: reduce) {
  .sig-aurora,
  .sig-accent {
    animation: none;
  }
}