.particle.sparkle {
    --icon-sparkles: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22345%22%20height%3D%22183%22%20fill%3D%22none%22%20viewBox%3D%220%200%20345%20183%22%3E%3Cg%20filter%3D%22url%28%23a%29%22%3E%3Cpath%20fill%3D%22url%28%23b%29%22%20d%3D%22M67.5%2062.25C67.5%2072.605%2075.895%2081%2086.25%2081h7.5C99.963%2081%20105%2086.037%20105%2092.25s-5.037%2011.25-11.25%2011.25h-7.5c-10.355%200-18.75%208.395-18.75%2018.75v31.25c0%205.523-4.477%2010-10%2010s-10-4.477-10-10v-31.25c0-10.355-8.395-18.75-18.75-18.75h-7.5C15.037%20103.5%2010%2098.463%2010%2092.25S15.037%2081%2021.25%2081h7.5c10.355%200%2018.75-8.395%2018.75-18.75V31c0-5.523%204.477-10%2010-10s10%204.477%2010%2010z%22%2F%3E%3Cpath%20fill%3D%22url%28%23c%29%22%20d%3D%22M180%2076c0%205.523%204.477%2010%2010%2010h2.5a7.5%207.5%200%200%201%200%2015H190c-5.523%200-10%204.477-10%2010v10a7.5%207.5%200%200%201-15%200v-10c0-5.523-4.477-10-10-10h-2.5a7.5%207.5%200%200%201%200-15h2.5c5.523%200%2010-4.477%2010-10V66a7.5%207.5%200%200%201%2015%200z%22%2F%3E%3Cpath%20fill%3D%22url%28%23d%29%22%20d%3D%22M292.5%2081a7.5%207.5%200%200%200%207.5%207.5h2.5a5%205%200%200%201%200%2010H300a7.5%207.5%200%200%200-7.5%207.5v5a5%205%200%200%201-10%200v-5a7.5%207.5%200%200%200-7.5-7.5h-2.5a5%205%200%200%201%200-10h2.5a7.5%207.5%200%200%200%207.5-7.5v-5a5%205%200%200%201%2010%200z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2210%22%20x2%3D%22103.441%22%20y1%3D%2276.517%22%20y2%3D%22117.724%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fffc99%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f6a800%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%22140%22%20x2%3D%22201.912%22%20y1%3D%2284.75%22%20y2%3D%22133.342%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fffc99%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f6a800%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22d%22%20x1%3D%22255%22%20x2%3D%22316.912%22%20y1%3D%2284.75%22%20y2%3D%22133.342%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fffc99%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f6a800%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22a%22%20width%3D%22310.3%22%20height%3D%22155.3%22%20x%3D%223.6%22%20y%3D%2218.6%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dy%3D%224%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%223.2%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.00845969%200%200%200%200%200.0986494%200%200%200%200%200.293269%200%200%200%200.2%200%22%2F%3E%3CfeBlend%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_365_2%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_365_2%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
    width: 115px;
    height: 183px;
    background-position: var(--pos) 0%;
}

.particle.sparkle.type1 {
    --pos: 0%;
}

.particle.sparkle.type2 {
    --pos: 50%;
}

.particle.sparkle.type3 {
    --pos: 100%;
}

.particle.sparkle.animated {
    background-color: white;
    mask-image: var(--icon-sparkles);
    mask-position: var(--pos) 0%;
}

.particle.sparkle.animated::after {
    background-position: var(--pos) 0%;
    content: "";
    display: block;
    height: 100%;
    mask-image: linear-gradient(135deg, black 40%, rgba(0, 0, 0, 0.7), black 60%);
    mask-size: 300% 100%;
    background-image: var(--icon-sparkles);
    animation: particle-sparkle-shine 3s infinite ease-in-out;
}

.particle.sparkle:not(.animated) {
    background-image: var(--icon-sparkles);
}

@keyframes particle-sparkle-shine {
    0% {
        mask-position: 0% 0;
    }
    80% {
        mask-position: 120% 0;
    }
    100% {
        mask-position: 120% 0;
    }
}