/* 240610 서주원 - 상단비주얼 애니메이션 */
/* const leftElement = document.querySelector('.left');
const rightElement = document.querySelector('.right');

// 초기 너비 계산 함수
function calculateInitialWidth() {
    const viewportWidth = window.innerWidth;
    return (viewportWidth * 0.5) - 715;
}

// 초기 너비 설정 함수
function setInitialWidth() {
    const initialWidth = calculateInitialWidth();
    console.log('initialWidth:', initialWidth); // 로그 추가
    leftElement.style.width = initialWidth + 'px';
    rightElement.style.width = initialWidth + 'px';
}

// CSS 트랜지션 설정 함수
function setTransition() {
    leftElement.style.transition = 'width 0.3s ease';
    rightElement.style.transition = 'width 0.3s ease';
}

// 초기 CSS 트랜지션 설정
setTransition();

// ScrollMagic 컨트롤러 생성
const controller = new ScrollMagic.Controller();

// 애니메이션 정의
const tween = gsap.to('.left, .right', { 
    width: '0%', 
    duration: 2,
    ease: 'linear.none' 
});

// ScrollMagic 씬 생성 함수
function createScene() {
    return new ScrollMagic.Scene({
        triggerElement: '.visual', // 트리거 요소
        duration: 340 // 애니메이션 지속 거리 (px 단위)
    }).setTween(tween).addTo(controller);
}

// 초기 너비 설정
setInitialWidth();

// ScrollMagic 씬 생성
let scene = createScene();

// 리사이즈 이벤트 핸들러
let resizeTimeout;
window.addEventListener('resize', function() {
    console.log('resize event triggered');
    if (resizeTimeout) {
        clearTimeout(resizeTimeout);
    }
    resizeTimeout = setTimeout(function() {
        console.log('executing resize logic');
        // 트랜지션 제거
        leftElement.style.transition = 'none';
        rightElement.style.transition = 'none';

        // 기존 씬 제거
        scene.destroy(true);

        // 새로운 초기 너비 설정
        setInitialWidth();

        // 새로운 씬 생성
        scene = createScene();

        // 트랜지션 재설정
        setTimeout(setTransition, 50); // 약간의 지연 후 트랜지션 재설정
    }, 300); // 300ms 후에 새로고침
}); */
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);
/* 240610 서주원 - 상단비주얼 애니메이션 끝 */