/* ============================================
   ANIMATIONS — Transitions, Keyframes
   ============================================ */

/* Theme transition — apply to all themed elements */
.app,
.header,
.toolbar,
.board,
.column,
.card,
.modal__content,
.btn {
  transition:
    background-color var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow),
    box-shadow var(--transition-slow);
}

/* ---- Fade In ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* ---- Slide Up (for modals, toasts) ---- */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ---- Scale In (for modals) ---- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- Skeleton Pulse ---- */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.skeleton {
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  animation: skeletonPulse 1.8s ease-in-out infinite;
}

.skeleton--text {
  height: 14px;
  width: 80%;
  margin-bottom: var(--space-2);
}

.skeleton--text-sm {
  height: 11px;
  width: 60%;
}

/* ---- Toast Animation ---- */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(100%) translateY(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ---- Card Drag States ---- */
.card.is-dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.card.drag-ghost {
  opacity: 0.85;
  transform: rotate(3deg) scale(1.02);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-drag);
}

/* ---- Column Drop Target ---- */
.column.drag-over .column__body {
  background: var(--accent-muted);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-md);
}

/* ---- Drop Placeholder ---- */
.drop-placeholder {
  height: 4px;
  background: var(--accent);
  border-radius: var(--radius-full);
  margin: var(--space-1) 0;
  animation: fadeIn 0.15s ease;
}

/* ---- Spin ---- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 0.8s linear infinite;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}