.dot-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.dot-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260vmax;
    height: 260vmax;
    transform-origin: center;
    background-repeat: repeat;
    background-image: radial-gradient(
        circle,
        rgba(45, 212, 191, 0.22) 1px,
        transparent 1px
    );
    transition: translate 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: translate, rotate;
}

.dot-layer--far {
    background-size: 48px 48px;
    translate: calc(-50% + (var(--mx, 0) * 1px - 50vw) * 0.04)
        calc(-50% + (var(--my, 0) * 1px - 50vh) * 0.04);
    opacity: 0.64;
    animation: spin-far 140s linear infinite reverse;
}

.dot-layer--mid {
    background-size: 32px 32px;
    translate: calc(-50% + (var(--mx, 0) * 1px - 50vw) * 0.08)
        calc(-50% + (var(--my, 0) * 1px - 50vh) * 0.08);
    opacity: 0.54;
    animation: spin-mid 96s linear infinite reverse;
}

.dot-layer--near {
    background-size: 20px 20px;
    translate: calc(-50% + (var(--mx, 0) * 1px - 50vw) * 0.14)
        calc(-50% + (var(--my, 0) * 1px - 50vh) * 0.14);
    opacity: 0.44;
    animation: spin-near 68s linear infinite;
}

@keyframes spin-far {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}

@keyframes spin-mid {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}

@keyframes spin-near {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}

.dot-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px),
        rgba(45, 212, 191, 0.1),
        transparent 60%
    );
    opacity: var(--glow, 0);
    transition: opacity 400ms ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .dot-layer {
        animation: none;
        transition: none;
        translate: -50% -50%;
        will-change: auto;
    }

    .dot-glow {
        display: none;
    }
}