/* ======================================================================
   Animations — Fade-in animations triggered on scroll
   ====================================================================== */
.animated { animation-duration: 1s; animation-fill-mode: both; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-30px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(30px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.fadeInRight { animation-name: fadeInRight; }

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.fadeOut { animation-name: fadeOut; }