/* One brand particle field, with a bounded density on smaller screens. */
.cox-ui-grid-bg,
.cox-ui-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.cox-ui-grid-bg {
    background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 64px 64px;
}

.cox-ui-particles > span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--cox-brand-red);
    box-shadow: 0 0 12px rgba(237, 28, 36, .72);
    opacity: var(--o);
    animation: cox-particle-drift var(--d) linear var(--delay) infinite;
}

@keyframes cox-particle-drift {
    from { transform: translate3d(-56px, -40px, 0); opacity: calc(var(--o) * .72); }
    to { transform: translate3d(92px, 88px, 0); opacity: var(--o); }
}

@media (max-width: 900px) {
    .cox-ui-particles > span:nth-child(n + 181) { display: none; }
}

@media (max-width: 480px) {
    .cox-ui-particles > span:nth-child(n + 121) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cox-ui-particles > span { animation: none; }
}