.firework-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.firework {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: explode 1s ease-out forwards;
    background: radial-gradient(circle, 
        rgba(255,255,255,0.8) 0%, 
        currentColor 60%, 
        rgba(255,255,255,0) 100%);
    box-shadow: 0 0 4px currentColor,
                0 0 8px currentColor,
                0 0 12px currentColor;
    transform-origin: center center;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: shoot 1s ease-out forwards;
    background: radial-gradient(circle, 
        rgba(255,255,255,0.8) 0%, 
        currentColor 60%, 
        rgba(255,255,255,0) 100%);
    box-shadow: 0 0 2px currentColor,
                0 0 4px currentColor;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes explode {
    0% {
        transform: scale(1) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: scale(30) translateZ(0);
        opacity: 0;
    }
}

@keyframes shoot {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--x), var(--y), 0);
        opacity: 0;
    }
}

/* Оптимизация для устройств с высоким DPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .firework {
        width: 4px;
        height: 4px;
        background: radial-gradient(circle, 
            rgba(255,255,255,1) 0%, 
            currentColor 40%, 
            rgba(255,255,255,0) 100%);
        box-shadow: 0 0 2px currentColor,
                   0 0 4px currentColor,
                   0 0 6px currentColor;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .particle {
        width: 3px;
        height: 3px;
        background: radial-gradient(circle, 
            rgba(255,255,255,1) 0%, 
            currentColor 40%, 
            rgba(255,255,255,0) 100%);
        box-shadow: 0 0 1px currentColor,
                   0 0 2px currentColor;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    @keyframes explode {
        0% {
            transform: scale(1) translateZ(0);
            opacity: 1;
        }
        100% {
            transform: scale(35) translateZ(0);
            opacity: 0;
        }
    }

    @keyframes shoot {
        0% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
        100% {
            transform: translate3d(var(--x), var(--y), 0);
            opacity: 0;
        }
    }
}