<section class="header hidden-area">
    <h1 class="header__title">
      <div>SCROLL DOWN</div>
      <div>TO DISPLAY IMAGES</div>
    </h1>
  </section>
  <section class="poster hidden-area">
    <div class="poster__parallax">
      <div id="poster-image_wrapper_1" class="poster-image_wrapper">
        <img id="poster-image_1" src="https://images.unsplash.com/photo-1708958151986-2b032fde35ce?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxNHx8fGVufDB8fHx8fA%3D%3D" alt="" class="poster-image">
      </div>
      <div id="poster-image_wrapper_2" class="poster-image_wrapper">
        <img id="poster-image_2" src="https://images.unsplash.com/photo-1721191149571-d09f621d59ae?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxOHx8fGVufDB8fHx8fA%3D%3D" alt="" class="poster-image">
      </div>
      <div id="poster-image_wrapper_3" class="poster-image_wrapper">
        <img id="poster-image_3" src="https://images.unsplash.com/photo-1721041068512-baf0fbbf450a?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8" alt="" class="poster-image">
      </div>
    </div>
  </section>

body {
  background-color: #1e4029;
  font-family: sans-serif;
  
}

.shown-area {
  display: none;
  opacity: 1;
}

.hidden-area {
  display: block;
  opacity: 1;
}

.header {
  position: relative;
  height: 100vh;
  min-height: 1048px;
  width: 100%;
  overflow-x: hidden;
  overflow: hidden;
}
.header__title {
  position: absolute;
  top: 30vh;
  width: 100%;
  font-size: 7.5rem;
  line-height: 8.625rem;
  color: rgb(213, 165, 78);
  text-align: center;
  font-weight: bold;
}

.poster__parallax {
  position: relative;
  height: 1500px;
}

.poster-image {
  position: absolute;
  opacity: 0;
}

.poster-image_wrapper {
  position: absolute;
  width: 100%;
}

#poster-image_wrapper_1 {
  right: 0;
  height: 100%;
}

#poster-image_wrapper_2 {
  top: 10%;
  left: 5%;
  height: 667px;
}

#poster-image_wrapper_3 {
  top: 35%;
  right: 0;
  height: 772px;
}

#poster-image_1 {
  right: 0;
  width: 1127px;
}

#poster-image_2 {
  height: 100%;
}

#poster-image_3 {
 right: 0; 
 height: 100%;
}

@keyframes appear-right-to-left {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes appear-left-to-right {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes appear-bottom-to-top {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.poster-image_state_visible #poster-image_1 {
  animation: appear-right-to-left .75s ease;
  animation-fill-mode: forwards;
}

.poster-image_state_visible #poster-image_2 {
  animation: appear-left-to-right .75s ease;
  animation-fill-mode: forwards;
}

.poster-image_state_visible #poster-image_3 {
  animation: appear-bottom-to-top .75s ease;
  animation-fill-mode: forwards;
}

  const header = document.querySelector(".header")

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("poster-image_state_visible")
      }
    })
  }, { threshold: 0.2 })

  document.querySelectorAll(".poster-image_wrapper").forEach((poster) => {
    observer.observe(poster)
  })