/* dotmatrix.css
 * Ported from dotmatrix.zzzzshawn.cloud (the shadcn registry by zzzzshawn).
 * Original CSS-only animations preserved verbatim. The React component
 * shell is replaced by vanilla HTML rendered via dotmatrix.js so we can
 * drop these loaders into any page without a React runtime.
 */

.dmx-root {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  --dmx-cycle: 1500ms;
  --dmx-opacity-base: 0.16;
  --dmx-opacity-mid: 0.32;
  --dmx-opacity-peak: 1;
  --dmx-speed: 1;
  color: currentColor;
}

.dmx-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.dmx-dot {
  border-radius: 999px;
  display: block;
  background: currentColor;
  opacity: calc(0.5 * (var(--dmx-opacity-base) + var(--dmx-opacity-mid)));
  transform-origin: center;
  transform: none;
  will-change: opacity;
}

.dmx-muted .dmx-dot {
  opacity: calc(0.44 * var(--dmx-opacity-mid));
}

.dmx-dot.dmx-inactive {
  opacity: 0 !important;
  animation: none !important;
  visibility: hidden;
  pointer-events: none;
  will-change: auto;
}

.dmx-ripple {
  animation: dmx-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-delay: calc(var(--dmx-ripple-ring, 0) * 0.2333 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-ripple-echo {
  animation: dmx-ripple-echo calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;
  animation-delay: calc((var(--dmx-ripple-ring, 0) * 0.14 + var(--dmx-ripple-parity, 0) * 0.03) * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-center-origin-ripple {
  animation: dmx-center-origin-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;
  animation-delay: calc(var(--dmx-center-ripple-ring, 0) * 0.16 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-collapse {
  animation: dmx-collapse calc(var(--dmx-cycle) * 0.2 * var(--dmx-speed, 1)) ease-in forwards;
  animation-delay: calc((4 - var(--dmx-manhattan, 0)) * 0.032 * var(--dmx-cycle) * var(--dmx-speed, 1));
}

.dmx-hover-ripple {
  animation: dmx-hover-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) ease-in-out infinite;
  animation-delay: calc(var(--dmx-distance, 0) * 0.127 * var(--dmx-cycle) * var(--dmx-speed, 1));
}

.dmx-path {
  animation: dmx-ripple calc(var(--dmx-cycle) * var(--dmx-speed, 1)) cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-delay: calc(var(--dmx-path, 0) * 0.2333 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-diagonal-alt-sweep {
  animation: dmx-diagonal-alt-sweep calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;
  animation-delay: calc((var(--dmx-path, 0) * 0.2 + var(--dmx-diagonal-parity, 0) * 0.5) * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-spiral-snake {
  animation: dmx-spiral-snake calc(var(--dmx-cycle) * var(--dmx-speed, 1)) linear infinite;
  animation-delay: calc(var(--dmx-spiral-order, 0) * 0.04 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

.dmx-circular2-ring {
  animation: dmx-circular2-ring calc(var(--dmx-cycle) * var(--dmx-speed, 1)) steps(12, end) infinite;
  animation-delay: calc(var(--dmx-ring-order, 0) * 0.0833333333 * var(--dmx-cycle) * var(--dmx-speed, 1));
  will-change: opacity;
}

@keyframes dmx-ripple {
  0%, 100% { opacity: var(--dmx-opacity-base); }
  50% { opacity: var(--dmx-opacity-peak); }
}

@keyframes dmx-ripple-echo {
  0%, 100% { opacity: calc(0.625 * var(--dmx-opacity-base)); }
  28% { opacity: calc(0.98 * var(--dmx-opacity-peak)); }
  56% { opacity: var(--dmx-opacity-mid); }
  78% { opacity: calc(0.68 * var(--dmx-opacity-peak) + 0.32 * var(--dmx-opacity-mid)); }
}

@keyframes dmx-center-origin-ripple {
  0%, 100% { opacity: calc(0.625 * var(--dmx-opacity-base)); }
  34% { opacity: var(--dmx-opacity-peak); }
  60% { opacity: calc(0.5 * (var(--dmx-opacity-base) + var(--dmx-opacity-mid))); }
}

@keyframes dmx-collapse {
  0% { opacity: calc(0.95 * var(--dmx-opacity-peak) + 0.05 * var(--dmx-opacity-mid)); }
  100% { opacity: calc(0.375 * var(--dmx-opacity-base)); }
}

@keyframes dmx-hover-ripple {
  0% { opacity: calc(0.5 * var(--dmx-opacity-base)); }
  45% { opacity: var(--dmx-opacity-peak); }
  100% { opacity: var(--dmx-opacity-base); }
}

@keyframes dmx-diagonal-alt-sweep {
  0%, 100% { opacity: calc(0.5 * var(--dmx-opacity-base)); }
  14% { opacity: var(--dmx-opacity-peak); }
  30% { opacity: calc(0.75 * var(--dmx-opacity-base)); }
}

@keyframes dmx-spiral-snake {
  0%, 100% { opacity: calc(0.5 * var(--dmx-opacity-base)); }
  8% { opacity: var(--dmx-opacity-peak); }
  16% { opacity: calc(0.5 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid) + 0.1 * var(--dmx-opacity-base)); }
  24% { opacity: calc(0.25 * var(--dmx-opacity-peak) + 0.45 * var(--dmx-opacity-mid) + 0.3 * var(--dmx-opacity-base)); }
  32% { opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base)); }
  40% { opacity: calc(0.75 * var(--dmx-opacity-base)); }
}

@keyframes dmx-circular2-ring {
  0%, 8.333333% { opacity: var(--dmx-opacity-peak); }
  8.333333%, 16.666667% { opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid)); }
  16.666667%, 25% { opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base)); }
  25%, 33.333333% { opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base)); }
  33.333333%, 41.666667% { opacity: var(--dmx-opacity-peak); }
  41.666667%, 50% { opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid)); }
  50%, 58.333333% { opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base)); }
  58.333333%, 66.666667% { opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base)); }
  66.666667%, 75% { opacity: var(--dmx-opacity-peak); }
  75%, 83.333333% { opacity: calc(0.6 * var(--dmx-opacity-peak) + 0.4 * var(--dmx-opacity-mid)); }
  83.333333%, 91.666667% { opacity: calc(0.5 * var(--dmx-opacity-mid) + 0.5 * var(--dmx-opacity-base)); }
  91.666667%, 100% { opacity: calc(0.3 * var(--dmx-opacity-mid) + 0.7 * var(--dmx-opacity-base)); }
}

@media (prefers-reduced-motion: reduce) {
  .dmx-dot,
  .dmx-ripple, .dmx-ripple-echo, .dmx-center-origin-ripple,
  .dmx-collapse, .dmx-hover-ripple, .dmx-path,
  .dmx-diagonal-alt-sweep, .dmx-spiral-snake, .dmx-circular2-ring {
    animation: none !important;
    transition: none !important;
  }
}