@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeInUp {
  animation: fadeInUp 1s ease forwards;
}

.animate-fadeInUp.delay-100 { animation-delay: 0.5s; }
.animate-fadeInUp.delay-200 { animation-delay: 1s; }



@keyframes fadeInUp {
  from {opacity: 0; transform: translateY(40px);}
  to {opacity: 1; transform: translateY(0);}
}

@keyframes fadeInLeft {
  from {opacity: 0; transform: translateX(-40px);}
  to {opacity: 1; transform: translateX(0);}
}

@keyframes fadeInRight {
  from {opacity: 0; transform: translateX(40px);}
  to {opacity: 1; transform: translateX(0);}
}



.animate-visible.animate-fadeInUp { animation: fadeInUp 1s ease forwards; }
.animate-visible.animate-fadeInLeft { animation: fadeInLeft 1s ease forwards; }
.animate-visible.animate-fadeInRight { animation: fadeInRight 1s ease forwards; }

      .delay-100 { animation-delay: 0.1s; animation-fill-mode: backwards; }
        .delay-200 { animation-delay: 0.2s; animation-fill-mode: backwards; }
        .delay-300 { animation-delay: 0.3s; animation-fill-mode: backwards; }
        .delay-400 { animation-delay: 0.4s; animation-fill-mode: backwards; }
        .delay-500 { animation-delay: 0.5s; animation-fill-mode: backwards; }
        .delay-600 { animation-delay: 0.6s; animation-fill-mode: backwards; }
        .delay-700 { animation-delay: 0.7s; animation-fill-mode: backwards; }
        .delay-800 { animation-delay: 0.8s; animation-fill-mode: backwards; }
        .delay-900 { animation-delay: 0.9s; animation-fill-mode: backwards; }


.mobile-menu {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: max-height 300ms ease, opacity 250ms ease, transform 300ms ease;
      }
.mobile-menu.open {
        max-height: 1000px; /* large enough to reveal content */
        opacity: 1;
        transform: translateY(0);
      }