/*
 * Syzygia loader: the three brand dots pulsing left -> right (1.2 s loop, ease-in-out).
 * Same proportions, spacing and colours as svg/mark-dots.svg (the owner's symbol: gradient
 * #7c3aed -> #3b82f6 from x 0 to 62 of its 67-unit width, so dot 3 ends in solid blue). No background square.
 *
 * Size: set font-size on .syz-loader; the big dot is 1em, the loader is 2.2333em wide.
 * Variants: (default) gradient | .syz-loader--mono (currentColor) | .syz-loader--white
 * Motion: static full-opacity dots under prefers-reduced-motion: reduce.
 *
 * <span class="syz-loader" role="status" aria-live="polite">
 *   <span class="syz-loader__dot"></span><span class="syz-loader__dot"></span><span class="syz-loader__dot"></span>
 *   <span class="syz-loader__label">Loading…</span>
 * </span>
 */
.syz-loader {
  display: inline-flex;
  align-items: center;
  height: 1em;
  line-height: 0;
  vertical-align: middle;
}

.syz-loader__dot {
  flex: none;
  border-radius: 50%;
  animation: syz-loader-dot 1.2s ease-in-out infinite both;
}

/* mark geometry (units of the 30-unit big-dot diameter): r 15 / 9.5 / 6, gaps 3.5 / 2.5 */
.syz-loader__dot:nth-child(1) {
  width: 1em;
  height: 1em;
  background: linear-gradient(90deg, #7c3aed, #5d5df1);
}
.syz-loader__dot:nth-child(2) {
  width: 0.6333em;
  height: 0.6333em;
  margin-left: 0.1167em;
  background: linear-gradient(90deg, #5961f2, #4577f5);
  animation-delay: 0.15s;
}
.syz-loader__dot:nth-child(3) {
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.0833em;
  background: linear-gradient(90deg, #427af5, #3b82f6 58.33%);
  animation-delay: 0.3s;
}

.syz-loader--mono .syz-loader__dot {
  background: currentColor;
}
.syz-loader--white .syz-loader__dot {
  background: #ffffff;
}

/* visually hidden, still announced by the role="status" live region */
.syz-loader__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes syz-loader-dot {
  0%,
  70%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  35% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .syz-loader__dot {
    animation: none;
  }
}