.root {
  position: relative;
}

.number {
  --digit-offset: 0;
  --digit-offset-x: calc(8rem * var(--digit-offset) * 0.75);

  position: absolute;
  width: 8rem;
  height: 8rem;
  z-index: 2;

  transform: scale(0);
  top: 50%;
  left: calc(10% + var(--digit-offset-x));
  offset-path: path('M 0 0 C 128 -46 99 -376 93 -529');
  offset-anchor: center;
  offset-rotate: 0deg;

  pointer-events: none;

  animation:
    2.75s float 0.25s,
    2s show-up calc(var(--digit-offset) * 0.5s),
    1s dissapear 2s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.shiftOrigin {
  transform-origin: left;
}

.effect {
  position: absolute;
  top: calc(50% - 1rem);
  left: 10rem;
  transform: translate(-50%, -50%) scaleX(-1);

  z-index: 1;
  pointer-events: none;

  width: 18rem;
  height: 18rem;
}

.giftIcon {
  margin-inline-end: -0.375rem;
}

@keyframes show-up {
  0% {
    transform: scale(0);
  }

  25% {
    transform: scale(50%);
  }

  100% {
    transform: scale(100%);
  }
}

@keyframes dissapear {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes float {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}