/* 1. MASTER OVERLAY
   Ensures the animation is fixed to the screen and above everything else.
*/
.firework-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;     /* Sits on top of all other UI */
    pointer-events: none; /* Allows user to click buttons "through" the sparks */
    overflow: hidden;
}

/* 2. THE FLIGHT PATH
   Moves the entire firework assembly.
   2% of 60s is 1.2s (the flight time).
*/
.firework-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    animation: fly-up 60s ease-out infinite;
}

/* 3. THE ROCKET
   A sleek white projectile that vanishes when the explosion begins.
*/
.rocket {
    width: 12px;
    height: 4px;
    background: #fff;
    border-radius: 2px;
    transform: rotate(-45deg);
    box-shadow: 0 0 25px 8px #fff, 0 0 50px #ff0055;
    animation: rocket-fade 60s infinite;
}

/* 4. THE SPARKS
   Base styling for 60 layers (20 divs + before/after pseudos).
*/
.s, .s::before, .s::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    filter: blur(1px) drop-shadow(0 0 8px white);
}

/* Animation Timings */
.s { animation: explode 60s ease-out infinite, flash-burst 60s ease-out infinite; }
.s::before { animation: explode-wide 60s ease-out infinite; }
.s::after { animation: explode-high 60s ease-out infinite; }

/* 5. INDIVIDUAL SPARK COORDINATES & COLORS
   Distributed in a circle for a dense, full explosion.
*/
.s1, .s5, .s9, .s13, .s17 { --c: #ff0055; } /* Pinkish Red */
.s2, .s6, .s10, .s14, .s18 { --c: #00fbff; } /* Cyan Blue */
.s3, .s7, .s11, .s15, .s19 { --c: #ffcc00; } /* Gold */
.s4, .s8, .s12, .s16, .s20 { --c: #ffffff; } /* White */

.s1 { --x: -180px; --y: -180px; } .s2 { --x: 180px; --y: -180px; }
.s3 { --x: -180px; --y: 180px; }  .s4 { --x: 180px; --y: 180px; }
.s5 { --x: 0px; --y: -250px; }    .s6 { --x: 0px; --y: 250px; }
.s7 { --x: -250px; --y: 0px; }    .s8 { --x: 250px; --y: 0px; }
.s9 { --x: -120px; --y: -220px; } .s10 { --x: 120px; --y: 220px; }
.s11 { --x: -220px; --y: -120px; }.s12 { --x: 220px; --y: 120px; }
.s13 { --x: -100px; --y: 100px; } .s14 { --x: 100px; --y: -100px; }
.s15 { --x: -300px; --y: -50px; } .s16 { --x: 300px; --y: 50px; }
.s17 { --x: -50px; --y: -300px; } .s18 { --x: 50px; --y: 300px; }
.s19 { --x: -150px; --y: 0px; }   .s20 { --x: 150px; --y: 0px; }

/* 6. KEYFRAMES
   Note: 2% of 60s = 1.2s | 10% of 60s = 6s
*/

@keyframes fly-up {
    0% { transform: translate(0, 0); }
    2% { transform: translate(75vw, -75vh); } /* Flight completes */
    100% { transform: translate(75vw, -75vh); } /* Stays at peak for rest of minute */
}

@keyframes rocket-fade {
    0%, 1.9% { opacity: 1; }
    2%, 100% { opacity: 0; }
}

@keyframes flash-burst {
    0%, 1.9% { opacity: 0; filter: brightness(4000%) blur(0px); }
    2% { opacity: 1; filter: brightness(4000%) blur(0px); } /* Instant blinding pop */
    4% { filter: brightness(300%) blur(1px); }
    10% { opacity: 0; filter: brightness(100%) blur(4px); }
    100% { opacity: 0; }
}

@keyframes explode {
    0%, 1.9% { opacity: 0; transform: scale(0.1); box-shadow: 0 0 #fff; }
    2% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 #fff; /* Solid white center core */
    }
    3.5% {
        /* Fast expansion to colors */
        opacity: 1;
        box-shadow: var(--x) var(--y) var(--c), calc(var(--x) * 0.5) calc(var(--y) * 0.5) var(--c);
    }
    10% {
        /* Slow fall and spread */
        opacity: 0;
        transform: translate(calc(var(--x) * 0.2), 400px) scale(1.3);
        box-shadow: calc(var(--x) * 1.2) calc(var(--y) * 1.2) var(--c);
    }
    100% { opacity: 0; }
}

/* Pseudo-element variations for extra spark density */
@keyframes explode-wide {
    0%, 1.9% { opacity: 0; }
    2% { opacity: 1; box-shadow: 0 0 #fff; }
    3.5% { box-shadow: calc(var(--x) * 1.8) calc(var(--y) * 0.4) #fff; }
    10% { opacity: 0; transform: translate(0, 450px); box-shadow: calc(var(--x) * 2.0) calc(var(--y) * 0.5) #fff; }
    100% { opacity: 0; }
}

@keyframes explode-high {
    0%, 1.9% { opacity: 0; }
    2% { opacity: 1; box-shadow: 0 0 #fff; }
    3.5% { box-shadow: calc(var(--x) * 0.2) calc(var(--y) * 2.2) var(--c); }
    10% { opacity: 0; transform: translate(0, 500px); box-shadow: calc(var(--x) * 0.3) calc(var(--y) * 2.4) var(--c); }
    100% { opacity: 0; }
}