/**
 * Fischer AgentKit Transition Animations — Notion-Inspired
 *
 * Unified transition classes for Vue <Transition> components.
 * All durations reference Design Token variables for consistency.
 * Notion-style: smoother, more subtle transitions.
 */

/* ── Fade ── */
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--transition-fast);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ── Slide Up ── */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(6px);
  opacity: 0;
}

/* ── Slide Down ── */
.slide-down-enter-active,
.slide-down-leave-active {
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.slide-down-enter-from,
.slide-down-leave-to {
  transform: translateY(-6px);
  opacity: 0;
}

/* ── Slide Right ── */
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(-6px);
  opacity: 0;
}

/* ── Collapse (height) ── */
.collapse-enter-active,
.collapse-leave-active {
  transition: max-height var(--transition-slow) ease, opacity var(--transition-fast);
  overflow: hidden;
}

.collapse-enter-from,
.collapse-leave-to {
  max-height: 0;
  opacity: 0;
}

.collapse-enter-to,
.collapse-leave-from {
  max-height: 500px;
  opacity: 1;
}

/* ── Scale ── */
.scale-enter-active,
.scale-leave-active {
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.scale-enter-from,
.scale-leave-to {
  transform: scale(0.96);
  opacity: 0;
}

/* ── Stagger list items ── */
.stagger-list-enter-active {
  transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.stagger-list-leave-active {
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.stagger-list-enter-from,
.stagger-list-leave-to {
  transform: translateY(6px);
  opacity: 0;
}

.stagger-list-move {
  transition: transform var(--transition-normal);
}

/* ── Skeleton pulse (Notion-style: warmer, subtler) ── */
@keyframes skeleton-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.skeleton-loading {
  animation: skeleton-pulse 2s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--border-color-split) 50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
}

/* ── Pulse dot (running status) ── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Gentle bounce for interactive elements ── */
@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.gentle-bounce {
  animation: gentle-bounce 0.3s ease;
}
