/* Roulette Animation CSS */
.roulette-animation {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  opacity: 0;
  transition: opacity 0.8s ease;
  top: -75px !important;
  min-height: 100px;
}

.roulette-animation.loaded {
  opacity: 1;
}

/* Common layer styles */
.roulette-animation .roulette-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

.roulette-animation img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

/* ===== Layer Z-Index ===== */
.roulette-animation .wheel { z-index: 1; }
.roulette-animation .axis { z-index: 2; }
.roulette-animation .coin-group { z-index: 3; }
.roulette-animation .chip-group { z-index: 4; }
.roulette-animation .ball { z-index: 5; }

/* ===== Group Container ===== */
.roulette-animation .roulette-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ===== Timing Variables (4s loop) ===== */
.roulette-animation {
  --cycle: 4s;
  --popMax: 1.18;
}

/* ===== Wheel + Axis: Floating swing ===== */
.roulette-animation.loaded .wheel,
.roulette-animation.loaded .axis {
  transform-origin: 50% 50%;
  animation: rouletteFloatSwing var(--cycle) ease-in-out infinite;
}

@keyframes rouletteFloatSwing {
  0%, 15% { transform: rotate(0deg) translateY(0); }
  38% { transform: rotate(4deg) translateY(-3px); }
  62% { transform: rotate(-4deg) translateY(-3px); }
  80% { transform: rotate(0deg) translateY(0); }
  85%, 100% { transform: rotate(0deg) translateY(0); }
}

/* ===== Ball Animation ===== */
.roulette-animation.loaded .ball {
  opacity: 1;
  transform: translate3d(-10%, -12%, 0) scale(1.005);
  animation: rouletteBallMain var(--cycle) ease-in-out infinite;
}

@keyframes rouletteBallMain {
  0% {
    opacity: 1;
    transform: translate3d(-10%, -12%, 0) scale(1.005);
  }
  /* Arrive at bottom */
  45% {
    opacity: 1;
    transform: translate3d(6%, 10%, 0) scale(0.99);
  }
  /* Fade out at bottom */
  55% {
    opacity: 0;
    transform: translate3d(6%, 10%, 0) scale(0.99);
  }
  /* Reset to top (invisible) */
  56% {
    opacity: 0;
    transform: translate3d(-10%, -12%, 0) scale(1.005);
  }
  /* Fade in at top */
  70% {
    opacity: 1;
    transform: translate3d(-10%, -12%, 0) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translate3d(-10%, -12%, 0) scale(1.005);
  }
}

/* ===== Chip Group Animation ===== */
.roulette-animation.loaded .chip-group {
  animation: roulettePulseChip var(--cycle) cubic-bezier(.25,.1,.25,1) infinite;
}

@keyframes roulettePulseChip {
  0%, 24% { transform: scale(1); }
  32% { transform: scale(var(--popMax)); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ===== Coin Group Animation ===== */
.roulette-animation.loaded .coin-group {
  animation: roulettePulseCoin var(--cycle) cubic-bezier(.25,.1,.25,1) infinite;
}

@keyframes roulettePulseCoin {
  0%, 40% { transform: scale(1); }
  48% { transform: scale(var(--popMax)); }
  55% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  .roulette-animation .wheel,
  .roulette-animation .axis,
  .roulette-animation .ball,
  .roulette-animation .chip-group,
  .roulette-animation .coin-group {
    animation: none !important;
  }
}