/* Vendored from the IsUniverse design system (portada f03a82d, assets/ds/circuit.css); identity comments removed. */
.ds-circuit { position: absolute; pointer-events: none; }
.ds-circuit path { fill: none; stroke: var(--gold); stroke-width: 1.2;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: ds-trace 1.4s ease-out var(--at, .4s) forwards; }
.ds-circuit circle { fill: var(--gold); opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: ds-node .3s ease-out calc(var(--at, .4s) + 1.15s) forwards; }
/* one trace after another, every 120 ms */
.ds-circuit :is(path, circle):nth-of-type(2) { --at: calc(var(--from, .4s) + .12s); }
.ds-circuit :is(path, circle):nth-of-type(3) { --at: calc(var(--from, .4s) + .24s); }
.ds-circuit :is(path, circle):nth-of-type(4) { --at: calc(var(--from, .4s) + .36s); }
.ds-circuit :is(path, circle):nth-of-type(1) { --at: var(--from, .4s); }
@keyframes ds-trace { to { stroke-dashoffset: 0; } }
@keyframes ds-node { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* the intro: the whole screen behind the signature */
.ds-circuit--intro { inset: 0; width: 100%; height: 100%; opacity: .5; }
/* the hero: a column of traces on the right */
.ds-circuit--hero { right: 0; top: 0; height: 100%; width: auto; opacity: .45; --from: .3s; }
@media (max-width: 900px) { .ds-circuit--hero { opacity: .25; } }
@media (max-width: 640px) { .ds-circuit--hero { display: none; } }   /* on phones the hero lines would cross the text */
/* phones in portrait (F10): the full-screen slice pushed both clusters of traces off the sides, so on every site no line
   was visible; the drawing becomes a 4:3 band at the bottom of the screen, under the content, where both clusters and
   their nodes stay in view */
@media (max-aspect-ratio: 1/1) { .ds-circuit--intro { inset: auto 0 0 0; height: auto; aspect-ratio: 4 / 3; opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .ds-circuit path { animation: none; stroke-dashoffset: 0; }
  .ds-circuit circle { animation: none; opacity: 1; }
}