@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes popIn{
  0%{transform:scale(.5);opacity:0}
  70%{transform:scale(1.05)}
  100%{transform:scale(1);opacity:1}
}
@keyframes checkPop{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes spinOnce{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes floatUp{
  0%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-30px)}
}
@keyframes xpFloat{
  0%{opacity:1;transform:translateY(0) scale(1)}
  50%{opacity:1;transform:translateY(-15px) scale(1.1)}
  100%{opacity:0;transform:translateY(-30px) scale(.9)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}
.shake{animation:shake .4s ease}
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 4px rgba(176,176,176,.15)}
  50%{box-shadow:0 0 12px rgba(176,176,176,.3)}
}
@keyframes glowPulseGreen{
  0%,100%{box-shadow:0 0 4px rgba(76,175,80,.15)}
  50%{box-shadow:0 0 12px rgba(76,175,80,.3)}
}
@keyframes glowPulseBlue{
  0%,100%{box-shadow:0 0 4px rgba(33,150,243,.15)}
  50%{box-shadow:0 0 12px rgba(33,150,243,.3)}
}
@keyframes glowPulsePurple{
  0%,100%{box-shadow:0 0 4px rgba(156,39,176,.15)}
  50%{box-shadow:0 0 12px rgba(156,39,176,.3)}
}
@keyframes glowPulseGold{
  0%,100%{box-shadow:0 0 4px rgba(255,215,0,.2)}
  50%{box-shadow:0 0 16px rgba(255,215,0,.4)}
}
@keyframes confettiFall{
  0%{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}
  100%{opacity:0;transform:translateY(200px) rotate(720deg) scale(.3)}
}
@keyframes levelFlash{
  0%{opacity:0}
  30%{opacity:.3}
  100%{opacity:0}
}
@keyframes streakFire{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}
@keyframes typewriterCursor{0%,100%{opacity:1}50%{opacity:0}}

/* Premium animations */
@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@keyframes rippleOut{
  0%{transform:scale(1);opacity:.4}
  100%{transform:scale(2.5);opacity:0}
}
@keyframes avatarPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.2)}
  50%{box-shadow:0 0 0 4px rgba(var(--primary-rgb),.06)}
}
@keyframes glowPulseAvatar{
  0%,100%{box-shadow:0 0 8px rgba(var(--primary-rgb),.15)}
  50%{box-shadow:0 0 20px rgba(var(--primary-rgb),.35)}
}
@keyframes goalFlash{
  0%{background-color:rgba(var(--primary-rgb),.08)}
  100%{background-color:transparent}
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.animate-in{animation:fadeInUp .4s ease forwards;opacity:0}
.animate-in:nth-child(1){animation-delay:.05s}
.animate-in:nth-child(2){animation-delay:.1s}
.animate-in:nth-child(3){animation-delay:.15s}
.animate-in:nth-child(4){animation-delay:.2s}
.animate-in:nth-child(5){animation-delay:.25s}
.animate-in:nth-child(6){animation-delay:.3s}
.animate-in:nth-child(7){animation-delay:.35s}
.animate-in:nth-child(8){animation-delay:.4s}
.animate-in:nth-child(9){animation-delay:.45s}
.animate-in:nth-child(10){animation-delay:.5s}
.streak-fire{animation:streakFire 1.5s ease infinite}
.typewriter-cursor::after{
  content:'|';animation:typewriterCursor .8s step-end infinite;
  color:var(--primary);font-weight:300;
}