/* ==========================================================================
   ACCOMPLY.AI — LINE / SIGNAL ANIMATION SYSTEM
   Reusable technical-motion primitives: signal lines, flow paths, nodes,
   scan lines, data streams, animated borders, ambient grid.
   ========================================================================== */

/* -------------------------- ambient technical grid -------------------------- */
.tech-grid{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(28,34,48,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,34,48,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 64px 128px, 64px 128px; }
}

/* alternate-section background — a very subtle dotted texture instead of a
   solid colour change, so adjoining sections read as one connected system */
.bg-dotted{ position: relative; }
.bg-dotted::before{
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(28,34,48,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, black 6%, black 94%, transparent);
}
.bg-dotted > .wrap{ position: relative; z-index: 1; }

.glow-field{ position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.glow-field::before, .glow-field::after{
  content: ''; position: absolute; border-radius: 50%; filter: blur(80px);
}
.glow-field::before{
  width: 620px; height: 620px; top: -220px; left: 8%;
  background: radial-gradient(circle, var(--iris-glow), transparent 70%);
}
.glow-field::after{
  width: 460px; height: 460px; bottom: -160px; right: 4%;
  background: radial-gradient(circle, var(--accent2-glow), transparent 72%);
  opacity: .5;
}

/* -------------------------------- signal line -------------------------------- */
/* A thin horizontal/vertical line with a moving point of light. */
.signal-line{
  position: relative; height: 1px; width: 100%;
  background: var(--line-mid);
  overflow: visible;
}
/* inside the dark console panels the track needs the light-on-dark token */
.gov-engine .signal-line, .firms-diagram .signal-line{ background: var(--line-mid-dk); }
.signal-line::before{
  content: '';
  position: absolute; top: 50%; left: 0;
  width: 46px; height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--iris-light) 40%, var(--accent2) 70%, transparent);
  box-shadow: 0 0 10px 1px var(--accent2-glow);
  animation: signalTravel 3.6s cubic-bezier(.65,0,.35,1) infinite;
  animation-delay: var(--signal-delay, 0s);
}
@keyframes signalTravel{
  0%{ left: -5%; opacity: 0; }
  8%{ opacity: 1; }
  92%{ opacity: 1; }
  100%{ left: 100%; opacity: 0; }
}
.signal-line.vertical{ width: 1px; height: 100%; }
.signal-line.vertical::before{
  width: 1px; height: 46px; left: 50%; top: 0; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--iris-light) 40%, var(--accent2) 70%, transparent);
  animation-name: signalTravelV;
}
@keyframes signalTravelV{
  0%{ top: -5%; opacity: 0; }
  8%{ opacity: 1; }
  92%{ opacity: 1; }
  100%{ top: 100%; opacity: 0; }
}

/* -------------------------------- nodes -------------------------------- */
.node{
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  background: var(--iris-light);
  box-shadow: 0 0 0 3px rgba(20,194,153,.16);
  flex: none;
}
.node::after{
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(20,194,153,.4);
  animation: nodePulse 2.8s ease-out infinite;
}
.node.is-active{ background: var(--iris-light); box-shadow: 0 0 0 3px rgba(20,194,153,.32); }
.node.is-active::after{ border-color: rgba(20,194,153,.5); }
@keyframes nodePulse{
  0%{ transform: scale(.7); opacity: .9; }
  75%{ transform: scale(1.9); opacity: 0; }
  100%{ opacity: 0; }
}

/* -------------------------------- scan line -------------------------------- */
.scan-line{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.scan-line::after{
  content: '';
  position: absolute; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(20,194,153,.10) 50%, transparent);
  animation: scanSweep 7s linear infinite;
}
@keyframes scanSweep{
  0%{ top: -40%; }
  100%{ top: 100%; }
}

/* -------------------------------- animated border -------------------------------- */
.animated-border{ position: relative; }
.animated-border::before{
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--border-angle, 0deg), transparent 0%, var(--iris-light) 8%, var(--accent2) 12%, transparent 22%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borderTravel 5s linear infinite;
  pointer-events: none;
}
@property --border-angle{ syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes borderTravel{ to{ --border-angle: 360deg; } }

/* -------------------------------- data stream (small ticking values) -------------------------------- */
.data-stream{ display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-dimmer); text-transform: uppercase; }
.gov-engine .data-stream{ color: var(--ink-dimmer-dk); }
.data-stream .flicker{ display: inline-block; animation: flicker 3.2s steps(1) infinite; }
.data-stream .flicker:nth-child(2){ animation-delay: .4s; }
.data-stream .flicker:nth-child(3){ animation-delay: .9s; }
@keyframes flicker{ 0%, 92%{ opacity: 1; } 94%{ opacity: .2; } 96%{ opacity: 1; } }

@keyframes dotPulse{
  0%, 100%{ opacity: 1; box-shadow: 0 0 0 0 var(--accent2-glow); }
  50%{ opacity: .55; box-shadow: 0 0 0 4px transparent; }
}

/* -------------------------------- flow path (SVG) -------------------------------- */
.flow-path{ stroke-dasharray: 6 6; animation: pathMarch 1.2s linear infinite; }
@keyframes pathMarch{ to{ stroke-dashoffset: -24; } }

.flow-signal{ animation: none; }
.flow-signal-dot{
  filter: drop-shadow(0 0 4px var(--iris-light));
}

/* generic reveal-on-scroll (used sparingly, structural entrance only) */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-sys), transform .6s var(--ease-sys); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; } }

/* counting number */
.count-up{ font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .signal-line::before, .node::after, .scan-line::after, .animated-border::before,
  .tech-grid, .data-stream .flicker, .flow-path, .nav-status .dot{
    animation: none !important;
  }
  .signal-line::before{ opacity: .5; left: 40%; }
}