/* ============================================
   EduCRS Flashcards — Animations
   ============================================ */

@keyframes levelFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes levelBtnStagger {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes feedbackSlideIn {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
}

/* Staggered level buttons */
.level-btn { animation: levelBtnStagger var(--dur-slow) var(--ease-out) both; }
.level-btn:nth-child(1) { animation-delay: 200ms; }
.level-btn:nth-child(2) { animation-delay: 280ms; }
.level-btn:nth-child(3) { animation-delay: 360ms; }
.level-btn:nth-child(4) { animation-delay: 440ms; }
.level-btn:nth-child(5) { animation-delay: 520ms; }

/* Card entrance animation */
.qa-card, .mc-card { animation: cardFadeIn var(--dur-slow) var(--ease-out) both; }

/* Feedback animation */
.mc-feedback.visible { animation: feedbackSlideIn var(--dur-normal) var(--ease-out); }

/* Smooth theme transition on everything */
.header, .sidebar, .content, .modal,
.qa-card-face, .mc-card, .mc-option-btn,
.form-input, .form-textarea, .form-select,
.set-item, .segment-btn, .source-pills {
  transition:
    background-color var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out),
    color var(--dur-normal) var(--ease-out);
}

/* Micro-interactions */
.level-btn,
.btn,
.set-item,
.mc-option-btn,
.icon-btn,
.create-btn {
  will-change: transform;
}