.anime.fadeLtoR {
  opacity: 0;
  transform: translateX(-10%);
  transition: 0.8s;
}
.anime.fadeLtoR.scrollin {
  opacity: 1;
  transform: translateX(0);
}
.anime.fadeTtoB {
  opacity: 0;
  transform: translateY(10%);
  transition: 0.6s;
}
.anime.fadeTtoB.scrollin {
  opacity: 1;
  transform: translateY(0);
}
.anime.turnLtoR {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.2, 1.2);
  transition: 0.6s;
}
.anime.turnLtoR.scrollin {
  clip-path: inset(0 0 0 0);
  transform: scale(1, 1);
}
.anime.turnRtoL {
  clip-path: inset(0 0 0 100%);
  transform: scale(1.2, 1.2);
  transition: 0.6s;
}
.anime.turnRtoL.scrollin {
  clip-path: inset(0 0 0 0);
  transform: scale(1, 1);
}
.anime.slideLtoR {
  transform: translateX(-100%);
  transition: 0.6s;
}
.anime.slideLtoR.scrollin {
  transform: translateX(0);
}
.anime.slideRtoL {
  transform: translateX(100%);
  transition: 0.6s;
}
.anime.slideRtoL.scrollin {
  transform: translateX(0);
}
.anime.delay1 {
  transition-delay: 0.2s;
}
.anime.delay2 {
  transition-delay: 0.4s;
}
.anime.delay3 {
  transition-delay: 0.6s;
}
.anime.delay4 {
  transition-delay: 0.8s;
}
.anime.delay5 {
  transition-delay: 1s;
}
.anime.delay6 {
  transition-delay: 1.2s;
}

.float {
  animation: floating-x 7.2s ease-in-out infinite alternate;
}
.float.reverse {
  animation-direction: alternate-reverse;
}
.float.delay1 {
  animation-duration: 6.5s;
}
.float.delay2 {
  animation-duration: 6.8s;
}
.float.delay3 {
  animation-duration: 7.4s;
}
.float.delay4 {
  animation-duration: 6.3s;
}
.float.delay5 {
  animation-duration: 7s;
}
.float.delay6 {
  animation-duration: 6.1s;
}
.float .target {
  animation: floating-y 1.8s ease-in-out infinite alternate;
}
.float .target.reverse {
  animation-direction: alternate-reverse;
}
.float .target.delay1 {
  animation-duration: 1.5s;
}
.float .target.delay2 {
  animation-duration: 2.5s;
}
.float .target.delay3 {
  animation-duration: 1.7s;
}
.float .target.delay4 {
  animation-duration: 2.8s;
}
.float .target.delay5 {
  animation-duration: 1.9s;
}
.float .target.delay6 {
  animation-duration: 2.2s;
}

@keyframes floating-x {
  0% {
    transform: translateX(-8%);
  }
  100% {
    transform: translateX(8%);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-12%);
  }
  100% {
    transform: translateY(12%);
  }
}
.anime .fadeTtoB {
  opacity: 0;
  transform: translateY(10%);
  transition: 0.6s;
}
.anime .fadeTtoB.delay1 {
  transition-delay: 0.2s;
}
.anime .fadeTtoB.delay2 {
  transition-delay: 0.4s;
}
.anime .fadeTtoB.delay3 {
  transition-delay: 0.6s;
}
.anime .fadeTtoB.delay4 {
  transition-delay: 0.8s;
}
.anime .fadeTtoB.delay5 {
  transition-delay: 1s;
}
.anime .fadeTtoB.delay6 {
  transition-delay: 1.2s;
}
.anime.scrollin .fadeTtoB {
  opacity: 1;
  transform: translateY(0);
}