// hamburger menu
window.onload = function () {
  var nav = document.getElementById('nav-wrapper');
  var hamburger = document.getElementById('js-hamburger');

  hamburger.addEventListener('click', function () {
      nav.classList.toggle('open');
  });
};
$(function () {
  $(window).on("scroll", function () {
    const sliderHeight = $(".mv").height();
    if (sliderHeight - 30 < $(this).scrollTop()) {
      $(".js-header").addClass("headerColorScroll");
    } else {
      $(".js-header").removeClass("headerColorScroll");
    }
  });
});
//loading
const loading = document.querySelector(".loading");
window.addEventListener("load", () => {
  setTimeout(() => {
    loading.classList.add("loaded");
    document.body.classList.remove("loading-active"); // ← ここで解除
  }, 4000);
});
//slide
$(document).ready(function(){
  $("#js-topics-slider").slick({
      arrows: true,
      autoplaySpeed: 4000,
      autoplay: true, 
      infinite: true,
      speed: 800,
      variableWidth: true,
      appendArrows: $('.arrows'),
      prevArrow: '<img src="../assets/img/fantta-template-e/arrow-prev.png" class="arrow prev-arrow">',
      nextArrow: '<img src="../assets/img/fantta-template-e/arro-next.png" class="arrow next-arrow">',
      slidesToShow: 3,
      slidesToScroll: 1,
      centerMode: true,
      dots: true, 
      dotsClass: 'dots-wrap',
      appendDots: $('.dots-box'),
      responsive: [
        {
          breakpoint: 767,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            variableWidth: false,
            centerMode: false
          }
        }
      ]
  });
});
// youtube
(function () {
  if ($(".js-modal-video").length) {
    $(".js-modal-video").modalVideo({
      channel: "youtube",
      youtube: {
        controls: 1,
      },
    });
  }
})();


//fanclub
$(function () {
  let hasAnimated = false;

  function animateText(callback) {
    const $text = $('#animated-text');
    const text = $text.text();
    $text.html('');

    // 1文字ずつ <span> に
    for (let i = 0; i < text.length; i++) {
      const span = $('<span>').text(text[i]).css({ opacity: 0 });
      $text.append(span);
    }

    // 文字ごとにアニメ
    $text.find('span').each(function (i) {
      $(this).delay(100 * i).animate({ opacity: 1 }, 300);
    });

    const totalDuration = 100 * text.length + 300;

    // フェードアウト → callback実行
    setTimeout(() => {
      $text.fadeOut(500, function () {
        callback(); // ←ここで次の処理を呼ぶ
      });
    }, totalDuration);
  }

  function fadeInContent() {
    // フェードインエリアを表示＋順番に中身表示
    $('#fc_fade-in').css('display', 'block').animate({ opacity: 1 }, 500, function () {
      const targets = [
        '#fc_fade-in .logo',
        '#fc_fade-in .list--login',
        '#fc_fade-in .txt--basic',
        '#fc_fade-in .btn'
      ];

      targets.forEach((selector, i) => {
        $(selector).delay(i * 600).fadeIn(600);
      });
    });
  }

  // スクロールトリガー
  $(window).on('scroll', function () {
    if (hasAnimated) return;

    const fanclubTop = $('#fanclub').offset().top;
    const scrollTop = $(window).scrollTop();
    const windowHeight = $(window).height();

    if (scrollTop + windowHeight > fanclubTop + 100) {
      hasAnimated = true;
      animateText(fadeInContent);
    }
  });
});

// GALLERY slide
$(document).ready(function(){
  $("#gallery-slider").slick({
      arrows: true,
      autoplaySpeed: 4000,
      // autoplay: true, 
      infinite: true,
      speed: 800,
      variableWidth: true,
      appendArrows: $('.gallery-arrows'),
      prevArrow: '<img src="../assets/img/fantta-template-e/arrow-prev.png" class="arrow prev-arrow">',
      nextArrow: '<img src="../assets/img/fantta-template-e/arro-next.png" class="arrow next-arrow">',
      slidesToShow: 3,
      slidesToScroll: 1,
      centerMode: false,
      dots: false, 
      roop: false,

  });
});

$(document).ready(function(){
  $("#gallery-slider2").slick({
      arrows: true,
      autoplaySpeed: 4000,
      // autoplay: true, 
      infinite: true,
      speed: 800,
      variableWidth: true,
      appendArrows: $('.gallery-arrows2'),
      prevArrow: '<img src="../assets/img/fantta-template-e/arrow-prev.png" class="arrow prev-arrow">',
      nextArrow: '<img src="../assets/img/fantta-template-e/arro-next.png" class="arrow next-arrow">',
      slidesToShow: 3,
      slidesToScroll: 1,
      centerMode: false,
      dots: false, 
      roop: false,
  });
});

// slide-in
jQuery(function ($) {
  var fadeIn = $('.slide-in');
  $(window).on('scroll', function () {
    $(fadeIn).each(function () {
      var offset = $(this).offset().top;
      var scroll = $(window).scrollTop(); 
      var windowHeight = $(window).height();
      if (scroll > offset - windowHeight + 150) {
        $(this).addClass("scroll-in");
      }
    });
  });
});

// anime-up
document.addEventListener("DOMContentLoaded", () => {
  const objects = document.querySelectorAll('.anime-up');

  const cb = function(entries, observer) {
      entries.forEach(entry => {
          if (entry.isIntersecting) {
              entry.target.classList.add('displayed');
              observer.unobserve(entry.target);
          }
      });
  };

  const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0
  };

  const io = new IntersectionObserver(cb, options);

  objects.forEach(object => {
      io.observe(object);
  });
});

const animationTargetElements = document.querySelectorAll(".anime-up");
for( let i =0; i < animationTargetElements.length; i++ ){
  const targetElement = animationTargetElements[i]
  texts = targetElement.textContent;
  textsArray = [];

  targetElement.textContent = "";

  for(let j =0; j < texts.split("").length; j++){
    textsArray.push('<span><span style="animation-delay: '+ ((j+0) * 0.1) +'s" >' + texts.split("")[j] + '<span></span>')
  }
  for(let k =0; k < textsArray.length; k++){
    targetElement.innerHTML += textsArray[k];
  }
}