.particle-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(400px) rotateX(25deg);
    transform-origin: center 70%;
    animation: particle-grid-scroll 8s linear infinite;
}

@keyframes particle-grid-scroll {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 60px;
    }
}

.glitch-particle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: var(--neon-pink, #ff2d95);
    box-shadow: 0 0 8px var(--neon-pink, #ff2d95), 0 0 20px var(--neon-pink, #ff2d95);
    animation: glitch-float 6s ease-in-out infinite;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.glitch-particle.p1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
    background: var(--neon-cyan, #00f0ff);
    box-shadow: 0 0 8px var(--neon-cyan, #00f0ff);
}

.glitch-particle.p2 {
    top: 30%;
    right: 15%;
    animation-delay: 1.2s;
    width: 6px;
    height: 2px;
}

.glitch-particle.p3 {
    bottom: 25%;
    left: 20%;
    animation-delay: 2.4s;
    background: var(--neon-yellow, #ffe600);
    box-shadow: 0 0 8px var(--neon-yellow, #ffe600);
}

.glitch-particle.p4 {
    top: 60%;
    right: 25%;
    animation-delay: 3.6s;
    width: 3px;
    height: 8px;
}

.glitch-particle.p5 {
    bottom: 40%;
    left: 60%;
    animation-delay: 4.8s;
    background: var(--neon-purple, #b026ff);
    box-shadow: 0 0 8px var(--neon-purple, #b026ff);
    width: 8px;
    height: 3px;
}

.glitch-particle.p6 {
    top: 80%;
    left: 45%;
    animation-delay: 0.8s;
    background: var(--neon-cyan, #00f0ff);
    box-shadow: 0 0 8px var(--neon-cyan, #00f0ff);
    width: 5px;
    height: 5px;
}

.glitch-particle.p7 {
    top: 10%;
    right: 40%;
    animation-delay: 2s;
    background: var(--neon-pink, #ff2d95);
    box-shadow: 0 0 8px var(--neon-pink, #ff2d95);
    width: 3px;
    height: 6px;
}

@keyframes glitch-float {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }

    25% {
        transform: translateY(-20px) translateX(10px);
        opacity: 1;
    }

    50% {
        transform: translateY(-5px) translateX(-15px);
        opacity: 0.3;
    }

    75% {
        transform: translateY(15px) translateX(5px);
        opacity: 0.8;
    }
}