/* particles.css */
.card {
    position: relative;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 6px; /* Reduced from 10px */
    height: 6px; /* Reduced from 10px */
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
    animation: drift 25s infinite ease; /* Slower: 25s base duration */
    z-index: 0;
}

/* Vary animation properties for realism */
.particle:nth-child(odd) {
    animation-direction: alternate;
    animation-duration: 28s; /* Slower: 28s */
}

.particle:nth-child(even) {
    animation-delay: -12s; /* Adjusted delay for longer cycle */
    animation-duration: 30s; /* Slower: 30s */
}

.particle:nth-child(3n) {
    animation-duration: 26s; /* Slower: 26s */
    opacity: 0.2; /* Fainter particles */
}

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    20% {
        transform: translate(15vw, 10vh) rotate(10deg) scale(1.1);
        opacity: 0.5;
    }
    40% {
        transform: translate(25vw, -5vh) rotate(-5deg) scale(0.9);
        opacity: 0.4;
    }
    60% {
        transform: translate(10vw, 15vh) rotate(15deg) scale(1.05);
        opacity: 0.45;
    }
    80% {
        transform: translate(20vw, 5vh) rotate(0deg) scale(0.95);
        opacity: 0.35;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
}