/* ==========================================================================
   The circuit field behind the hero.

   The reference for this site is a lit printed-circuit board: traces leaving a
   chip, pads at their ends, a pulse running out along each one. Everything
   here is decorative — the SVG is aria-hidden — and everything animates in CSS
   with no JavaScript, so it costs nothing to run and stops dead under
   prefers-reduced-motion.

   Two paths per trace: a dim static one that draws the route, and a bright
   dashed one whose dash offset animates, which reads as a pulse travelling
   from the wordmark out to the edge.
   ========================================================================== */

.ct {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
  /* Clear in the middle, strong at the edges — the wordmark sits where the
     reference puts the chip, and a trace running through a headline is just a
     legibility problem wearing a costume. */
  mask-image: radial-gradient(ellipse 46% 58% at 50% 48%,
              transparent 0%, transparent 42%, #000 78%);
  -webkit-mask-image: radial-gradient(ellipse 46% 58% at 50% 48%,
              transparent 0%, transparent 42%, #000 78%);
}
.is-ready .ct { opacity: 1; }

.ct-line, .ct-pulse { fill: none; }

.ct-line {
  stroke: url(#ctg);
  stroke-width: 1.1;
  opacity: .30;
}

.ct-pulse {
  stroke: url(#ctg);
  stroke-width: 2.2;
  stroke-linecap: round;
  /* One short dash on a very long gap: only the dash is ever on screen. */
  stroke-dasharray: 30 2000;
  stroke-dashoffset: 2000;
  opacity: .95;
  animation: ct-run 7s linear infinite;
}
@keyframes ct-run {
  0%   { stroke-dashoffset: 2000; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Eighteen traces firing together would be a strobe; spread them across the
   loop so at any moment three or four are lit. */
.ct-pulses path:nth-child(9n+1) { animation-delay: 0s;    }
.ct-pulses path:nth-child(9n+2) { animation-delay: .8s;   }
.ct-pulses path:nth-child(9n+3) { animation-delay: 1.6s;  }
.ct-pulses path:nth-child(9n+4) { animation-delay: 2.4s;  }
.ct-pulses path:nth-child(9n+5) { animation-delay: 3.2s;  }
.ct-pulses path:nth-child(9n+6) { animation-delay: 4s;    }
.ct-pulses path:nth-child(9n+7) { animation-delay: 4.8s;  }
.ct-pulses path:nth-child(9n+8) { animation-delay: 5.6s;  }
.ct-pulses path:nth-child(9n+9) { animation-delay: 6.4s;  }

/* The pads at the end of each run. They breathe rather than blink. */
.ct-pad {
  fill: #4790D4;
  opacity: .5;
  animation: ct-pad 4.5s ease-in-out infinite;
}
.ct-pads circle:nth-child(even) { fill: #8480D4; animation-delay: 1.2s; }
.ct-pads circle:nth-child(3n)   { fill: #F6776C; animation-delay: 2.1s; }
.ct-pads circle:nth-child(5n)   { fill: #24969B; animation-delay: .6s;  }
@keyframes ct-pad {
  0%, 100% { opacity: .35; r: 3.4; }
  50%      { opacity: .95; r: 4.6; }
}

/* The glow the traces appear to come out of, centred on the wordmark. */
.hero__glow {
  position: absolute; left: 50%; top: 46%;
  width: min(900px, 90vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(71, 144, 212, .30) 0%,
                            rgba(132, 128, 212, .16) 38%,
                            transparent 68%);
  filter: blur(20px);
}

/* The faint board grid underneath everything. */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(120, 170, 255, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(120, 170, 255, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 25%, transparent 78%);
}

@media (prefers-reduced-motion: reduce) {
  .ct-pulse, .ct-pad { animation: none; }
  .ct-pulse { opacity: 0; }
}