/* Flávia Moreira · interações e animações
   A página é totalmente legível sem JS — isto apenas acrescenta calma ao scroll. */

// Marca que o JS está disponível (controla o estado inicial das revelações no CSS)
document.documentElement.classList.add("js");

(function () {
  "use strict";

  const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const header = document.querySelector("[data-header]");

  // Cabeçalho ganha fundo/sombra ao sair do topo
  if (header) {
    const onScroll = () => header.classList.toggle("is-scrolled", window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
  }

  const reveals = document.querySelectorAll("[data-reveal]");

  // Sem GSAP ou com movimento reduzido: mostra tudo de imediato
  if (prefersReduced || typeof window.gsap === "undefined") {
    reveals.forEach((el) => el.classList.add("is-visible"));
    return;
  }

  const { gsap } = window;
  gsap.registerPlugin(window.ScrollTrigger);

  // Revelações suaves, com leve escalonamento entre elementos próximos
  reveals.forEach((el) => {
    gsap.fromTo(
      el,
      { autoAlpha: 0, y: 26 },
      {
        autoAlpha: 1,
        y: 0,
        duration: 1.1,
        ease: "power3.out",
        scrollTrigger: {
          trigger: el,
          start: "top 88%",
          toggleActions: "play none none none",
        },
        onStart: () => el.classList.add("is-visible"),
      }
    );
  });

  // Parallax muito subtil nas formas orgânicas do hero
  gsap.utils.toArray(".blob").forEach((blob, i) => {
    gsap.to(blob, {
      yPercent: i % 2 === 0 ? 18 : -14,
      ease: "none",
      scrollTrigger: {
        trigger: ".hero",
        start: "top top",
        end: "bottom top",
        scrub: 1,
      },
    });
  });
})();
