/* APPEAR ON SCROLL */

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes appear-from-left {
  from {
    transform: translateX(-30vw);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes appear-from-right {
  from {
    transform: translateX(50vw);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* FLOATING */
@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translatey(-30px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
}

/* INFINITE SCROLL */
@keyframes scrollLeft {
  to {
    left: -200px;
  }
}
.float-anim {
  animation: float 6s ease-in-out;
  animation-iteration-count: infinite;
}

#navbar {
  transition: transform 0.3s ease-out;
}

.animate-on-scroll {
  animation: appear 1s linear 0.5s;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  animation-fill-mode: forwards;
}

.animate-on-scroll-fast {
  animation: appear 1s linear 0.5s;
  animation-timeline: view();
  animation-range: entry 1% cover 25%;
  animation-fill-mode: forwards;
}

.from-left-anim {
  animation: appear-from-left 1s linear 0.5s;
  animation-timeline: view();
  animation-range: entry 5% cover 40%;
  animation-fill-mode: forwards;
}

.from-right-anim {
  animation: appear-from-right 1s linear 0.5s;
  animation-timeline: view();
  animation-range: entry 5% cover 40%;
  animation-fill-mode: forwards;
}

@media only screen and (min-width: 1024px) {
  .from-right-anim-fast-desktop {
    animation: appear-from-right 2s linear 1s;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
    animation-fill-mode: forwards;
  }
}

.infinite-h-scroll-animation {
  animation-name: scrollLeft;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  left: max(calc(200px * 9), 100%);
}
.infinite-h-scroll-wrapper {
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}
.infinite-h-scroll-wrapper div:nth-child(1) {
  animation-delay: calc(30s / 9 * (9 - 1) * -1);
}
.infinite-h-scroll-wrapper div:nth-child(2) {
  animation-delay: calc(30s / 9 * (9 - 2) * -1);
}
.infinite-h-scroll-wrapper div:nth-child(3) {
  animation-delay: calc(30s / 9 * (9 - 3) * -1);
}
.infinite-h-scroll-wrapper div:nth-child(4) {
  animation-delay: calc(30s / 9 * (9 - 4) * -1);
}
.infinite-h-scroll-wrapper div:nth-child(5) {
  animation-delay: calc(30s / 9 * (9 - 5) * -1);
}
.infinite-h-scroll-wrapper div:nth-child(6) {
  animation-delay: calc(30s / 9 * (9 - 6) * -1);
}
.infinite-h-scroll-wrapper div:nth-child(7) {
  animation-delay: calc(30s / 9 * (9 - 7) * -1);
}
.infinite-h-scroll-wrapper div:nth-child(8) {
  animation-delay: calc(30s / 9 * (9 - 8) * -1);
}
.infinite-h-scroll-wrapper div:nth-child(9) {
  animation-delay: calc(30s / 9 * (9 - 9) * -1);
}