.dot-pattern {
    --dot-shift: 20px;
    --dot-drift-duration: 38s;
    overflow: hidden;
    background-image: none;
    background-color: transparent;
}

.dot-pattern::before {
    content: '';
    position: absolute;
    inset: -12px;
    background-image:
        radial-gradient(circle, #ffffff 0.55px, transparent 1.1px),
        radial-gradient(circle, #ffffff 0.55px, transparent 1.1px);
    background-size: var(--dot-shift) var(--dot-shift);
    background-position: 0 0, calc(var(--dot-shift) / 2) calc(var(--dot-shift) / 2);
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation: dot-pattern-drift var(--dot-drift-duration) linear infinite;
}

@keyframes dot-pattern-drift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(var(--dot-shift), 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dot-pattern::before {
        animation: none;
        display: none;
    }

    .dot-pattern {
        background-image: url('../images/icons/deco_dots_tiny.svg');
        background-size: auto;
        background-position: center center;
    }
}