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);


var controller = new ScrollMagic.Controller();

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

//채용절차 아이콘 깜박임 이벤트 
const normalTriangles = document.querySelectorAll('.triangle.normal');
const multipleTriangles = document.querySelectorAll('.triangle.multiple .small-triangle');
let currentStep = 0;

function activateStep(stepIndex) {
    normalTriangles.forEach((triangle, index) => {
        if (index < stepIndex) {
            triangle.classList.remove('active');
            triangle.classList.add('completed'); 
        } else if (index === stepIndex) {
            triangle.classList.remove('completed');
            triangle.classList.add('active');
        } else {
            triangle.classList.remove('active', 'completed');
        }
    });

    if (stepIndex === 3) {
        multipleTriangles.forEach((tri, i) => {
            if (tri.classList.contains('completed')) return;
            setTimeout(() => {
                tri.classList.add('active');
            }, i * 500); 
        });
    } else if (stepIndex < 3) {
        multipleTriangles.forEach(tri => {
            tri.classList.remove('active');
            tri.classList.remove('completed');
        });
    }
}

function nextStep() {
    activateStep(currentStep);
    currentStep = (currentStep + 1) % 5; 
}

setInterval(nextStep, 1200);