/* Federica Gori — motion condiviso: scroll-reveal + micro-interazioni.
   Espone window.Reveal. Il CSS è iniettato da qui, così i <head> delle
   pagine non vanno tenuti allineati a mano. Movimento misurato, coerente
   coi token del DS (--dur-*, --ease-*): niente rimbalzi, niente loop. */

(function () {
  const s = document.createElement("style");
  s.textContent = `
    /* Dissolvenze morbide: durata lunga, curva che si spegne dolcemente,
       risalita minima — l'ingresso deve sembrare un respiro, non uno scatto. */
    .fg-reveal { opacity: 0; transform: translateY(10px);
      transition: opacity 850ms cubic-bezier(0.25, 0.6, 0.35, 1),
                  transform 950ms cubic-bezier(0.22, 0.8, 0.3, 1);
      transition-delay: var(--reveal-delay, 0ms); }
    .fg-reveal.is-in { opacity: 1; transform: none; }

    /* zoom lieve dell'immagine quando la card è in hover */
    .fg-cardimg { transition: transform var(--dur-slow, 480ms) var(--ease-soft, ease); }
    .fg-card:hover .fg-cardimg { transform: scale(1.04); }

    /* «Leggi l'articolo →»: underline e freccia via CSS (anche da tastiera) */
    .fg-readmore:hover, .fg-readmore:focus-visible { text-decoration: underline; }
    .fg-readmore .fg-arrow { display: inline-block; transition: transform var(--dur-fast, 140ms) var(--ease-soft, ease); }
    .fg-readmore:hover .fg-arrow { transform: translateX(3px); }

    /* chip dei temi del diario */
    .fg-chip { transition: background var(--dur-fast, 140ms) var(--ease-soft, ease),
                           border-color var(--dur-fast, 140ms) var(--ease-soft, ease); }
    .fg-chip:hover { background: var(--sand-200, #F1E9DA); border-color: var(--terra-400, #C98B62) !important; }

    /* Ritmo verticale: il token DS arriva a 128px per lato e due sezioni
       adiacenti sommavano ~256px di vuoto. Tetto più basso: 56→96px. */
    :root { --section-y: clamp(3.5rem, 6.5vw, 6rem); }

    /* su mobile il testo dell'hero viene prima della foto */
    @media (max-width: 880px) { .fg-media-first { order: 2; } }

    /* header fisso: ombra leggera solo quando la pagina è scrollata */
    header[data-fg-sticky] { transition: box-shadow 300ms ease; }
    header[data-fg-sticky].is-scrolled { box-shadow: 0 6px 24px rgba(42, 39, 36, 0.07); }

    /* mobile: più aria ai lati e hamburger con touch-target pieno,
       allineato otticamente al gutter */
    @media (max-width: 760px) {
      :root { --gutter: 1.5rem; }
      header button[aria-label="Menu"] { padding: 10px !important; margin: -10px -4px -10px 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .fg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
      .fg-cardimg, .fg-readmore .fg-arrow { transition: none !important; }
      .fg-card:hover .fg-cardimg { transform: none !important; }
    }`;
  document.head.appendChild(s);
})();

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

/* Observer condiviso, one-shot: rivela ed esce. */
let fgIO = null;
function fgObserve(el, onIn) {
  if (!fgIO) {
    fgIO = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) { if (e.target.__fgIn) e.target.__fgIn(); fgIO.unobserve(e.target); }
      }
    }, { rootMargin: "0px 0px -8% 0px", threshold: 0.1 });
  }
  el.__fgIn = onIn;
  fgIO.observe(el);
  return () => fgIO.unobserve(el);
}

/* <Reveal delay={80}>…</Reveal> — dissolve+rise quando entra nel viewport.
   Above the fold scatta al frame dopo il mount → dolce entrance al load.
   Figli di una grid: passare style={{ height: "100%" }}. */
function Reveal({ as = "div", delay = 0, className = "", style = {}, children, ...rest }) {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(FG_REDUCED.matches);
  React.useEffect(() => {
    if (inView || !ref.current) return;
    return fgObserve(ref.current, () => setInView(true));
  }, [inView]);
  const Tag = as;
  return (
    <Tag ref={ref} className={("fg-reveal" + (inView ? " is-in" : "") + " " + className).trim()}
         style={{ "--reveal-delay": delay + "ms", ...style }} {...rest}>
      {children}
    </Tag>
  );
}

Object.assign(window, { Reveal });
