/* PlainLogic trace system — decorative circuit traces with traveling pulse dots.
   Dependencies: design tokens from assets/css/lab.css
   ( --paper, --ink, --muted, --line, --signal, --teal, --leaf, --chartreuse ). */

/* Container: give the wrapped content room for an overlaid trace field. */
.trace-wrap {
  position: relative;
  overflow: hidden;
}

/* Trace canvas. Decorative — always mark aria-hidden="true" in markup. */
svg.pl-trace {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Static copper: thin, subtle, no fill. */
svg.pl-trace path.trace-line {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

/* Node pads on the traces: small warm dots with a gentle heartbeat. */
svg.pl-trace .trace-node {
  fill: var(--signal);
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: center;
  animation: trace-node-pulse 3.2s ease-in-out infinite;
}

svg.pl-trace .trace-node:nth-of-type(even) {
  animation-delay: 1.6s;
}

@keyframes trace-node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.35); opacity: 1; }
}

/* Traveling pulse dots (created by assets/js/traces.js). */
svg.pl-trace .trace-pulse-dot {
  fill: var(--signal);
  filter: drop-shadow(0 0 8px var(--signal));
}

/* Occasional cool accent dot for variety. */
svg.pl-trace .trace-pulse-dot.dot-teal {
  fill: var(--teal);
  filter: drop-shadow(0 0 8px var(--teal));
}

/* Absolute-positioned trace field behind section content. */
.trace-wrap > svg.pl-trace.pl-trace-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.trace-wrap > .trace-content {
  position: relative;
  z-index: 1;
}

/* A trace divider that scales with the text column. */
.trace-divider {
  display: block;
  width: min(100%, 720px);
  height: auto;
  margin-inline: auto;
}

/* Respect users who prefer still pages: no motion at all. */
@media (prefers-reduced-motion: reduce) {
  svg.pl-trace .trace-node {
    animation: none;
  }
  svg.pl-trace .trace-pulse-dot {
    display: none;
  }
}