/* robots.css — ambient agent visuals + the highlighted hero keyword.
   #agentfield = 2D network canvas (robots.js). #robotfield = Three.js grey CRT
   puppet-bots (robots3d.js). Both behind content; #robotfield is interactive
   (drag the bots) but only captures when a bot is actually under the pointer. */

#robotfield {
  position: fixed;
  inset: 0;
  z-index: 1;            /* above #agentfield (z-index 0), below page content */
  pointer-events: none;  /* robots3d.js does its own window-level hit-testing */
}

/* ---- Hero keyword: highlighted like a syntax token (Claude-Code style) ---- */
#heroWorkflow.kw {
  position: relative;
  display: inline-block;
  color: #8be9b0;                         /* keyword token color (mint) */
  border-radius: 5px;
  padding: 0 .08em;
  /* the highlight box, painted as a background so we can wipe it in */
  background-image: linear-gradient(rgba(110,231,183,0.16), rgba(110,231,183,0.16));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 86%;
  box-shadow: inset 0 0 0 1px rgba(110,231,183,0.22);
  animation: kwSweep .7s .45s both cubic-bezier(.4,0,.2,1),
             kwGlow 3.6s 1.2s ease-in-out infinite;
}
/* the editor-style "highlight wipes across as you type the keyword" */
@keyframes kwSweep {
  from { background-size: 0% 86%; color: inherit; box-shadow: inset 0 0 0 1px rgba(110,231,183,0); }
  60%  { color: #8be9b0; }
  to   { background-size: 100% 86%; }
}
/* a slow breathing glow so it stays a live "token" */
@keyframes kwGlow {
  0%,100% { box-shadow: inset 0 0 0 1px rgba(110,231,183,0.22), 0 0 0 0 rgba(110,231,183,0); }
  50%     { box-shadow: inset 0 0 0 1px rgba(110,231,183,0.40), 0 0 16px 0 rgba(110,231,183,0.18); }
}

@media (prefers-reduced-motion: reduce) {
  #robotfield { display: none; }
  /* no animation, just the final highlighted state */
  #heroWorkflow.kw { animation: none; background-size: 100% 86%; color: #8be9b0; }
}