/* Celebration Animations */

/* Button success animation */
@keyframes buttonSuccess {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.animate-button-success {
  animation: buttonSuccess 0.5s ease-in-out;
}

/* Pulse animation for objectives */
@keyframes pulseOnce {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(99, 102, 241, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

.animate-pulse-once {
  animation: pulseOnce 1s ease-out;
}

/* Shimmer effect for near completion */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(147, 51, 234, 0.1),
    transparent
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Float up animation for milestone badges */
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(-50%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) translateX(-50%) scale(1.5);
  }
}

/* Trophy bounce animation */
@keyframes trophyBounce {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateY(0) scale(1.2);
  }
  70% {
    transform: translateY(-10px) scale(1);
  }
  85% {
    transform: translateY(0) scale(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Crown drop animation */
@keyframes crownDrop {
  0% {
    opacity: 0;
    transform: translateY(-100px) rotate(-45deg) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1.2);
  }
  70% {
    transform: translateY(-10px) rotate(10deg) scale(1);
  }
  85% {
    transform: translateY(0) rotate(-5deg) scale(1.05);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

/* Slide in from right animation */
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slideInRight {
  animation: slideInRight 0.5s ease-out;
}

/* Slide down animation */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%) translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}

.animate-slideDown {
  animation: slideDown 0.5s ease-out;
}

/* Fade out animation */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-fadeOut {
  animation: fadeOut 0.5s ease-out forwards;
}

/* Sparkle effect */
@keyframes sparkle {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}

.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fbbf24 0%, transparent 70%);
  animation: sparkle 1s ease-out;
}

/* Progress bar color transitions */
.progress-bar-transition {
  transition: width 0.5s ease-out, background-color 0.3s ease-out;
}

/* Celebration container */
.celebration-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* Notification styles */
.notification-success {
  animation: slideInRight 0.5s ease-out;
}

/* Glow effect for completed objectives */
@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.8), 0 0 30px rgba(34, 197, 94, 0.6);
  }
  100% {
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
  }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* Star burst effect */
@keyframes starBurst {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.5) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(2) rotate(360deg);
  }
}

.star-burst {
  position: absolute;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E") center no-repeat;
  background-size: contain;
  animation: starBurst 1s ease-out;
}