/* ============================================================
   Animation Definitions
   ============================================================ */

/* 1. Drawer Slide Animation */
@keyframes drawerSlideIn {
  from {
      transform: translateY(100%);
      visibility: visible;
  }
  to {
      transform: translateY(0);
      visibility: visible;
  }
}

@keyframes drawerSlideOut {
  from {
      transform: translateY(0);
      visibility: visible;
  }
  to {
      transform: translateY(100%);
      visibility: hidden;
  }
}

/* 2. Confetti Animation */
@keyframes confettiFall {
  0% {
      transform: translateY(-20px) rotate(0deg);
  }
  100% {
      transform: translateY(100vh) rotate(360deg);
  }
}

/* 3. Congratulations Message Animation */
@keyframes congratsMessage {
  0% {
      transform: scale(0.5);
      opacity: 0;
  }
  70% {
      transform: scale(1.1);
      opacity: 0.7;
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

/* 4. Priority Change Animation */
@keyframes priorityPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* 5. Hover and Focus Animations */
@keyframes buttonHover {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* Animation Classes */
.magiccl-slide-in {
  animation: drawerSlideIn 0.3s ease forwards;
}

.magiccl-slide-out {
  animation: drawerSlideOut 0.3s ease forwards;
}

.magiccl-confetti-active {
  animation: confettiFall var(--fall-duration, 3s) linear forwards;
}

.magiccl-congrats-active {
  animation: congratsMessage 0.5s ease forwards;
}

.magiccl-priority-changed {
  animation: priorityPulse 0.3s ease;
}

.magiccl-button-hover {
  animation: buttonHover 0.3s ease;
}