:root {
    --bg: #fff;
}

.sparkle {
    z-index: 100;
    position: relative;
}

.star {
    --star-size: 20px;
    --star-life: 7s;
    --start-left: 0px;
    --start-top: 0px;
    --end-left: 0px;
    --end-top: 0px;
    --star-color: #f1c40f;
    width: var(--star-size);
    height: var(--star-size);
    left: var(--end-left);
    top: var(--end-top);
    background: var(--star-color);
    clip-path: polygon( 50% 0%, /* Top point */
        61% 35%, /* Top-right inner */
        98% 35%, /* Top-right outer */
        68% 57%, /* Bottom-right inner */
        79% 91%, /* Bottom-right outer */
        50% 70%, /* Bottom inner */
        21% 91%, /* Bottom-left outer */
        32% 57%, /* Bottom-left inner */
        2% 35%, /* Top-left outer */
        39% 35% /* Top-left inner */
    );
    display: inline-block;
    position: absolute;
    mix-blend-mode: lighten;
    animation: slide var(--star-life) ease-in forwards;
}

@keyframes slide {
    0% {
        left: var(--start-left);
        top: var(--start-top);
        transform: rotate(0deg);
        opacity: 0;
    }

    100% {
        left: var(--end-left);
        top: var(--end-top);
        transform: rotate(calc(180deg * var(--star-life-num))) scale(0.5);
        opacity: 1;
    }
}