body {
  isolation: isolate;
  background: var(--paper);
}

.site-header > .wrap,
main > section > .wrap,
.site-footer > .wrap {
  position: relative;
  z-index: 2;
}

.skip-link { z-index: 3; }

.trace-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  pointer-events: none;
  mix-blend-mode: difference;
}

.trace-paths { opacity: .09; stroke-width: 1; }
.trace-paths > :is(:first-child, :last-child) { opacity: .5; }

.trace-pulses > * {
  opacity: .19;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1.5 23.5;
  animation: trace-signal 26s linear infinite paused;
  animation-delay: -6s;
}

.trace-pulses > :nth-child(2) {
  animation-duration: 22s;
  animation-delay: -16s;
}

.trace-pulses > :nth-child(3) {
  animation-duration: 29s;
  animation-delay: -12s;
}

body[data-motion-ready]:not([data-motion-paused]) .trace-pulses > * {
  animation-play-state: running;
}

@keyframes trace-signal {
  to { stroke-dashoffset: -25; }
}

@media (prefers-reduced-motion: reduce) {
  .trace-pulses { display: none; }
}
