/*
 * animations.css
 *
 * Transition utilities, fade-in animations, stagger delays,
 * custom scrollbar, and reduced-motion accessibility.
 */


/* ==========================================================================
   Transition Utilities
   ========================================================================== */

.transition-colors {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* ==========================================================================
   Fade-in Animation
   ========================================================================== */

/* Only hide pre-animation when JS is present (the IntersectionObserver reveals them).
   Without JS, .fade-in stays fully visible. */
.js .fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   Stagger Delays (for lists)
   ========================================================================== */

.stagger-1 {
  transition-delay: 0.05s;
}

.stagger-2 {
  transition-delay: 0.1s;
}

.stagger-3 {
  transition-delay: 0.15s;
}

.stagger-4 {
  transition-delay: 0.2s;
}

.stagger-5 {
  transition-delay: 0.25s;
}

.stagger-6 {
  transition-delay: 0.3s;
}


/* ==========================================================================
   Custom Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

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

  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}