/*
  랜딩페이지 스크롤 반응 스크립트 CSS 
  @효과
  .ics-scroll-trigger-fade-up : 위로 서서히 나타나는 효과
  .ics-scroll-trigger-fade-in : 페이드인 효과
  .ics-scroll-trigger-fade-right : 우측으로 서서히 나타나는 효과

  @규칙
  .ics-scroll-trigger .ics-scroll-trigger-fade-[] : 부모에게 트리거 클래스가 있으면 자식 요소도 함께 동작
 */
#landingPage {
  --ics-scroll-transition-duration: 0.85s;
}

#landingPage .ics-scroll-trigger-fade-up {
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--ics-scroll-transition-duration);
}
#landingPage .ics-scroll-trigger-fade-up.ics-scroll-trigger-active,
#landingPage .ics-scroll-trigger-active .ics-scroll-trigger-fade-up {
  opacity: 1;
  transform: translateY(0);
}

#landingPage .ics-scroll-trigger-fade-right {
  opacity: 0;
  transform: translateX(-10px);
  transition: all var(--ics-scroll-transition-duration);
}
#landingPage .ics-scroll-trigger-fade-right.ics-scroll-trigger-active,
#landingPage .ics-scroll-trigger-active .ics-scroll-trigger-fade-right {
  opacity: 1;
  transform: translateX(0);
}

#landingPage .ics-scroll-trigger-fade-in {
  opacity: 0;
  transition: opacity var(--ics-scroll-transition-duration);
}
#landingPage .ics-scroll-trigger-fade-in.ics-scroll-trigger-active,
#landingPage .ics-scroll-trigger-active .ics-scroll-trigger-fade-in {
  opacity: 1;
}

#landingPage .ics-scroll-trigger-fade-in-bounce-up {
  opacity: 0;
}
#landingPage .ics-scroll-trigger-fade-in-bounce-up.ics-scroll-trigger-active,
#landingPage .ics-scroll-trigger-active .ics-scroll-trigger-fade-in-bounce-up {
  animation: icsScrollFadeInBounce 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes icsScrollFadeInBounce {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  60% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}