.root {
  position: absolute;
  z-index: 10;
}

.particle {
  --custom-emoji-size: var(--particle-size, 1rem);

  position: absolute;
  offset-path: var(--offset-path);
  offset-rotate: 0deg;

  width: var(--particle-size, 1rem);
  height: var(--particle-size, 1rem);
  border-radius: 0.25rem;

  color: var(--color-primary);

  animation: 1.5s particle ease-out;
  animation-fill-mode: forwards;
}

@keyframes particle {
  0% {
    transform: scale(1);
    offset-distance: 0%;
  }

  50% {
    transform: scale(1.25);
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    offset-distance: 100%;
    opacity: 0;
  }
}
