const box = document.querySelector('.box');

const trigger = new ScrollTrigger({
    trigger: '#trigger',
    start: '10% 10%',
    end: '70% 70%',
    markers: true,
    onEnter: () => console.log('🍎onEnter'),
    onLeave: () => console.log('🍐onLeave'),
    onEnterBack: () => console.log('🍎onEnterBack'),
    onLeaveBack: () => console.log('🍐onLeaveBack'),
    onToggle: () => console.log('🍇onToggle'),
    onUpdate: (self) => {
        const breakPoints = [0, 0.4, 0.8, 1];
        const lastIndex = breakPoints.length - 1;

        const normalizedProgress = breakPoints.map((bp, i, arr) => {
            if (i === 0) return 1.0;
            const prev = arr[i - 1];
            return Math.min(Math.max(0, (self.progress - prev) / (bp - prev)), 1);
        });

        const transform = {
            translateX: 200,
            translateY: 800,
            rotate: 360,
        };

        if (self.progress < breakPoints[1]) {
            box.style.transform = `
                translateY(${transform.translateY * normalizedProgress[1]}px)
                rotate(${transform.rotate * normalizedProgress[1]}deg)
            `;
        } else if (self.progress < breakPoints[2]) {
            box.style.transform = `
                translateX(${transform.translateX * normalizedProgress[2]}px)
                translateY(${transform.translateY}px)
                rotate(${transform.rotate}deg)
            `;
        } else {
            box.style.transform = `
                translateX(${transform.translateX}px)
                translateY(${transform.translateY}px)
                rotate(${transform.rotate}deg)
            `;
            box.style.backgroundColor = `rgb(
                ${Math.round(255 * (1 - normalizedProgress[lastIndex]))} 0 255 / 0.5
            )`;
        }
    },
});

const targetSelector = '.my-carousel';

new Carousel(targetSelector, {
    isLoop: true,
    autoInterval: 4000,
    autoPlay: true,
    showIndicators: true,
    label: '秋冬の景色',
    enableLiveRegion: true,
 });

// 共通設定（初期設定）
.carousel {
     --_slidesPerView: 1; // 1ビューあたりのスライド数
     --_slidesPerGroup: 1;  // 1度のスワイプで何枚分移動させるか
     --_spaceBetween: 0rem;  // スライド間の距離（単位:rem）
     --_speed: 0.4s; // スライドの遷移時間（単位: s）
     --_inner: 3.6rem; // スライド両脇の余白
}

// 個別設定 
.my-carousel {
     --_slidesPerView: 1;
     --_slidesPerGroup: 1;
     --_spaceBetween: 1rem;      

     @include gl.mq('md') {    
          --_slidesPerView: 2.5;
          --_slidesPerGroup: 2;
          --_spaceBetween: 2rem;
     } 
}