/* Animations & micro-interactions */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.screen.active { animation: fadeIn .4s ease; }

@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.q-timer-ring-wrap.warn { animation: pulse 1s ease-in-out infinite; }
.q-timer-ring-wrap.danger { animation: pulse 0.5s ease-in-out infinite; }

@keyframes correctPop { 0% { transform: scale(1); } 30% { transform: scale(1.04); } 100% { transform: scale(1); } }
.opt.correct { animation: correctPop .5s ease; }

@keyframes shake { 0%,100% { transform: translateX(-50%); } 25% { transform: translateX(-52%); } 75% { transform: translateX(-48%); } }
.toast.active { animation: shake .4s ease; }

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 81, 0.6); }
  50% { box-shadow: 0 0 0 12px rgba(255, 212, 81, 0); }
}
.pulse-gold { animation: pulseGold 1.5s infinite; }

@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.roadmap-step { animation: slideUp .5s ease backwards; }
.roadmap-step:nth-child(1) { animation-delay: .1s; }
.roadmap-step:nth-child(2) { animation-delay: .25s; }
.roadmap-step:nth-child(3) { animation-delay: .4s; }
.roadmap-step:nth-child(4) { animation-delay: .55s; }
.roadmap-step:nth-child(5) { animation-delay: .7s; }

/* Loading shimmer for tiles waiting on async data */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-shimmer {
  display: inline-block;
  background: linear-gradient(90deg, rgba(255,212,81,0.15) 0%, rgba(255,212,81,0.4) 50%, rgba(255,212,81,0.15) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}