:root{
  --fade-distance: 22px;
  --fade-duration: .68s;
  --fade-ease: cubic-bezier(.22,.61,.36,1);
}

.u-fade{opacity:0; transform:translate3d(0,var(--fade-distance),0) scale(0.995); will-change:opacity,transform; filter:saturate(0.96);}
.is-inview{opacity:1; transform:none; filter:none; transition: opacity var(--fade-duration) var(--fade-ease), transform var(--fade-duration) var(--fade-ease), filter var(--fade-duration) var(--fade-ease);}

[data-fade="up"]{transform:translate3d(0,var(--fade-distance),0) scale(0.995);}
[data-fade="down"]{transform:translate3d(0,calc(var(--fade-distance)*-1),0) scale(0.995);}
[data-fade="left"]{transform:translate3d(var(--fade-distance),0,0) scale(0.995);}
[data-fade="right"]{transform:translate3d(calc(var(--fade-distance)*-1),0,0) scale(0.995);}

.is-inview[data-lift="1"]{transform:translate3d(0,-2px,0);}
.is-inview[data-lift="2"]{transform:translate3d(0,-4px,0);}
[data-blur]{filter: blur(6px);}
.is-inview[data-blur]{filter:none;}

@media (prefers-reduced-motion: reduce){
  .u-fade, .is-inview{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter:none !important;
  }
}