スクロールで物語る（Scroll Storytelling）

gsap.to('.progress-bar', {
  scaleX: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: containerRef.current, // スクロール対象の要素
    start: 'top top',              // 要素の上端がビューポート上端に来たとき開始
    end: 'bottom bottom',          // 要素の下端がビューポート下端に来たとき終了
    scrub: true,                   // スクロール量に連動（trueで即時追従）
  },
});

// HTML: origin-left で左から伸びるようにする
// <div class="progress-bar h-1 bg-pink-400 origin-left" style={{ transform: 'scaleX(0)' }} />

// gsap.utils.toArray で複数要素を取得してまとめて設定
gsap.utils.toArray<HTMLElement>('.text-line').forEach((line) => {
  gsap.from(line, {
    opacity: 0,
    y: 40,
    scrollTrigger: {
      trigger: line,
      start: 'top 80%', // 要素の上端がビューポートの80%位置に来たとき
      end: 'top 50%',   // 要素の上端がビューポートの50%位置に来たとき
      scrub: 1,         // 数値指定でなめらかな追従（秒単位の遅延）
    },
  });
});

// HTML: 初期状態を opacity: 0 にしておくとフラッシュを防げる
// <p class="text-line" style={{ opacity: 0 }}>テキスト</p>

gsap.to('.zoom-inner', {
  scale: 1.3,
  ease: 'none',
  scrollTrigger: {
    trigger: '.zoom-section',
    start: 'top bottom',  // セクションがビューポート下端に入ったとき開始
    end: 'bottom top',    // セクションがビューポート上端を超えたとき終了
    scrub: true,
  },
});

// HTML: overflow: hidden で拡大した部分をクリップ
// <section class="zoom-section overflow-hidden">
//   <div class="zoom-inner min-h-screen" style={{ background: 'linear-gradient(...)' }} />
// </section>

gsap.to('.parallax-bg', {
  yPercent: -30, // 自身の高さの30%分だけ上に移動（ページより遅い速度）
  ease: 'none',
  scrollTrigger: {
    trigger: '.parallax-section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  },
});

// HTML: 背景を150%の高さにして余白を持たせる
// <section class="parallax-section overflow-hidden relative">
//   <div
//     class="parallax-bg absolute inset-x-0"
//     style={{ height: '150%', top: '-25%', background: 'linear-gradient(...)' }}
//   />
//   <div class="relative z-10">前景コンテンツ</div>
// </section>

const slides = gsap.utils.toArray<HTMLElement>('.pin-slide');

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.pin-section',
    pin: true,                            // セクションをピン留め（固定）
    start: 'top top',
    end: `+=${slides.length * 400}`,    // スライド数 × 400px のスクロール距離
    scrub: 1,
  },
});

// スライドを順番にフェード切り替え
slides.forEach((slide, i) => {
  if (i > 0) {
    tl.from(slide, { autoAlpha: 0, y: 30, duration: 1 });
    tl.to(slides[i - 1], { autoAlpha: 0, y: -30, duration: 1 }, '<');
  }
});

// autoAlpha は opacity と visibility をまとめて制御するGSAPの特殊プロパティ

const cards = gsap.utils.toArray<HTMLElement>('.h-card');
const cardWidth = cards[0].offsetWidth; // 各カードの幅を取得

gsap.to('.h-track', {
  x: -(cards.length - 1) * cardWidth, // カード(n-1)枚分だけ左に移動
  ease: 'none',
  scrollTrigger: {
    trigger: '.horizontal-section',
    pin: true,                                          // セクションをピン留め
    scrub: 1,
    end: () => `+=${(cards.length - 1) * cardWidth}`, // スクロール距離を動的計算
  },
});

// HTML: overflow: hidden でスクロールバーを隠す
// <section class="horizontal-section overflow-hidden">
//   <div class="h-track flex" style={{ width: `${cards.length * 100}%` }}>
//     {cards.map(card => (
//       <div class="h-card flex-shrink-0" style={{ width: `${100 / cards.length}%` }}>
//         {card.label}
//       </div>
//     ))}
//   </div>
// </section>