/* Modern custom scrollbar for options list */
#options-container::-webkit-scrollbar {
  width: 5px;
}

#options-container::-webkit-scrollbar-track {
  background: transparent;
}

#options-container::-webkit-scrollbar-thumb {
  background: #334155; /* slate-700 */
  border-radius: 9999px;
}

#options-container::-webkit-scrollbar-thumb:hover {
  background: #475569; /* slate-600 */
}

/* Dynamic Wheel transitions and text styling */
#decision-wheel {
  transform: rotate(-90deg);
  transition: transform 4s cubic-bezier(0.15, 0.85, 0.25, 1);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
}

#decision-wheel text {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  pointer-events: none;
  user-select: none;
}

/* Ticker physical wiggle effect */
@keyframes ticker-bounce {
  0% {
    transform: translate(-50%, 0) rotate(0deg);
  }
  30% {
    transform: translate(-50%, 0) rotate(-15deg);
  }
  70% {
    transform: translate(-50%, 0) rotate(5deg);
  }
  100% {
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.ticker-tick {
  animation: ticker-bounce 0.1s ease-out;
}

/* Modal animations */
.modal-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modal-active #modal-card {
  transform: scale(1) !important;
  opacity: 1 !important;
}

/* Confetti particles falling keyframes */
@keyframes confetti-fall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes confetti-drift {
  0%, 100% {
    margin-left: 0;
  }
  50% {
    margin-left: 30px;
  }
}

.confetti-particle {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation-name: confetti-fall, confetti-drift;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: linear, ease-in-out;
}

/* Scale up animation for elements (editing options transition) */
.option-row-enter {
  animation: scale-up 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scale-up {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}