(() => { function res() { let i = window.outerWidth, c = i; const p = 1200; window.addEventListener("resize", () => { c = window.outerWidth; i < p && c > p || i > p && c < p ? location.reload() : void 0 }); }; res(); })();

gsap.registerPlugin(ScrollTrigger);

let imgurl = document.querySelector('img.bg1-1').src.match(/.*\//g)
function imgrwd() {
    window.outerWidth >= 1200 ?
        document.querySelector('img.bg1-1').src = `${imgurl}/bg1-1.png` :
        document.querySelector('img.bg1-1').src = `${imgurl}/bg1-1_m.png`;
    window.outerWidth >= 1200 ?
        document.querySelector('img.bg1').src = `${imgurl}/bg1.png` :
        document.querySelector('img.bg1').src = `${imgurl}/bg1_m.png`;
}
setInterval(() => {
    imgrwd()
}, 500);
ScrollTrigger.create({
    trigger: "#section0",
    start: "top top",
    end: "bottom bottom",
    toggleClass: {
        targets: '.section0-bg-rwd img',
        className: "active"
    },
    // markers: true,
})

ScrollTrigger.create({
    trigger: "#section1",
    start: "top center",
    end: "bottom center",
    // markers: true,
    toggleClass: 'active',
})

ScrollTrigger.create({
    trigger: "#section2",
    start: "top top",
    end: "bottom bottom",
    pin: '.section2-container',
    pinSpacing: false,
    // markers: true,
    toggleClass: 'active',
    onUpdate: self => {
        document.querySelectorAll('.grayClip').forEach(e => {
            e.style = self.progress <= .75 ?
                `clip-path: ellipse(50% 75% at 50% ${Math.round((self.progress / 0.75 - 1) * 75)}%)` :
                'clip-path: ellipse(50% 75% at 50% 0%)'
        })
        document.querySelector('.gradientLine').style = self.progress <= .75 ?
            `clip-path: ellipse(${50 * 1.004}% ${75 * 1.004}% at 50% ${Math.round((self.progress / 0.75 - 1) * 75)}%)` :
            `clip-path: ellipse(${50 * 1.004}% ${75 * 1.004}% at 50% 0%)`
        document.querySelector('.curvePath').style = self.progress >= .5 ?
            "clip-path: polygon(85% 0%, 15% 0%, 15% 100%,85% 100%); opacity:1" :
            "clip-path: polygon(52% 0, 48% 0, 48% 100%, 52% 100%); opacity:0"
    },
})

let cols = [...document.querySelectorAll("#cycle1>div")];
let pgrs = [...document.querySelectorAll('.cycle-pager1>div')];
document.querySelector('#cycle-section1').style.height = `${(cols.length - 1) * 100}vh`
ScrollTrigger.create({
    trigger: "#cycle-section1",
    start: "top top",
    end: "bottom bottom",
    pin: '#cycle-section1 .cycle-container',
    pinSpacing: false,
    toggleClass: "active",
    // markers: true,
    onUpdate: self => {
        let pgs = Math.ceil(self.progress * (cols.length - 1));
        pgs == 0 ? pgs = 1 : pgs = Math.ceil(self.progress * (cols.length - 1));
        cols.forEach((e, i) => {
            i == pgs ? e.classList.add('active') : e.classList.remove('active');
        })
        pgrs.forEach((e, i) => {
            i == pgs ? e.classList.add('active') : e.classList.remove('active');
        })
        document.querySelector('.iconFrame1').style['transform'] = `translateY(${pgs == 0 ? 0 : (pgs - 1) * 120}px)`;
        [...document.querySelectorAll('.cycle-decoration3')][0].style = `top: ${self.progress * 100}%; opacity: ${Math.sin(Math.PI / 180 * self.progress * 180)}`;
        [...document.querySelectorAll('.cycle-decoration4')][0].style = `right: ${30 - (self.progress * 20)}%; opacity: ${Math.sin(Math.PI / 180 * self.progress * 180)}`;
    },
});
document.querySelectorAll('.cycle-pager1>div').forEach((el, index) => {
    el.onclick = () => {
        let cycleheight = document.querySelector('.cycle-content').offsetHeight;
        window.scrollTo({
            top: document.querySelector('#cycle-section1').offsetTop + (index - 1) * cycleheight + (index == 1 ? cycleheight * .5 : index == (cols.length - 1) ? cycleheight * -.5 : 0),
            behavior: 'smooth'
        });
    }
})

ScrollTrigger.create({
    trigger: "#designConcept",
    start: "top center",
    end: "bottom center",
    // markers: true,
    toggleClass: 'active',
})

let cols2 = [...document.querySelectorAll("#cycle2>div")];
let pgrs2 = [...document.querySelectorAll('.cycle-pager2>div')];
document.querySelector('#cycle-section2').style.height = `${(cols2.length - 1) * 100}vh`
ScrollTrigger.create({
    trigger: "#cycle-section2",
    start: "top top",
    end: "bottom bottom",
    pin: '#cycle-section2 .cycle-container',
    pinSpacing: false,
    toggleClass: "active",
    // markers: true,
    onUpdate: self => {
        let pgs = Math.ceil(self.progress * (cols2.length - 1));
        pgs == 0 ? pgs = 1 : pgs = Math.ceil(self.progress * (cols2.length - 1));
        cols2.forEach((e, i) => {
            i == pgs ? e.classList.add('active') : e.classList.remove('active');
        })
        pgrs2.forEach((e, i) => {
            i == pgs ? e.classList.add('active') : e.classList.remove('active');
        })
        document.querySelector('.iconFrame2').style['transform'] = `translateY(${pgs == 0 ? 0 : (pgs - 1) * 120}px)`;
        [...document.querySelectorAll('.cycle-decoration3')][1].style = `top: ${self.progress * 100}%; opacity: ${Math.sin(Math.PI / 180 * self.progress * 180)}`;
        [...document.querySelectorAll('.cycle-decoration4')][1].style = `right: ${30 - (self.progress * 20)}%; opacity: ${Math.sin(Math.PI / 180 * self.progress * 180)}`;
    },
});
document.querySelectorAll('.cycle-pager2>div').forEach((el, index) => {
    el.onclick = () => {
        let cycleheight = document.querySelector('.cycle-content').offsetHeight;
        window.scrollTo({
            top: document.querySelector('#cycle-section2').offsetTop + (index - 1) * cycleheight + (index == 1 ? cycleheight * .5 : index == (cols2.length - 1) ? cycleheight * -.5 : 0),
            behavior: 'smooth'
        });
    }
})
let nest = [...document.querySelectorAll('.cycle-slide.nested .cycle-content')];
document.querySelector('.cycle-slide.nested').style.gridTemplateColumns = `repeat(${nest.length},100%)`
for (let i in nest) {
    document.querySelector(".nestdots").insertAdjacentHTML('beforeend', i == 0 ? `<div class='active'>—</div>` : '<div>—</div>');
}
let nestdots = [...document.querySelectorAll('.nestdots>div')]
let curnest = document.querySelector('.cycle-slide.nested .active')
function setdotPOSY() {
    let distanceIMG = document.querySelector('.nested>.active img')
    document.querySelector('.nestdots').style.top = `${distanceIMG.offsetTop + distanceIMG.offsetHeight - nestdots[0].offsetHeight}px`;
}
setdotPOSY()
let NestSlideAuto = setInterval(() => {
    nest.indexOf(curnest) == nest.length - 1 ?
        nest.forEach((e, i) => { i == 0 ? e.classList.add('active') : e.classList.remove('active') }) :
        nest.forEach((e, i) => { i == nest.indexOf(curnest) + 1 ? e.classList.add('active') : e.classList.remove('active') })
    curnest = document.querySelector('.cycle-slide.nested .active')
    nest.forEach(e => {
        e.style['transform'] = `translateX(${-100 * nest.indexOf(curnest)}%)`;
    })
    nestdots.forEach((e, i) => {
        i == nest.indexOf(curnest) ? e.classList.add('active') : e.classList.remove('active')
    })
    setdotPOSY()
}, 5000);
nestdots.forEach((el, index) => {
    el.onclick = () => {
        clearInterval(NestSlideAuto);
        nest.forEach((e, i) => {
            e.style['transform'] = `translateX(${-100 * index}%)`;
            i == index ? e.classList.add('active') : e.classList.remove('active')
        })
        nestdots.forEach((e, i) => {
            i == index ? e.classList.add('active') : e.classList.remove('active')
        })
        setdotPOSY()
    }
})

let dots = [...document.querySelectorAll(".InnerGIGABYTEContent>div")];
dots.forEach(element => {
    ScrollTrigger.create({
        trigger: element,
        start: "top 75%",
        end: "bottom 25%",
        // markers: true,
        onToggle: (self) => { self.isActive ? ScrollTrigger.refresh() : void 0 }
    })
})