.out-view {
	opacity: 0;
	transform: translateY(var(--size-xl));
	transition: all 2s ease;
}
.in-view {
	opacity: 1;
	transform: translateY(0);
	transition: all 2s ease;
}
.animate.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards;
}
.animate.breathing {
  animation: breathe 10s ease-in-out infinite;
  transform-origin: center;
}
.animate.side-scroll {
  animation: side-scroll 40s ease infinite;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
@keyframes oscillate {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(calc(-1 * var(--size-l))); }
	100% { transform: translateY(0); }
}
@keyframes breathe {
  0%, 100% {
    transform: scale(0.95);
  }
  30% {
    transform: scale(1);
  }
}
@keyframes side-scroll {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(80vw - 100%));
  }
  100% {
    transform: translateX(0%);
  }
}