/* Apply this class to any element to make it a firework */
.firework {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    left: 50%;
    top: 80%;
    animation: launch 2s ease-out infinite;
    pointer-events: none;
}

/* Use nth-child or add modifier classes for multiple fireworks */
.firework:nth-child(1) {
    left: 20%;
    animation: launch1 2s ease-out infinite;
}

.firework:nth-child(2) {
    left: 50%;
    animation: launch2 2.5s ease-out infinite 0.5s;
}

.firework:nth-child(3) {
    left: 80%;
    animation: launch3 2.2s ease-out infinite 1s;
}

.firework:nth-child(4) {
    left: 35%;
    animation: launch1 2.3s ease-out infinite 1.5s;
}

.firework:nth-child(5) {
    left: 65%;
    animation: launch2 2.1s ease-out infinite 2s;
}

@keyframes launch {
    0% {
        transform: translateY(0);
        opacity: 1;
        box-shadow: 0 0 10px 2px #ff0, 0 0 20px 4px #ff0;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 10px 2px #ff0, 0 0 20px 4px #ff0;
    }
    51% {
        box-shadow: 
            0 0 50px 15px #ff0,
            0 50px 50px 10px #f0f,
            50px 0 50px 10px #0ff,
            -50px 0 50px 10px #f00,
            0 -50px 50px 10px #0f0,
            35px 35px 50px 10px #f80,
            -35px 35px 50px 10px #08f,
            35px -35px 50px 10px #f08,
            -35px -35px 50px 10px #80f;
    }
    100% {
        transform: translateY(-400px);
        opacity: 0;
        box-shadow: 
            0 0 50px 15px transparent,
            0 80px 50px 10px transparent,
            80px 0 50px 10px transparent,
            -80px 0 50px 10px transparent,
            0 -80px 50px 10px transparent,
            60px 60px 50px 10px transparent,
            -60px 60px 50px 10px transparent,
            60px -60px 50px 10px transparent,
            -60px -60px 50px 10px transparent;
    }
}

@keyframes launch1 {
    0% {
        transform: translateY(0);
        opacity: 1;
        box-shadow: 0 0 10px 2px #ff0, 0 0 20px 4px #ff0;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 10px 2px #ff0, 0 0 20px 4px #ff0;
    }
    51% {
        box-shadow: 
            0 0 50px 15px #ff0,
            0 50px 50px 10px #f0f,
            50px 0 50px 10px #0ff,
            -50px 0 50px 10px #f00,
            0 -50px 50px 10px #0f0,
            35px 35px 50px 10px #f80,
            -35px 35px 50px 10px #08f,
            35px -35px 50px 10px #f08,
            -35px -35px 50px 10px #80f;
    }
    100% {
        transform: translateY(-420px);
        opacity: 0;
        box-shadow: 
            0 0 50px 15px transparent,
            0 80px 50px 10px transparent,
            80px 0 50px 10px transparent,
            -80px 0 50px 10px transparent,
            0 -80px 50px 10px transparent,
            60px 60px 50px 10px transparent,
            -60px 60px 50px 10px transparent,
            60px -60px 50px 10px transparent,
            -60px -60px 50px 10px transparent;
    }
}

@keyframes launch2 {
    0% {
        transform: translateY(0);
        opacity: 1;
        box-shadow: 0 0 10px 2px #0ff, 0 0 20px 4px #0ff;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 10px 2px #0ff, 0 0 20px 4px #0ff;
    }
    51% {
        box-shadow: 
            0 0 50px 15px #0ff,
            0 50px 50px 10px #f00,
            50px 0 50px 10px #ff0,
            -50px 0 50px 10px #0f0,
            0 -50px 50px 10px #f0f,
            35px 35px 50px 10px #f88,
            -35px 35px 50px 10px #8f8,
            35px -35px 50px 10px #88f,
            -35px -35px 50px 10px #ff8;
    }
    100% {
        transform: translateY(-450px);
        opacity: 0;
        box-shadow: 
            0 0 50px 15px transparent,
            0 80px 50px 10px transparent,
            80px 0 50px 10px transparent,
            -80px 0 50px 10px transparent,
            0 -80px 50px 10px transparent,
            60px 60px 50px 10px transparent,
            -60px 60px 50px 10px transparent,
            60px -60px 50px 10px transparent,
            -60px -60px 50px 10px transparent;
    }
}

@keyframes launch3 {
    0% {
        transform: translateY(0);
        opacity: 1;
        box-shadow: 0 0 10px 2px #f0f, 0 0 20px 4px #f0f;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 10px 2px #f0f, 0 0 20px 4px #f0f;
    }
    51% {
        box-shadow: 
            0 0 50px 15px #f0f,
            0 50px 50px 10px #0ff,
            50px 0 50px 10px #f00,
            -50px 0 50px 10px #ff0,
            0 -50px 50px 10px #0f0,
            35px 35px 50px 10px #08f,
            -35px 35px 50px 10px #f80,
            35px -35px 50px 10px #8f0,
            -35px -35px 50px 10px #f08;
    }
    100% {
        transform: translateY(-380px);
        opacity: 0;
        box-shadow: 
            0 0 50px 15px transparent,
            0 80px 50px 10px transparent,
            80px 0 50px 10px transparent,
            -80px 0 50px 10px transparent,
            0 -80px 50px 10px transparent,
            60px 60px 50px 10px transparent,
            -60px 60px 50px 10px transparent,
            60px -60px 50px 10px transparent,
            -60px -60px 50px 10px transparent;
    }
}

/* Dark background suggestion - add to body or container */
.firework-container {
    background: #0a0a1a;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}