/**
 * Fade-Up Animation System
 *
 * Scroll-triggered fade-up with staggered delays.
 *
 * Usage:
 * <div class="fade-up">
 *   <div class="fade-item">Item 1</div>
 *   <div class="fade-item">Item 2</div>
 * </div>
 */

/* Base state — hidden and shifted down */
.fade-item {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 500ms ease;
}

/* Visible state — fade up into place */
.fade-item.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Accessibility — respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-item {
    transform: none;
    opacity: 1;
    transition: none;
  }
}