/* Particle Background Styling */
.particle-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    background-color: var(--background-color); /* Night sky background */
}

/* Particle (Star) Styling */
.particle {
    position: absolute;
    background: var(--accent-color); /* Default color */
    border-radius: 50%;
    animation: driftAndPulse 10s infinite linear; /* Slower and longer animation for smoother effect */
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.7); /* Enhanced glow */
    opacity: 0.8;
    pointer-events: none; /* Prevent particles from interfering with user interactions */
}

/* Keyframes for Drift, Pulse, and Twinkle Animation */
@keyframes driftAndPulse {
    0% {
        transform: translate(0, 0) scale(0.9);
        opacity: 0.7;
    }
    25% {
        transform: translate(5vw, -5vh) scale(1.1); /* Smooth horizontal and vertical drift */
        opacity: 0.5; /* Pulsing effect */
    }
    50% {
        transform: translate(-5vw, -10vh) scale(1);
        opacity: 0.8;
    }
    75% {
        transform: translate(10vw, -15vh) scale(1.2); /* Slightly larger drift */
        opacity: 0.6; /* Another pulse */
    }
    100% {
        transform: translate(-10vw, -20vh) scale(0.9);
        opacity: 0.5;
    }
}

/* Enhanced Purple-Blue Flame Effect */
.flame-effect {
    position: relative;
    animation: purpleBlueFlame 3s infinite alternate, waveMotion 5s ease-in-out infinite;
    box-shadow: 0 0 10px #5a5aff, 0 0 20px #957dff, 0 0 35px #9b5df2;
}

/* Keyframes for Purple-Blue Flame Animation */
@keyframes purpleBlueFlame {
    0%, 100% {
        background: linear-gradient(45deg, #5a5aff, #957dff, #9b5df2);
        background-size: 200% 200%;
        background-position: 0% 50%;
        box-shadow: 0 0 20px #5a5aff, 0 0 30px #957dff;
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 25px #957dff, 0 0 35px #5a5aff;
    }
}

/* Optimized Wave Motion */
@keyframes waveMotion {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* Flickering Effect for Flame */
@keyframes flicker {
    0%, 100% {
        box-shadow: 0 0 10px rgba(90, 90, 255, 0.5), 0 0 20px rgba(149, 125, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 12px rgba(90, 90, 255, 0.6), 0 0 22px rgba(149, 125, 255, 0.5);
    }
}

/* Apply Flicker and Wave Effects to Flame */
.flame-effect-flicker {
    animation: purpleBlueFlame 3s infinite alternate, flicker 1.5s infinite alternate ease-in-out, waveMotion 5s ease-in-out infinite;
}