const textColorDefault = "gray";
const textColorAnim = "#267693";
const shadowOpacity = "cc";
const dotBorderColor = "#787570";
const dotFillColor = "#efeae0";
const startScale = 0.8;
const endScale = 1;
const lineWrap = document.querySelector(".process-line-wrap");
const lastItem = document.querySelector("#process-list > .process-li:last-child",);
const lineWrapBottom = () =>
  `${
    lastItem.clientHeight -
    parseFloat(window.getComputedStyle(lastItem).paddingTop) -
    lastItem.clientWidth * 0.03
  }px`;
document.querySelectorAll(".process-li").forEach((li) => {
  const number = li.querySelector(".process-li-number");
  const content = li.querySelector(".process-li-content");
  const image = li.querySelector(".process-li-figure");
  const dot = li.querySelector(".process-dot");
  let naturalH = content.offsetHeight;
  gsap
    .timeline({
      scrollTrigger: {
        trigger: li,
        start: "top center",
        end: "15% center",
        scrub: true,
      },
      defaults: { ease: "none" },
      onUpdate: () => ScrollTrigger.refresh(),
    })
    .fromTo(
      number,
      { color: textColorDefault, textShadow: "none" },
      {
        color: textColorAnim,
        textShadow: `0px 0px 4px ${textColorAnim}${shadowOpacity}`,
      },
      0,
    )
    .fromTo(
      content,
      { opacity: 0.5, scale: startScale, height: () => naturalH * startScale },
      { opacity: 1, scale: endScale, height: () => naturalH * endScale },
      0,
    )
    .fromTo(image, { opacity: 0.08 }, { opacity: 1 }, 0)
    .fromTo(
      dot,
      {
        backgroundColor: dotFillColor,
        borderColor: dotBorderColor,
        boxShadow: "none",
      },
      {
        backgroundColor: textColorAnim,
        borderColor: textColorAnim,
        boxShadow: `0px 0px 4px ${textColorAnim}${shadowOpacity}`,
      },
      0,
    );
  gsap
    .timeline({
      scrollTrigger: {
        trigger: li,
        start: "85% center",
        end: "bottom center",
        scrub: true,
      },
      defaults: { ease: "none" },
      onUpdate: () => ScrollTrigger.refresh(),
    })
    .fromTo(
      number,
      {
        color: textColorAnim,
        textShadow: `0px 0px 4px ${textColorAnim}${shadowOpacity}`,
      },
      { color: textColorDefault, textShadow: "none" },
      0,
    )
    .fromTo(
      content,
      { opacity: 1, scale: endScale, height: () => naturalH * endScale },
      { opacity: 0.5, scale: startScale, height: () => naturalH * startScale },
      0,
    )
    .fromTo(image, { opacity: 1 }, { opacity: 0.08 }, 0)
    .fromTo(
      dot,
      {
        backgroundColor: textColorAnim,
        borderColor: textColorAnim,
        boxShadow: `0px 0px 4px ${textColorAnim}${shadowOpacity}`,
      },
      {
        backgroundColor: dotFillColor,
        borderColor: dotBorderColor,
        boxShadow: "none",
      },
      0,
    );
});
gsap.set(".process-li-figure", { opacity: 0.08 });
gsap.set(".process-li-content", {
  opacity: 0.5,
  scale: 0.8,
  height: (i, target) => target.offsetHeight * startScale,
});
gsap.set(".process-li-number", { color: textColorDefault, textShadow: "none" });
gsap.set(".process-dot", {
  backgroundColor: dotFillColor,
  borderColor: dotBorderColor,
  boxShadow: "none",
});
const setLineWrapBottom = () =>gsap.set(lineWrap, { bottom: lineWrapBottom() });
new ResizeObserver(setLineWrapBottom).observe(lastItem);
setLineWrapBottom();
window.addEventListener("resize",()=>{window.location.reload();});