document.addEventListener("DOMContentLoaded", function () {
  // オープニングアニメーション
  const opening = document.querySelector(".p-opening");

  if (!sessionStorage.getItem("visited")) {
    sessionStorage.setItem("visited", "true");

    let tl = gsap.timeline({ delay: 0.5 });
    let numElement = document.querySelector(".p-opening__num");
    let countObj = { value: 0 };

    tl.to(countObj, {
      value: 100,
      duration: 1.2,
      ease: "linear",
      onUpdate: function () {
        numElement.textContent = Math.floor(countObj.value);
      }
    }, 0)
    .to(".p-opening__line", {
      scaleX: 1,
      duration: 1.2,
      ease: "power2.out"
    }, 0)
    .to(".p-opening__body", {
      opacity: 0,
      duration: 0.5,
      ease: "power2.out"
    }, "+=0.5")
    .to(".p-opening", {
      x: "100vw",
      duration: 1,
      ease: "power2.inOut",
      onComplete: function () {
        opening.style.display = "none";
      }
    });
  } else {
    opening.style.display = "none";
  }

  const video = document.querySelector(".p-mv__bg video");
  video.addEventListener("canplaythrough", function () {
    document.querySelector(".p-mv__bg").classList.add("is-loaded");
  });
});

// フェードアップ
const isMobile = window.innerWidth <= 767;
const yValue = isMobile ? 50 : 80;
const fadeUp = document.getElementsByClassName('js-fadeUp');
for (let i = 0; i < fadeUp.length; i++) {
  gsap.fromTo(
    fadeUp[i],
    {
      y: yValue,
    },
    {
      y: 0,
      duration: 0.8,
      stagger: 0.1,
      scrollTrigger: {
        trigger: fadeUp[i],
        start: 'top 90%',
        end: 'top 10%',
        scrub: true,
      },
    }
  );
}

// セレクタ ".js-trigger" で要素を取得
const items = gsap.utils.toArray(".js-trigger");
items.forEach((item) => {
  gsap.fromTo(
    item.querySelector("img"),
    {
      yPercent: 0,
    },
    {
      yPercent: -20,
      ease: "none",
      scrollTrigger: {
        trigger: item,
        start: "top bottom",
        end: "bottom top",
        scrub: 1,
      },
    }
  );
});