.animated-section {
  opacity: 0;
  will-change: opacity, transform;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated-section.fade-in-up.in-view {
  animation-name: fade-in-up;
}

.animated-section.fade-in-left.in-view {
  animation-name: fade-in-left;
}

.animated-section.fade-in-right.in-view {
  animation-name: fade-in-right;
}

.animated-section.in-view {
  animation-fill-mode: forwards;
  animation-duration: var(--animation-speed);
}