.bg {
  background: linear-gradient(
      180deg,
      rgba(19, 21, 25, 0.9) 7.49%,
      rgba(19, 21, 25, 0.414) 74.33%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}
.shadow {
  box-shadow: 0px 0px 10.2px 0px #b0ff0054;
}
.greenShadow {
  box-shadow: 0px 0px 10.2px 0px #36b9a18a;
}
.purpleShadow {
  box-shadow: 0px 0px 13.8px 0px #632a838a;
}

.winnerShadow {
  box-shadow: 0px 0px 18.1px 0px #93b26754 inset;
}

@keyframes marquee-horizontal {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--seg));
  }
}

.marquee-spin {
  animation-name: marquee-horizontal;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transition: animation-duration 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.winnerShadow {
  box-shadow: 0 0 20px rgba(150, 181, 106, 0.5);
}

.winner-border {
  animation: winnerBorderFade 0.4s ease-out forwards;
}

.winner-arrow {
  animation: winnerArrowSlide 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes winnerBorderFade {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes winnerArrowSlide {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes progressFill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.progress-anim {
  animation: progressFill var(--progress-duration, 5s) linear forwards;
}
/* 
   <div
                  className={
                    "h-full bg-[#4D4CFE]" +
                    (isCountingDown ? " progress-anim" : " w-0")
                  }
                  style={
                    isCountingDown
                      ? ({
                          "--progress-duration": `${PROGRESS_DURATION}ms`,
                        } as React.CSSProperties)
                      : undefined
                  }
                /> */

/* useEffect(() => {
    handleStripSpin();
  }, []); */