.firefly {
    position: fixed;
    width: 3px;
    height: 3px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 255, 150, 0.8);
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s ease-in;
}

.firefly.active {
    opacity: 1;
    animation: move-firefly 20s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.firefly.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.firefly.glow {
    animation: 
        move-firefly 20s cubic-bezier(0.4, 0, 0.6, 1) infinite,
        glow-firefly var(--glow-duration, 7s) ease-in-out infinite;
}

@keyframes glow-firefly {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px 2px rgba(255, 255, 150, 0.8);
    }
    50% {
        opacity: 0.3;
        box-shadow: 0 0 5px 1px rgba(255, 100, 100, 0);
    }
}

@keyframes move-firefly {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(100px, -150px) rotate(45deg);
    }
    50% {
        transform: translate(-50px, 100px) rotate(-45deg);
    }
    75% {
        transform: translate(150px, 50px) rotate(45deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.firefly:nth-child(2n) {
    animation-duration: 25s;
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.firefly:nth-child(3n) {
    animation-duration: 30s;
    animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
}

.firefly:nth-child(5n) {
    animation-duration: 35s;
    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
} 

@media (prefers-color-scheme: dark) {
    .firefly {
        background: #fff;
        box-shadow: 0 0 10px 2px rgba(255, 255, 150, 0.8);
    }
}