/* ============================================
   Realistic Sketch — Subtle Animations
   Respects prefers-reduced-motion
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

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

  .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; }
}

/* Hover micro-interactions already in main CSS */