@keyframes slide-left {
  from {left: 80px; opacity: 0;}
  to {left: 0; opacity: 1;}
}

@keyframes slide-right {
  from {right: 80px; opacity: 0;}
  to {right: 0; opacity: 1;}
}

@keyframes slide-down {
  from {bottom: 80px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@keyframes slide-up {
  from {top: 60px; opacity: 0}
  to {top: 0; opacity: 1}
}

@media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
  .scroll-animate { overflow: hidden; position: relative; }
  .from-left, .from-right, .from-top, .from-bottom { visibility: hidden; }
  .animate { 
    visibility: visible;
    position: relative;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
  }
  .from-left.animate { animation-name: slide-right; }
  .from-right.animate { animation-name: slide-left; }
  .from-top.animate { animation-name: slide-down; }
  .from-bottom.animate { animation-name: slide-up; }
}