/**
 * Toast Notification Styles
 *
 * Styles for toast notifications (badge unlocks, XP gains, level-ups)
 *
 * Features:
 * - Slide-in animations
 * - Auto-dismiss progress bar
 * - Badge unlock celebration effects
 * - Level-up pulse animation
 */

/* ============================================================================
   TOAST CONTAINER
   ============================================================================ */

#toast-container {
  pointer-events: none; /* Allow clicks through container */
}

#toast-container > * {
  pointer-events: auto; /* But not through toasts */
}

/* ============================================================================
   TOAST ANIMATIONS
   ============================================================================ */

/* Auto-dismiss progress bar animation */
@keyframes toast-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.toast-progress-bar {
  animation: toast-progress 5s linear;
}

/* Badge unlock celebration pulse */
@keyframes badge-unlock-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.badge-unlock-animation {
  animation: badge-unlock-pulse 0.6s ease-in-out;
}

/* Level-up pulse */
@keyframes levelup-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
}

.levelup-pulse {
  animation: levelup-pulse 1.5s ease-in-out infinite;
}

/* ============================================================================
   TOAST HOVER EFFECTS
   ============================================================================ */

.toast-notification:hover {
  transform: translateY(-2px) !important;
}

/* Pause progress bar on hover */
.toast-notification:hover .toast-progress-bar {
  animation-play-state: paused;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
  #toast-container {
    top: 1rem !important;
    right: 1rem !important;
    left: 1rem !important;
  }

  .toast-notification {
    max-width: 100% !important;
  }
}