.sparkle-layer {
     position: absolute;
     inset: 0;
     pointer-events: none;
     z-index: 4;
     --sparkle-size: 8px;
     --sparkle-lifespan: 3s;
     --move-distance: 20px;
}
.sparkle-move-fade-up {
     position: absolute;
     width: var(--sparkle-size);
     height: var(--sparkle-size);
     border-radius: 50%;
     will-change: transform, opacity;

     animation-name: sparkle-move-fade-up;
     animation-duration: var(--sparkle-lifespan);
     animation-timing-function: linear;
     animation-fill-mode: forwards;
     animation-iteration-count: 1;


     box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5);
}


@keyframes sparkle-move-fade-up {
     0% {
          transform: translateY(var(--move-distance)) translateX(0px) rotate(0deg);
          opacity: 0;
          filter: blur(2px) brightness(0.4);
     }
     10% {
          opacity: 1;
          filter: blur(1px) brightness(1);
     }
     25% {
          transform: translateY(calc(var(--move-distance) * 0.5)) translateX(-3px);
          filter: blur(0px) brightness(1.2);
     }
     50% {
          transform: translateY(0px) translateX(3px) rotate(0deg);
          filter: blur(0.5px) brightness(1);
     }
     75% {
          transform: translateY(calc(-1 * var(--move-distance) * 0.5)) translateX(-3px);
          filter: blur(1px) brightness(0.8);
     }
     100% {
          transform: translateY(calc(-1 * var(--move-distance))) translateX(0px) rotate(0deg);
          opacity: 0;
          filter: blur(2px) brightness(0.4);
     }
}