@charset "utf-8";

:root {
  --animation-transition-ms: 800ms;
}

[data-scroll-animation="fade-in"] {
  opacity: 0;
  transition: opacity var(--animation-transition-ms);
}

[data-scroll-animation^="fade-in-to-"] {
  opacity: 0;
  transition: opacity var(--animation-transition-ms), transform var(--animation-transition-ms);
}

[data-scroll-animation="fade-in-to-left"] {
  transform: translate(50px, 0);
}

[data-scroll-animation="fade-in-to-right"] {
  transform: translate(-50px, 0);
}

[data-scroll-animation="fade-in-to-top"] {
  transform: translate(0, 50px);
}

[data-scroll-animation="fade-in-to-bottom"] {
  transform: translate(0, -50px);
}

[data-scroll-animation="fade-in"].animate {
  opacity: 1;
}

[data-scroll-animation^="fade-in-to-"].animate {
  opacity: 1;
  transform: translate(0, 0);
}