/* DONT FORGET TO ADD ANY ANIMATION TO TRANSITION */

@media (prefers-reduced-motion: no-preference) {
  .service_card {
    filter: opacity(0) blur(3px);
    transition: transform 1s ease calc(100ms * var(--order)), filter 2s ease;
    -webkit-transition: transform 1s ease calc(100ms * var(--order)),
      filter 2s ease;
    -moz-transition: transform 1s ease calc(100ms * var(--order)),
      filter 2s ease;
    -ms-transition: transform 1s ease calc(100ms * var(--order)), filter 2s ease;
    -o-transition: transform 1s ease calc(100ms * var(--order)), filter 2s ease;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-filter: opacity(0) blur(3px);
  }

  .anim_wrapper {
    scale: 0;
    filter: blur(5px);
    transition: scale 1s ease calc(150ms * var(--order));
    -webkit-transition: scale 1s ease calc(150ms * var(--order));
    -moz-transition: scale 1s ease calc(150ms * var(--order));
    -ms-transition: scale 1s ease calc(150ms * var(--order));
    -o-transition: scale 1s ease calc(150ms * var(--order));
    -webkit-filter: blur(5px);
  }

  .scrollinate {
    scale: 1;
    filter: opacity(1) blur(0);
    -webkit-filter: opacity(1) blur(0);
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
}