/* =====================================================
   custom-animations.css
   Replaces animate.css (68 KB) — only the 3 animations
   actually used on modernhospitaljal.com (Homepage only):
   fadeInUp, fadeInLeft, fadeInRight
   Built for use with WOW.js (existing site setup)
   Total size: ~1.5 KB vs animate.css's 68 KB
   ===================================================== */

/* Element stays invisible until WOW.js triggers it on scroll */
.wow {
  visibility: hidden;
}

/* Base "animated" class — WOW.js adds this automatically
   when element scrolls into view. Controls duration/fill-mode. */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

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

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

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