.loading {
  opacity: 0;
}

.scroll {
  transform: translateY(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 2s, opacity 2s, visibility 2s;
}

.scroll-left {
  transform: translateX(30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 2s, opacity 2s, visibility 2s;
}

.scroll-right {
  transform: translateX(-30px);
  opacity: 0;
  visibility: hidden;
  transition: transform 2s, opacity 2s, visibility 2s;
}

.fadein {
  transform: translateX(0);
  opacity: 2;
  visibility: visible;
}

@keyframes shapeSwing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(55px);
  }
}
@keyframes shapeAnimation {
  0% {
    bottom: -40%;
    opacity: 0;
  }
  20% {
    opacity: 0.5;
  }
  98% {
    bottom: 100%;
    opacity: 0.7;
  }
  100% {
    bottom: 100%;
    opacity: 0;
  }
}