script.js

const openButton = document.querySelector("#openLetter");
const musicButton = document.querySelector("#musicToggle");
const audio = document.querySelector("#letterAudio");
const revealItems = document.querySelectorAll(".reveal");
const memoryCards = document.querySelectorAll(".memory-card");
const photoCards = document.querySelectorAll(".photo-card");

const MUSIC_START_SECONDS = 80;

openButton?.addEventListener("click", () => {
  document.body.classList.add("letter-open");
  document.querySelector("#letter")?.scrollIntoView({ behavior: "smooth", block: "start" });
});

musicButton?.addEventListener("click", async () => {
  if (!audio) return;

  try {
    if (!audio.getAttribute("src")) {
      audio.setAttribute("src", audio.dataset.src || "assets/audio/bushuo.mp3");
    }

    if (audio.paused) {
      audio.currentTime = Math.min(MUSIC_START_SECONDS, Number.isFinite(audio.duration) ? audio.duration : MUSIC_START_SECONDS);
      await audio.play();
      musicButton.textContent = "暂停音乐";
      musicButton.setAttribute("aria-pressed", "true");
    } else {
      audio.pause();
      musicButton.textContent = "播放";
      musicButton.setAttribute("aria-pressed", "false");
    }
  } catch {
    musicButton.textContent = "播放";
  }
});

audio?.addEventListener("ended", () => {
  musicButton.textContent = "播放";
  musicButton.setAttribute("aria-pressed", "false");
});

memoryCards.forEach((card) => {
  card.addEventListener("click", () => {
    card.classList.toggle("is-open");
  });
});

photoCards.forEach((card) => {
  const imagePath = card.dataset.image;

  if (imagePath) {
    const probe = new Image();
    probe.onload = () => {
      card.classList.add("has-image");
      card.style.backgroundImage = `linear-gradient(180deg, rgba(7, 17, 31, 0.08), rgba(7, 17, 31, 0.5)), url("${imagePath}")`;
    };
    probe.src = imagePath;
  }

  card.addEventListener("click", () => {
    card.classList.toggle("is-open");
  });
});

if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.12 }
  );

  revealItems.forEach((item) => observer.observe(item));
} else {
  revealItems.forEach((item) => item.classList.add("is-visible"));
}