/* ============================================================
   Maré Alta · interações e animações
   ============================================================ */
(function () {
  "use strict";

  const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  /* ---------- Opening animation / preloader ---------- */
  const loader = document.getElementById("loader");
  document.body.classList.add("is-loading");

  function dismissLoader() {
    if (!loader) return;
    loader.classList.add("is-done");
    document.body.classList.remove("is-loading");
    // stagger the hero entrance right after the curtain lifts
    setTimeout(revealHero, 150);
  }

  window.addEventListener("load", () => {
    // give the intro a beat to breathe (skipped for reduced motion)
    setTimeout(dismissLoader, prefersReduced ? 0 : 1600);
  });

  /* ---------- Hero staggered reveal ---------- */
  function revealHero() {
    const hero = document.querySelector(".hero");
    if (!hero) return;
    hero.querySelectorAll(".reveal").forEach((el, i) => {
      el.style.setProperty("--i", i);
      el.classList.add("is-visible");
    });
  }

  /* ---------- Reveal on scroll (IntersectionObserver) ---------- */
  const revealables = document.querySelectorAll(".menu-section .reveal, .parallax .reveal");

  if ("IntersectionObserver" in window && !prefersReduced) {
    const io = new IntersectionObserver((entries, obs) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" });

    revealables.forEach((el) => io.observe(el));
  } else {
    revealables.forEach((el) => el.classList.add("is-visible"));
  }

  /* ---------- Header state on scroll ---------- */
  const header = document.getElementById("header");
  const onScroll = () => {
    header.classList.toggle("is-scrolled", window.scrollY > 40);
  };
  onScroll();
  window.addEventListener("scroll", onScroll, { passive: true });

  /* ---------- Mobile navigation ---------- */
  const nav = document.querySelector(".nav");
  const toggle = document.getElementById("navToggle");
  const navList = document.getElementById("navList");

  if (toggle) {
    toggle.addEventListener("click", () => {
      const open = nav.classList.toggle("is-open");
      toggle.setAttribute("aria-expanded", String(open));
    });

    // close after choosing a section
    navList.addEventListener("click", (e) => {
      if (e.target.closest("a")) {
        nav.classList.remove("is-open");
        toggle.setAttribute("aria-expanded", "false");
      }
    });
  }

  /* ---------- Active section highlight in nav ---------- */
  const sections = document.querySelectorAll("main section[id]");
  const navLinks = navList ? navList.querySelectorAll("a") : [];

  if ("IntersectionObserver" in window && navLinks.length) {
    const spy = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const id = entry.target.id;
          navLinks.forEach((a) =>
            a.style.setProperty(
              "color",
              a.getAttribute("href") === "#" + id ? "var(--teal)" : ""
            )
          );
        }
      });
    }, { rootMargin: "-45% 0px -50% 0px" });

    sections.forEach((s) => spy.observe(s));
  }

  /* ---------- Gentle parallax drift for hero particles ---------- */
  if (!prefersReduced) {
    const hero = document.querySelector(".hero");
    const heroContent = document.querySelector(".hero__content");
    let ticking = false;

    window.addEventListener("scroll", () => {
      if (ticking || !hero) return;
      ticking = true;
      requestAnimationFrame(() => {
        const y = window.scrollY;
        if (y < window.innerHeight && heroContent) {
          heroContent.style.transform = `translateY(${y * 0.15}px)`;
          heroContent.style.opacity = String(Math.max(0, 1 - y / (window.innerHeight * 0.8)));
        }
        ticking = false;
      });
    }, { passive: true });
  }
})();
