@keyframes from-top {
  0% {
    opacity: 0;
    transform: translate(0, -3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes opacity-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .in-view {
    animation: from-top 1s 0.1s both;
  }

  .not-in-view {
    opacity: 0;
  }

  .animate-opacity-show-delay,
  .animate-opacity-show-delay-500 {
    opacity: 0;
  }

  .animate-opacity-show.in-view {
    animation: opacity-show 1s 0.1s both;
  }

  .animate-opacity-show-delay.in-view {
    animation: opacity-show 1s 1s both;
  }

  .animate-opacity-show-delay-500.in-view {
    animation: opacity-show 1s 500ms both;
  }

  
}