/* Dot Matrix — DotmSquare11 / Echo Ring
   Puerto de https://dotmatrix.zzzzshawn.cloud/r/dotm-square-11.json
   Demo: size=36 dotSize=5 speed=1.25 */

.dmx-root,
.pc-dotm,
.pc-prism-bloom {
    --dmx-cycle: 1500ms;
    --dmx-speed: 0.8; /* 1 / 1.25 */
    --dmx-dot-size: 5px;
    --dmx-gap: 2px;
    --dmx-opacity-base: 0.16;
    --dmx-opacity-mid: 0.32;
    --dmx-opacity-peak: 1;
    --dmx-dot-fill: currentColor;
    display: inline-grid;
    grid-template-columns: repeat(5, var(--dmx-dot-size));
    grid-template-rows: repeat(5, var(--dmx-dot-size));
    gap: var(--dmx-gap);
    width: calc(5 * var(--dmx-dot-size) + 4 * var(--dmx-gap));
    height: calc(5 * var(--dmx-dot-size) + 4 * var(--dmx-gap));
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: var(--gray-70, #71717a);
}

.dmx-root.pc-dotm--sm,
.pc-dotm.pc-dotm--sm,
.pc-prism-bloom.pc-dotm--sm {
    --dmx-dot-size: 3px;
    --dmx-gap: 2px;
}

.dmx-root.pc-dotm--xs,
.pc-dotm.pc-dotm--xs,
.pc-prism-bloom.pc-dotm--xs {
    --dmx-dot-size: 2px;
    --dmx-gap: 1px;
}

.dmx-root.pc-dotm--xxs,
.pc-dotm.pc-dotm--xxs,
.pc-prism-bloom.pc-dotm--xxs {
    --dmx-dot-size: 1.5px;
    --dmx-gap: 1px;
}

.dmx-dot {
    width: var(--dmx-dot-size);
    height: var(--dmx-dot-size);
    border-radius: 999px;
    display: block;
    background: var(--dmx-dot-fill, currentColor);
    opacity: calc(0.5 * (var(--dmx-opacity-base) + var(--dmx-opacity-mid)));
    filter: none;
    transform-origin: center;
    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;
}

@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));
    }
}

.spinner-border,
.spinner-border-sm {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
}

.pc-prism-host,
.pc-dotm-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .dmx-ripple-echo,
    .dmx-dot {
        animation: none !important;
        opacity: 0.72;
        filter: none;
    }
}