/* ================================================
   FLOATING PARTICLES ANIMATION
   ================================================ */

/* Container positioned at bottom of hero section only */
#particles-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 300px;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}


.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: floatUp linear infinite;
}

/* Particle variations with different sizes - LIGHT PURPLE */
.particle-small {
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(196, 181, 253, 0.8), rgba(167, 139, 250, 0.4));
    box-shadow: 0 0 8px rgba(196, 181, 253, 0.6);
}

.particle-medium {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(196, 181, 253, 0.9), rgba(167, 139, 250, 0.5));
    box-shadow: 0 0 12px rgba(196, 181, 253, 0.8);
}

.particle-large {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(196, 181, 253, 1), rgba(167, 139, 250, 0.6));
    box-shadow: 0 0 16px rgba(196, 181, 253, 1);
}

/* Float up animation with fade in/out */
@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(-300px) translateX(var(--drift-x, 0)) scale(1);
        opacity: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #particles-container {
        height: 200px;
    }

    @keyframes floatUp {
        0% {
            transform: translateY(0) translateX(0) scale(0.5);
            opacity: 0;
        }

        10% {
            opacity: 1;
        }

        80% {
            opacity: 1;
        }

        100% {
            transform: translateY(-200px) translateX(var(--drift-x, 0)) scale(1);
            opacity: 0;
        }
    }
}