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

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

.image-reveal {
  animation: image-reveal both;
  animation-timeline: view(10% 5%);
  animation-range: entry 20% cover 100vh;
}

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

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

.fade-up:nth-child(1) {
  animation-range: entry 20% cover 40%;
}

.fade-up:nth-child(2) {
  animation-range: entry 40% cover 60%;
}

.fade-up:nth-child(3) {
  animation-range: entry 60% cover 80%;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.75);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}