const scroll = new LocomotiveScroll({
    el: document.querySelector('#main'),
    smooth: true
});

//overlay-image
function topicOverlayAnimation() {
    var topic = document.querySelector(".container")
    var fixed = document.querySelector("#overlay-image")
    topic.addEventListener("mouseenter", function () {
        fixed.style.display = "block"
    })
    topic.addEventListener("mouseleave", function () {
        fixed.style.display = "none"
    })

    var topicHead = document.querySelectorAll(".topic")
    topicHead.forEach(function (e) {
        e.addEventListener("mouseenter", function () {
            var image = e.getAttribute("data-image")
            fixed.style.backgroundImage = `url(${image})`
        })
    })
}
topicOverlayAnimation()

//tabs
const allIndicator = document.querySelectorAll('.indicator li');
const allContent = document.querySelectorAll('.content li');

allIndicator.forEach(item=> {
  item.addEventListener('click', function () {
    const content = document.querySelector(this.dataset.target);

    allIndicator.forEach(i=> {
      i.classList.remove('active');
    })

    allContent.forEach(i=> {
      i.classList.remove('active');
    })

    content.classList.add('active');
    this.classList.add('active');
  })
})

//loading animation
function loadingAnimation() {
    var loading = document.querySelector("#loading")
    setTimeout(function () {
        loading.style.top = "-100%"
    }, 4200)
}
loadingAnimation()