/* === Slide In Keyframes === */
@keyframes slideInLeft {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  @keyframes slideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  @keyframes slideInTop {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  @keyframes slideInBottom {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  /* === Fade In Keyframes === */
  @keyframes fadeInTop {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInBottom {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  /* === Image Animation === */
  @keyframes imageFadeIn {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
  }
  
  /* === Base: initial hidden state === */
  .slide-in-left,
  .slide-in-right,
  .slide-in-top,
  .slide-in-bottom,
  .fade-in-top,
  .fade-in-bottom,
  .fade-in-left,
  .fade-in-right,
  .image-fade-in {
    opacity: 0;
  }
  
  /* === Triggered Animation Classes === */
  .animate-on-scroll.slide-in-left {
    animation: slideInLeft 1.2s ease-out forwards;
  }
  .animate-on-scroll.slide-in-right {
    animation: slideInRight 1.2s ease-out forwards;
  }
  .animate-on-scroll.slide-in-top {
    animation: slideInTop 1.2s ease-out forwards;
  }
  .animate-on-scroll.slide-in-bottom {
    animation: slideInBottom 1.2s ease-out forwards;
  }
  
  .animate-on-scroll.fade-in-top {
    animation: fadeInTop 1.2s ease-out forwards;
  }
  .animate-on-scroll.fade-in-bottom {
    animation: fadeInBottom 1.2s ease-out forwards;
  }
  .animate-on-scroll.fade-in-left {
    animation: fadeInLeft 1.2s ease-out forwards;
  }
  .animate-on-scroll.fade-in-right {
    animation: fadeInRight 1.2s ease-out forwards;
  }
  
  .animate-on-scroll.image-fade-in {
    animation: imageFadeIn 1.2s ease-out forwards;
  }