// body는 가져가지 마세요.
body {
  height: 200vh;
}

@import url(https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round);

// banner
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  // height: 70px;
  background-color: rgba(255, 255, 255, .7);
  backdrop-filter: blur(20px);
  text-align: center;
  line-height: 70px;
  font-size: 20px;
  font-weight: bold;
  
}

.visual {
  position: relative;
  height: 500px;
  background: lightpink;
  .fade-in {  
    opacity: 0;
  }
  .circle {      
    position: absolute;
    top: 150px;
    left: 150px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: #000;  
  }
  .square {      
    position: absolute;
    bottom: 100px;
    right: 162px;
    width: 150px;
    height: 150px;
    background: yellow;  
  }
  .triangle {      
    position: absolute;
    top: 150px;
    left: 200px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: blue;
  }
}

// youtube
.youtube {
    position: relative;
    height: 700px;
    background-color: #333;
    overflow: hidden;
}
.youtube .youtube__area {
    width: 1920px;
    position: absolute;
    /* 16비율 */
    left: 50%;
    margin-left: calc(1920px / -2);
    /* 9비율 */
    top: 50%;
    margin-top: calc(1920px * 9 / 16 / -2);
}
.youtube .youtube__area::before {
    content: "";
    display: block;
    /* 16:9 영상 비율로 요소 크기 만들기! */
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}
.youtube .youtube__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    background-image: url("../images/video_cover_pattern.png");
}
#player {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.youtube .inner {
    height: inherit;
}
.youtube .floating1 {
    position: absolute;
    top: 50px;
    left: 0;
}
.youtube .floating2 {
    position: absolute;
    top: 350px;
    left: 150px;
}

// to-top
#to-top {
    position: fixed;
    bottom: 30px;
    right: -50px;
    z-index: 9;
    width: 42px;
    height: 42px;
    background-color: #333;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/**
 * 페이지 스크롤에 따른 요소 제어
 */
// 페이지 스크롤에 영향을 받는 요소들을 검색!
const headerEl = document.querySelector("#header");
const toTopEl = document.querySelector("#to-top");

// 이전 스크롤 위치 저장 변수
let lastScrollY = window.scrollY;


// 페이지에 스크롤 이벤트를 추가!
// 스크롤이 지나치게 자주 발생하는 것을 조절(throttle, 일부러 부하를 줌)
window.addEventListener(
    "scroll",
    _.throttle(function () {
        // 현재 스크롤 위치
        const currentScrollY = window.scrollY;
      
        // 스크롤 다운
        if (currentScrollY > lastScrollY) {
            // Badge 요소 숨기기!
            // gsap.to(요소, 시간, 옵션);
            gsap.to(headerEl, {
                opacity: 0,
                display: 'none',
                duration: 0.6
            });
            // 상단으로 스크롤 버튼 보이기!
            gsap.to(toTopEl, {
              right: "30px",
                // x: 0,
              duration: 0.2
            });

        // 스크롤 업
        } else {
            // Badge 요소 보이기!
            gsap.to(headerEl, {
                opacity: 1,
                display: 'block',
                duration: 0.6
            });
            // 상단으로 스크롤 버튼 숨기기!
            gsap.to(toTopEl, {
              right: "-50px",
              // x: 100,
              duration: 0.2
            });
        }
      
        // 이전 스크롤 위치 업데이트
        lastScrollY = currentScrollY;
    }, 300),
);
// 상단으로 스크롤 버튼을 클릭하면,
toTopEl.addEventListener("click", function () {
    // 페이지 위치를 최상단으로 부드럽게(1초 동안) 이동.
    gsap.to(window, {
        scrollTo: 0,
    });
});

/**
 * 순서대로 나타나는 기능
 */
// 나타날 요소들(.fade-in) 찾기.
const fadeEls = document.querySelectorAll(".visual .fade-in");
// 나타날 요소들을 하나씩 반복해서 처리!
fadeEls.forEach(function (fadeEl, index) {
    // 각 요소들을 순서대로(delay) 보여지게 함!
    gsap.to(fadeEl, 1, {
        delay: (index + 1) * 0.7,
        opacity: 0.5,
    });
});