* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

header {
  position: sticky;
  top: 0px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
  /* background-color: hsla(0, 0%, 50%, 0); */
  background-color: black;
}

nav {
  margin: auto;
  width: 90%;
  min-height: 9vh;
  line-height: 9vh;
}

nav ul {
  flex: 1;
  font-size: 20px;
}

nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

ul li {
  margin: 0 20px;
  list-style: none;
}
nav a {
  color: white;
  text-decoration: none;
  padding: 10px 17px;
}

section {
  min-height: 100vh;
}

section img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

/*   color: coral;
  color: chartreuse;
  color: chocolate;
  color: cadetblue; */

.trans {
  position: absolute;
  z-index: -10;
  background-color: coral;
}

// Resources
/*
// --------------------------------------------------------------------
// for the yoda developers out there
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/isIntersecting
// --------------------------------------------------------------------
*/
const sections = document.querySelectorAll("section");

//trans로 Navbar사이를 넘나드는 색깔박스를 가진다.
const trans = document.querySelector(".trans");
//색깔 배열
const gradients = ["coral", "chartreuse", "chocolate", "cadetblue"];

const options = {
  threshold: 0.7,
};

let observer = new IntersectionObserver(navScroll, options);

function navScroll(entries) {
  entries.forEach(function (entry) {
    const className = entry.target.className;
    //data-를 통해 navbar 섹션 구분.
    const activeLink = document.querySelector(`[data-page="${className}"]`);
    //data-로 이미지 구분. 
    const elementIndex = entry.target.getAttribute("data-index");
    //뷰포트 상대적 이미지 저장.
    const coordinates = activeLink.getBoundingClientRect();
    const directions = {
      height: coordinates.height,
      width: coordinates.width,
      top: coordinates.top,
      left: coordinates.left,
    };

    if (entry.isIntersecting) {
      trans.style.setProperty("height", `${directions.height}px`);
      trans.style.setProperty("width", `${directions.width}px`);
      trans.style.setProperty("top", `${directions.top}px`);
      trans.style.setProperty("left", `${directions.left}px`);
      trans.style.backgroundColor = gradients[elementIndex];
    }
  });
}

sections.forEach(function (section) {
  observer.observe(section);
});