/* Animations only CSS */
.autoRotate {
  animation: AutoRotateAnimation;
  animation-timeline: view();
}

@keyframes AutoRotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.autoShow {
  animation: text-appear both;
  animation-timeline: view();
  animation-range: entry 20% cover 100vh;
}

@keyframes text-appear {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.imageReveal {
  animation: imageReveal both;
  animation-timeline: view();
}

@keyframes imageReveal {
  from {
    filter: saturate(0) contrast(4) brightness(0.1) blur(5px);
    opacity: 0;
    scale: 0.95;
    translate: 0 4rem;
  }
  to {
    filter: none;
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}

.fadeUp {
  animation: fadeUp both;
  animation-timeline: view();
}

.timeline-item:nth-child(1) {
  animation-range: entry 20% cover 40%;
}
.timeline-item:nth-child(2) {
  animation-range: entry 40% cover 60%;
}
.timeline-item:nth-child(3) {
  animation-range: entry 60% cover 80%;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.autoBlur {
  animation: autoBlurAnimation linear both;
  animation-timeline: view(50%);
}

@keyframes autoBlurAnimation {
  0% {
    filter: blur(10px);
  }
  35%,
  85% {
    filter: blur(0px);
  }
  /* 100% { */
  /*   filter: blur(10px); */
  /* } */
}