var controller = new ScrollMagic.Controller();

// 애니메이션 정의
var tween = gsap.to(".visual2", {
    duration: 1, // 애니메이션 시간 (초)
    width: "2000px", // 최종 너비
    // ease: "power2.inOut" // 이징 적용
});

// ScrollMagic 씬 생성
var scene = new ScrollMagic.Scene({
    triggerElement: ".visual2", // 애니메이션 시작 요소
    triggerHook: 0.4, // 스크롤 위치 (0.5는 화면 중앙)
    duration: 270 // 애니메이션 지속 거리
})
.setTween(tween)
// .addIndicators({name: "Box Animation"}) // 디버그를 위한 인디케이터 추가 (선택 사항)
.addTo(controller);


// partners tit
var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: '.top_partners_text',
    triggerHook: "0.7",
})
.setClassToggle('.top_partners_text', 'active')
.addTo(controller);



//arrow 클래스 활성화
function activateStep(stepNumber) {
    if (stepNumber >= 1 && stepNumber <= 9) {
        document.getElementById('arrow' + stepNumber).classList.add('active');
    }
}

//arrow 클래스 초기화
function resetArrows() {
    for (let i = 1; i <= 9; i++) {
        document.getElementById('arrow' + i).classList.remove('active');
    }
}

//스텝별 arrow 클래스활성화 이벤트
function startProcess() {
    let step = 1;
    const interval = setInterval(() => {
        if (step <= 9) {
            activateStep(step);
            step++;
        } else {
            clearInterval(interval);
            setTimeout(() => {
                resetArrows();
                startProcess();
            }, 1000); 
        }
    }, 1000); 
}

startProcess();