/* Extra styles that Tailwind can't express inline */

/* Gradient text animation */
h1 {
  background-size: 200% auto;
  animation: gradientShift 4s linear infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Smooth list item entry */
#alcoholList li {
  animation: slideIn .25s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Result banner: slide in from top */
#result.show {
  display: flex;
  animation: slideDown .45s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(calc(-100% - 24px)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop {
  0%   { opacity: 0; transform: scale(.7); }
  100% { opacity: 1; transform: scale(1); }
}

/* Canvas crisp rendering */
#wheelCanvas {
  image-rendering: crisp-edges;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #07070f; }
::-webkit-scrollbar-thumb { background: #2a2a3e; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #1FBBB3; }