/* Base state (before animation triggers) */
[data-animate-on-scroll] {
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
  }
  
  /* Animation Speed */
  [data-animation-speed="slow"] {
    animation-duration: 2s;
  }
  [data-animation-speed="normal"],
  [data-animation-speed=""] {
    animation-duration: 1.25s;
  }
  [data-animation-speed="fast"] {
    animation-duration: 0.75s;
  }
  
  /* Common animation properties */
  [data-animate-on-scroll].animated {
    opacity: 1 !important;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
  }
  
  /* Fade In Up */
  @keyframes fadeInUpc {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  [data-animate-on-scroll].animated.fadeInUpc {
    animation-name: fadeInUpc;
  }
  
  /* Fade In Down */
  @keyframes fadeInDownc {
    from {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  [data-animate-on-scroll].animated.fadeInDownc {
    animation-name: fadeInDownc;
  }
  
  /* Fade In Left */
  @keyframes fadeInLeftc {
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  [data-animate-on-scroll].animated.fadeInLeftc {
    animation-name: fadeInLeftc;
  }
  
  /* Fade In Right */
  @keyframes fadeInRightc {
    from {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  [data-animate-on-scroll].animated.fadeInRightc {
    animation-name: fadeInRightc;
  }