body {
    background: #000;
}

.lightrope {
    position: absolute;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    margin-top: -40px;
}

    .lightrope li {
        position: relative;
        display: inline-block;
        margin: 0 22px;
        list-style: none;
        animation: sway 3s ease-in-out infinite;
        transform-origin: top center;
    }

        /* Sparkler wire */
        .lightrope li::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 58px;
            border-radius: 32%;
            background: linear-gradient(to bottom, #a0a0a0, #aaa, #bfbfbf);
            transform: translateX(-50%);
        }

        /* Sparkler explosion core */
        .lightrope li::after {
            content: "";
            position: absolute;
            top: 56px;
            left: 50%;
            width: 22px;
            height: 22px;
            transform: translateX(-50%);
            pointer-events: none;
            background:
                radial-gradient(circle at center,
                    transparent 0 30%,
                    #fff 30% 32%,
                    transparent 32% 100%
                ),
                conic-gradient(
                    #fff 0deg 6deg,
                    transparent 6deg 18deg,
                    #ffd700 18deg 24deg,
                    transparent 24deg 40deg,
                    #ffae00 40deg 48deg,
                    transparent 48deg 66deg,
                    #fff 66deg 72deg,
                    transparent 72deg 90deg,
                    #ffd700 90deg 98deg,
                    transparent 98deg 140deg,
                    #fff 140deg 146deg,
                    transparent 146deg 180deg,
                    #ffae00 180deg 188deg,
                    transparent 188deg 230deg,
                    #fff 230deg 236deg,
                    transparent 250deg 270deg,
                    #ffd700 270deg 276deg,
                    transparent 276deg 296deg,
                    #fff 300deg 306deg,
                    transparent 306deg 330deg,
                    #ffd700 330deg 336deg,
                    transparent 336deg 360deg
                );
            filter:
                drop-shadow(0 0 3px rgba(255,255,255,0.9))
                drop-shadow(0 0 5px rgba(255,200,0,0.8));
            animation: sparkPulse 0.12s infinite;
        }



        /* Height variance */
        .lightrope li:nth-child(3n+1)::before {
            height: 50px;
        }

        .lightrope li:nth-child(3n+2)::before {
            height: 62px;
        }

        .lightrope li:nth-child(3n)::before {
            height: 54px;
        }

        .lightrope li:nth-child(3n+1)::after {
            top: 48px;
        }

        .lightrope li:nth-child(3n+2)::after {
            top: 60px;
        }

        .lightrope li:nth-child(3n)::after {
            top: 52px;
        }

        /* Phase staggering */
        .lightrope li:nth-child(2n)::after {
            animation-delay: 0.05s;
        }

        .lightrope li:nth-child(3n)::after {
            animation-delay: 0.09s;
        }

/* Firework-style micro explosion */
@keyframes microFirework {
    0% {
        opacity: 1;
        box-shadow: 0 0 2px #fff, 2px -1px 3px #ffd700, -2px 1px 3px #ffae00;
    }

    20% {
        box-shadow: 0 0 3px #fff, 3px -2px 4px rgba(255,215,0,0.9), -3px 2px 4px rgba(255,160,0,0.9), 1px 3px 4px rgba(255,255,255,0.8);
    }

    40% {
        box-shadow: 0 0 2px #fff, -4px -3px 5px rgba(255,200,0,0.9), 4px 3px 5px rgba(255,140,0,0.9);
    }

    60% {
        box-shadow: 0 0 3px #fff, 5px -1px 6px rgba(255,215,0,1), -5px 2px 6px rgba(255,180,0,0.9), 0 4px 5px rgba(255,255,255,0.7);
    }

    80% {
        opacity: 0.7;
        box-shadow: 0 0 2px #fff, -3px 4px 4px rgba(255,170,0,0.8);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 2px #fff, 2px -1px 3px #ffd700;
    }
}

/* Gentle hand movement */
@keyframes sway {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(1.5deg);
    }

    75% {
        transform: rotate(-1.5deg);
    }
}

.lightrope li:first-child {
    margin-left: -40px;
}
@keyframes sparkPulse {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(0.7);
    }

    40% {
        opacity: 0.9;
        transform: translateX(-50%) scale(1);
    }

    70% {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.85);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scale(0.7);
    }
}