.wml-sparkle-text {
    --text-height: 300px;

    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wml-sparkle-text .sparkle-content {
    font-size: 50px;
    text-align: center;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 100;
    position: relative;
    display: inline-block;
}

.wml-sparkle-text .star {
    --star-size: 50px;
    --star-life: 5s;

    --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);
    position: absolute;
    mix-blend-mode: lighten;
    animation: wml-sparkle-slide var(--star-life) ease-in forwards;
    pointer-events: none;
    z-index: 50;
    /* Use clip-path for a true 4-point star shape without background hacks */
    clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%);
}

/* Remove the :after pseudo-element hack */
.wml-sparkle-text .star:after {
    display: none;
}

@keyframes wml-sparkle-slide {
    0% {
        left: var(--start-left);
        top: var(--start-top);
        transform: rotate(0deg) scale(0);
        /* Start scaled down */
        opacity: 0;
    }

    10% {
        opacity: 1;
        /* Fade in quickly */
    }

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