/* Squadera — animated motifs.
   One master graph, nine crops. Pair with the markup in motifs.html.

   Colours come from the page's tokens, so a motif follows the theme
   switch with no second copy. Do not hard-code the rgba values.
   ------------------------------------------------------------------ */

.motif {
  position: absolute;
  top: clamp(20px, 3vw, 54px);
  right: clamp(-90px, -4vw, -20px);
  width: clamp(300px, 42vw, 620px);
  height: clamp(300px, 42vw, 620px);
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}

[data-theme="light"] .motif {
  opacity: .62;
}

/* LensCon: nothing is switched on yet, and the motif says so. */
.motif:has(.is-dim),
.motif:has([src*="motif-lenscon"]) {
  opacity: .34;
}

[data-theme="light"] .motif:has(.is-dim),
[data-theme="light"] .motif:has([src*="motif-lenscon"]) {
  opacity: .44;
}

.motif__svg,
.motif__img,
.motif img {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: v2drift 38s ease-in-out infinite;
}

/* Edges — the graph, drawn but quiet. */
.motif__edges {
  fill: none;
  stroke: rgba(34, 193, 187, .16);
  stroke-width: 1.5;
  stroke-linecap: round;
}

[data-theme="light"] .motif__edges {
  stroke: rgba(11, 111, 107, .20);
}

.is-dim .motif__edges {
  stroke: rgba(255, 255, 255, .13);
  stroke-dasharray: 5 6;
}

[data-theme="light"] .is-dim .motif__edges {
  stroke: rgba(18, 22, 15, .15);
}

/* Pulses — edges carrying a signal. Delay is per-line, in the markup. */
.motif__pulses {
  fill: none;
  stroke: rgba(34, 193, 187, .75);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 24 400;
}

[data-theme="light"] .motif__pulses {
  stroke: rgba(11, 111, 107, .62);
}

.motif__pulses line {
  animation: v2edge 8s linear infinite;
}

/* Nodes. Static ones carry an inline opacity derived from radius —
   bigger node, more present. That is what gives the crop its depth. */
.motif__nodes {
  fill: rgba(8, 9, 10, .6);
  stroke: rgba(200, 163, 7, .30);
  stroke-width: 2.5;
}

[data-theme="light"] .motif__nodes {
  fill: rgba(255, 255, 255, .72);
  stroke: rgba(154, 124, 8, .34);
}

.is-dim .motif__nodes {
  stroke: rgba(255, 255, 255, .22);
  stroke-dasharray: 4 5;
}

[data-theme="light"] .is-dim .motif__nodes {
  stroke: rgba(18, 22, 15, .24);
}

.motif__nodes .is-live {
  animation: v2node 11s ease-in-out infinite;
}

/* Trust only — containment. */
.motif__ring {
  stroke: rgba(34, 193, 187, .22);
  transform-origin: 200px 200px;
  animation: v2node 24s ease-in-out infinite;
}

.motif__ring-faint {
  stroke: rgba(34, 193, 187, .09);
}

[data-theme="light"] .motif__ring {
  stroke: rgba(11, 111, 107, .24);
}

[data-theme="light"] .motif__ring-faint {
  stroke: rgba(11, 111, 107, .11);
}

/* Held panel — its own small graph. No drift: the panel is about work
   being held, not moving. */
.holdp__motif {
  position: absolute;
  top: -16%;
  right: -8%;
  width: min(46%, 420px);
  height: 130%;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
}

[data-theme="light"] .holdp__motif {
  opacity: .5;
}

.holdp__motif svg,
.holdp__motif img,
.holdp__motif .motif__img {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.holdp__motif .is-live {
  animation: v2node 13s ease-in-out infinite;
}

@keyframes v2edge {
  0% {
    stroke-dashoffset: 220;
    opacity: 0
  }

  18% {
    opacity: .85
  }

  82% {
    opacity: .85
  }

  100% {
    stroke-dashoffset: -220;
    opacity: 0
  }
}

@keyframes v2node {

  0%,
  100% {
    transform: scale(.82);
    opacity: .5
  }

  50% {
    transform: scale(1.06);
    opacity: 1
  }
}

@keyframes v2drift {

  0%,
  100% {
    transform: translate3d(0, 0, 0)
  }

  33% {
    transform: translate3d(10px, -14px, 0)
  }

  66% {
    transform: translate3d(-8px, 9px, 0)
  }
}

@media (max-width: 760px) {
  .motif {
    width: clamp(240px, 70vw, 380px);
    opacity: .38;
    right: -70px;
  }

  .holdp__motif {
    width: 60%;
    opacity: .3;
  }
}

@media (prefers-reduced-motion: reduce) {

  .motif__svg,
  .motif__pulses line,
  .motif__nodes .is-live,
  .motif__ring,
  .holdp__motif .is-live {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {

  .motif,
  .holdp__motif {
    display: none;
  }
}