/* ============================================================
   装飾・効果パーツ（effects）のJS
   - キット（master_src/parts-effects.js）から必要ブロックのみ取込。
   - jQuery 前提（CMSが先に読み込む）。inviewプラグイン非依存。
   ============================================================ */

/* ==== part:effects-slidetext1 start ==== */

//===============================================================
// テキストスライド
//===============================================================
$(function() {
    // 元のテキストを4回複製
    const originalText = $('.effects-slidetext1-parts span').first();
    for (let i = 0; i < 3; i++) {
        originalText.clone().appendTo('.effects-slidetext1-parts div');
    }
    
    // スクロールアニメーション関数
    function scrollText() {
        const $textSlide = $('.effects-slidetext1-parts div');
        const firstSpan = $textSlide.children('span').first();
        const spanWidth = firstSpan.outerWidth(true);
        
        $textSlide.animate(
            { marginLeft: -spanWidth }, 
            30000, // アニメーション時間（ミリ秒）
            'linear',
            function() {
				// アニメーション完了後、最初の要素を最後に移動
                firstSpan.appendTo($textSlide);
                $textSlide.css('marginLeft', 0);
				// 次のアニメーションを開始
                scrollText();
            }
        );
    }

    // アニメーション開始
    scrollText();
});

/* ==== part:effects-slidetext1 end ==== */

/* ==== part:effects-slideimg2 start ==== */

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.effects-slideimg2-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

        // 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

        // サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

        // 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

        // .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

        // 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

        // サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

        // サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

/* ==== part:effects-slideimg2 end ==== */

/* ==== part:effects-slideimg2-circle start ==== */

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.effects-slideimg2-circle-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

        // 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

        // サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

        // 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

        // .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

        // 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

        // サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

        // サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

/* ==== part:effects-slideimg2-circle end ==== */

/* ==== part:effects-slideimg3 start ==== */

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.effects-slideimg3-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

        // 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

        // サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

        // 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

        // .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

        // 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

        // サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

        // サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

/* ==== part:effects-slideimg3 end ==== */

/* ==== part:effects-slideimg3-circle start ==== */

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.effects-slideimg3-circle-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

        // 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

        // サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

        // 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

        // .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

        // 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

        // サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

        // サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

/* ==== part:effects-slideimg3-circle end ==== */


/* ==== part:effects-bg-slideup1 start ==== */

//===============================================================
// 画像・動画アップのパララックス
//===============================================================
(() => {
  "use strict";

  const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduceMotion) return;

  /* =========================================================
    ▼ここだけ調整（全ブロック共通）
  ========================================================= */
  const maxMove     = 80;   // px：上下に動く最大量（大きいほど動く）
  const speed       = 1;    // 倍率：0.7で弱め、1.3で強め
  const dir         = 1;    // 1=通常 / -1=逆方向
  const extraHeight = 240;  // px：黒背景が見える時に増やす（目安：maxMove*2より大きく）
  /* ========================================================= */

  const boxes = Array.from(document.querySelectorAll(".effects-bg-slideup1"));
  if (!boxes.length) return;

  const items = boxes.map(box => {
    const move = box.querySelector(".scrollfx-move");
    if (!move) return null;
    move.style.setProperty("--fx-extra", `${extraHeight}px`);
    return { box, move, top: 0, height: 0 };
  }).filter(Boolean);

  if (!items.length) return;

  const clamp01 = n => (n < 0 ? 0 : (n > 1 ? 1 : n));

  let vh = window.innerHeight || 0;
  let ticking = false;

  function measure(){
    vh = window.innerHeight || 0;
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

    items.forEach(item => {
      const r = item.box.getBoundingClientRect();
      item.top = r.top + scrollY;
      item.height = r.height || 0;
    });

    requestTick();
  }

  function update(){
    ticking = false;

    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
    const viewBottom = scrollY + vh;

    items.forEach(item => {
      const denom = (vh + item.height) || 1;
      const p = clamp01((viewBottom - item.top) / denom); // 0..1
      const t = (p - 0.5) * 2; // -1..+1
      const y = t * maxMove * speed * dir;

      item.move.style.transform = `translate3d(0, calc(-50% + ${y.toFixed(2)}px), 0)`;
    });
  }

  function requestTick(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(update);
  }

  window.addEventListener("scroll", requestTick, { passive: true });

  let resizeTimer = 0;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(measure, 100);
  });

  window.addEventListener("load", measure);
})();

/* ==== part:effects-bg-slideup1 end ==== */

/* ==== part:effects-bg-slideup-movie1 start ==== */

//===============================================================
// 画像・動画アップのパララックス
//===============================================================
(() => {
  "use strict";

  const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduceMotion) return;

  /* =========================================================
    ▼ここだけ調整（全ブロック共通）
  ========================================================= */
  const maxMove     = 80;   // px：上下に動く最大量（大きいほど動く）
  const speed       = 1;    // 倍率：0.7で弱め、1.3で強め
  const dir         = 1;    // 1=通常 / -1=逆方向
  const extraHeight = 240;  // px：黒背景が見える時に増やす（目安：maxMove*2より大きく）
  /* ========================================================= */

  const boxes = Array.from(document.querySelectorAll(".effects-bg-slideup-movie1"));
  if (!boxes.length) return;

  const items = boxes.map(box => {
    const move = box.querySelector(".scrollfx-move");
    if (!move) return null;
    move.style.setProperty("--fx-extra", `${extraHeight}px`);
    return { box, move, top: 0, height: 0 };
  }).filter(Boolean);

  if (!items.length) return;

  const clamp01 = n => (n < 0 ? 0 : (n > 1 ? 1 : n));

  let vh = window.innerHeight || 0;
  let ticking = false;

  function measure(){
    vh = window.innerHeight || 0;
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

    items.forEach(item => {
      const r = item.box.getBoundingClientRect();
      item.top = r.top + scrollY;
      item.height = r.height || 0;
    });

    requestTick();
  }

  function update(){
    ticking = false;

    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
    const viewBottom = scrollY + vh;

    items.forEach(item => {
      const denom = (vh + item.height) || 1;
      const p = clamp01((viewBottom - item.top) / denom); // 0..1
      const t = (p - 0.5) * 2; // -1..+1
      const y = t * maxMove * speed * dir;

      item.move.style.transform = `translate3d(0, calc(-50% + ${y.toFixed(2)}px), 0)`;
    });
  }

  function requestTick(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(update);
  }

  window.addEventListener("scroll", requestTick, { passive: true });

  let resizeTimer = 0;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(measure, 100);
  });

  window.addEventListener("load", measure);
})();

/* ==== part:effects-bg-slideup-movie1 end ==== */
