/* Staggered fade delays for `.fade-in` utility
   Use `fade-delay-1` .. `fade-delay-4` on elements to stagger appearance.
*/

.fade-delay-1 { transition-delay: 0.1s; }
.fade-delay-2 { transition-delay: 0.2s; }
.fade-delay-3 { transition-delay: 0.3s; }
.fade-delay-4 { transition-delay: 0.4s; }
.fade-delay-5 { transition-delay: 0.5s; }

/* Generic smooth fade (Atom-style timing) - triggers when `.show` is added */
.fade {
  opacity: 0;
  transform: translateY(30px);
}

/* Animate when visible (added by IntersectionObserver) */
.fade.show {
  animation: fadeUp 0.8s ease forwards;
}

.animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
} 

/* Universal card initial state: keep cards hidden until observed */
.ui-card, .card, .service-card, .feature-card, .hire-card {
  opacity: 0;
  transform: translateY(30px);
}

/* Animate cards when visible */
.ui-card.show, .card.show, .service-card.show, .feature-card.show, .hire-card.show {
  animation: fadeUp 0.8s ease forwards;
} 

/* Staggered animation delays for `.fade` utility */
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Animation keyframes for fade utility */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure smooth motion and optional reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade { animation: none !important; }
  .fade-delay-1, .fade-delay-2, .fade-delay-3, .fade-delay-4, .fade-delay-5,
  .delay-1, .delay-2, .delay-3, .delay-4, .delay-5 { animation-delay: 0s !important; }
}




/* ===============================
   SCROLL-BASED ANIMATIONS
================================ */

/* Initial hidden state */
.scroll-animate {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Visible state (added by JS) */
.scroll-animate.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Optional variations */
.fade-up {
  transform: translateY(40px);
}

.fade-left {
  transform: translateX(-40px);
}

.fade-right {
  transform: translateX(40px);
}

/* Delays */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }