.wheel-container {
  position: relative;
  width: 100%;
}

.wheel-container .bgwheel2 {
  position: absolute;
  top: 63px;
  left: -14px;
  z-index: 100;
  width: 100%;
}

.wheel-container .bgspin {
  position: absolute;
  top: 0;
  left: 0;
  animation: casinoSpin 8s ease-in-out infinite;
}

@keyframes casinoSpin {
    /* PHASE 1: Fast Spin */
    0% {
        transform: rotate(0deg);
        animation-timing-function: linear; /* Constant speed during initial spin */
    }
    /*
        THIS IS WHERE THE SMOOTH STOP BEGINS:
        At 37.5% of the animation duration, it starts decelerating.
        The 'ease-out' timing function makes the transition to the next state (stopped) smooth.
    */
    37.5% { /* (3 seconds / 8 seconds total) * 100% = 37.5% */
        transform: rotate(1080deg); /* 3 full rotations (3 * 360) */
        animation-timing-function: ease-out; /* <-- Key for smooth deceleration */
    }

    /* PHASE 2: Decelerate and Stop */
    45% { /* Short period to come to a near stop */
        transform: rotate(1110deg); /* A little extra rotation beyond 3 rotations */
        /* This custom cubic-bezier offers a stronger ease-out, making the final stop snappier */
        animation-timing-function: cubic-bezier(0.1, 0.7, 0.4, 1);
    }
    50% { /* Fully stopped here */
        transform: rotate(1115deg); /* Final stopped position */
        animation-timing-function: ease-in; /* Prepares for smooth acceleration in the next phase */
    }

    /* PHASE 3: Stay Stopped */
    81.25% {
        transform: rotate(1115deg); /* Hold the stopped position */
        animation-timing-function: linear;
    }

    /* PHASE 4: Accelerate and Start Spin */
    100% {
        transform: rotate(1475deg); /* Continues spin */
        animation-timing-function: ease-in; /* Smooth acceleration */
    }
}

.wheel-container .bgtop {
  position: absolute;
  top: 136px;
  left: 0;
  z-index: 1003;
}