@keyframes inview-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes inview-fadeinup {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-inview='fade'] {
  animation: inview-fade 0.6s ease-out forwards;
  animation-play-state: paused;

  &[data-inviewed='true'] {
    animation-play-state: running;
  }
}

[data-inview='fadeinup'] {
  animation: inview-fadeinup 0.6s ease-out forwards;
  animation-play-state: paused;

  &[data-inviewed='true'] {
    animation-play-state: running;
  }
}