// about.js (mobile strength Ä«µå ÅÇ hover ´ëü)
document.addEventListener("DOMContentLoaded", () => {
  const cards = Array.from(document.querySelectorAll(".strength_card"));
  if (!cards.length) return;


  const MQ = window.matchMedia("(max-width: 768px)");


  const clearAll = () => {
    cards.forEach((c) => c.classList.remove("is-active"));
  };


  const isMobile = () => MQ.matches;


  // Ä«µå Ŭ¸¯: ¸ð¹ÙÀÏ¿¡¼­¸¸ Åä±Û (ÇÑ ¹ø¿¡ Çϳª¸¸ active)
  const onCardClick = (e) => {
    if (!isMobile()) return;


    const card = e.currentTarget;
    const alreadyActive = card.classList.contains("is-active");


    clearAll();
    if (!alreadyActive) card.classList.add("is-active");
  };


  // ¹Ù±ù Ŭ¸¯: ¸ð¹ÙÀÏ¿¡¼­¸¸ active ÇØÁ¦
  const onOutsideClick = (e) => {
    if (!isMobile()) return;


    const clickedInside = e.target.closest(".strength_card");
    if (!clickedInside) clearAll();
  };


  // ¸®»çÀÌÁî: 768px ÃÊ°úµÇ¸é(µ¥½ºÅ©Å¾) ¸ð¹ÙÀÏ active »óÅ Á¦°Å
  const onResizeChange = () => {
    if (!isMobile()) clearAll();
  };


  // À̺¥Æ® ¹ÙÀεù
  cards.forEach((c) => c.addEventListener("click", onCardClick));
  document.addEventListener("click", onOutsideClick);
  MQ.addEventListener?.("change", onResizeChange);
  window.addEventListener("resize", onResizeChange);
});


// about.js (FINAL)
(() => {
  // =========================
  // 1) History Reveal on Scroll
  // =========================
  const revealEls = Array.from(document.querySelectorAll(".reveal"));
  if (!revealEls.length) return;


  const io = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-in");
          // ÇÑ ¹ø¸¸ ½ÇÇàÇÏ°í ½ÍÀ¸¸é °üÃø ÇØÁ¦
          io.unobserve(entry.target);
        }
      });
    },
    {
      root: null,
      rootMargin: "0px 0px -10% 0px",
      threshold: 0.15,
    },
  );


  revealEls.forEach((el) => io.observe(el));
})();