/* ============================================================
   SciMynd Animations
   All gated behind prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Entry Animations ---- */
  .animate-fade-in {
    animation: fadeIn var(--duration-normal) var(--ease-in-out) both;
  }
  .animate-slide-up {
    animation: slideUp var(--duration-slow) var(--ease-out-expo) both;
  }
  .animate-slide-down {
    animation: slideDown var(--duration-slow) var(--ease-out-expo) both;
  }
  .animate-slide-left {
    animation: slideLeft var(--duration-slow) var(--ease-out-expo) both;
  }
  .animate-scale-in {
    animation: scaleIn var(--duration-normal) var(--ease-out-expo) both;
  }

  /* ---- Stagger Delays ---- */
  .delay-1 { animation-delay: 100ms; }
  .delay-2 { animation-delay: 200ms; }
  .delay-3 { animation-delay: 300ms; }
  .delay-4 { animation-delay: 400ms; }
  .delay-5 { animation-delay: 500ms; }
  .delay-6 { animation-delay: 600ms; }

  /* Stagger children (use on parent) */
  .stagger > :nth-child(1)  { animation-delay: 50ms; }
  .stagger > :nth-child(2)  { animation-delay: 100ms; }
  .stagger > :nth-child(3)  { animation-delay: 150ms; }
  .stagger > :nth-child(4)  { animation-delay: 200ms; }
  .stagger > :nth-child(5)  { animation-delay: 250ms; }
  .stagger > :nth-child(6)  { animation-delay: 300ms; }
  .stagger > :nth-child(7)  { animation-delay: 350ms; }
  .stagger > :nth-child(8)  { animation-delay: 400ms; }
  .stagger > :nth-child(9)  { animation-delay: 450ms; }
  .stagger > :nth-child(10) { animation-delay: 500ms; }

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

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

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

  @keyframes slideLeft {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes shimmer {
    to { background-position: -200% 0; }
  }

  @keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 8px var(--color-accent-glow); }
    50%      { box-shadow: 0 0 20px var(--color-accent-glow); }
  }

  @keyframes typingDots {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* ---- Thinking Dots ---- */
  .thinking-dots { display: inline-flex; gap: 4px; align-items: center; }
  .thinking-dots span {
    width: 6px; height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: typingDots 1.2s infinite;
  }
  .thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
  .thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

  /* ---- Spinner ---- */
  .spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
}

/* Reduced motion fallback: instant show, no animations */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in, .animate-slide-up, .animate-slide-down,
  .animate-slide-left, .animate-scale-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .thinking-dots span { animation: none; opacity: 0.6; }
  .spinner { animation: none; }
}