/* ===== Oasis Animation System ===== */

/* --- Page Transitions --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96); }
}

/* --- Data Loading --- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* --- Utility Classes --- */
.animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out-expo) both; }
.animate-slide-up { animation: slideUp var(--duration-normal) var(--ease-out-expo) both; }
.animate-slide-down { animation: slideDown var(--duration-normal) var(--ease-out-expo) both; }
.animate-scale-in { animation: scaleIn var(--duration-normal) var(--ease-out-expo) both; }
.animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, var(--ctp-surface1) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }

/* Staggered children (use on parent, children get delayed) */
.stagger > :nth-child(1) { animation-delay: 0ms; }
.stagger > :nth-child(2) { animation-delay: 50ms; }
.stagger > :nth-child(3) { animation-delay: 100ms; }
.stagger > :nth-child(4) { animation-delay: 150ms; }
.stagger > :nth-child(5) { animation-delay: 200ms; }
.stagger > :nth-child(6) { animation-delay: 250ms; }
.stagger > :nth-child(7) { animation-delay: 300ms; }
.stagger > :nth-child(8) { animation-delay: 350ms; }

/* --- Vue Transition Classes --- */

/* Tab switching */
.tab-enter-active { animation: slideUp 300ms var(--ease-out-expo) both; }
.tab-leave-active { animation: fadeOut 150ms ease-out both; }

/* Modal */
.modal-enter-active { animation: scaleIn 200ms var(--ease-out-expo) both; }
.modal-leave-active { animation: scaleOut 150ms ease-in both; }

/* Modal backdrop */
.backdrop-enter-active { animation: fadeIn 200ms ease-out both; }
.backdrop-leave-active { animation: fadeOut 150ms ease-in both; }

/* List items */
.list-enter-active,
.list-leave-active { transition: all 200ms var(--ease-out-expo); }
.list-enter-from { opacity: 0; transform: translateY(6px); }
.list-leave-to { opacity: 0; transform: translateY(-6px); }
.list-move { transition: transform 200ms var(--ease-out-expo); }

/* Toast notifications */
.toast-enter-active { animation: slideFromRight 300ms var(--ease-spring) both; }
.toast-leave-active { animation: fadeOut 200ms ease-in both; }
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}