.particle-container {
    z-index: -1;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0; left: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    --size: 7px;
    --color1: #fff;
    --color2: #e6e6e6;
    --color3: #c8c8c8;
    --color4: #b4b4b4;
    --shadow: rgba(255,255,255,0.5);
    --duration: 6s;
    --delay: 0s;

    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: radial-gradient(var(--color1) 40%, var(--color2), var(--color3), var(--color4));
    box-shadow: 3px 5px 10px var(--shadow);
    top: 0;
    left: 0;
    animation: particle-motion var(--duration) linear infinite;
    animation-delay: var(--delay);
}

@keyframes particle-motion {
    0%   { transform: translate(0, 0); opacity: 1; }
    20%  { transform: translate(5px, -20px); opacity: 0.8; }
    40%  { transform: translate(-10px, -30px); opacity: 0.7; }
    60%  { transform: translate(15px, -40px); opacity: 0.5; }
    80%  { transform: translate(-20px, -60px); opacity: 0.2; }
    100% { transform: translate(40px, -100px); opacity: 0; }
}