/* ──────────────────────────────────────────────────────────── Section 8 - CTA / Closer · "If you're building toward the same horizon, we'd like to hear from you." Full-viewport closer, redesigned per the new brief: - Plate header row (PLATE V - CONTACT · § 05) - H2 headline with forced two-line break - Subhead: Seed-round status - Primary CTA - REQUEST INVESTOR MATERIALS - Hairline divider - Two-column contact block (DIRECT · PARTNERSHIPS & RESEARCH) - Hairline divider - Footer row (wordmark · spec line) - Geothermal dusk BG, anchored low; no parallax (closer = still). - Staggered scroll reveal, ease-out-expo. ──────────────────────────────────────────────────────────── */ function SectionCTA() { // Reveal trigger - once the section's top crosses 70% of the viewport, // walk the staggered timeline on the elements tagged with data-cta-rev. const sectionRef = React.useRef(null); const bgRef = React.useRef(null); // Very-mild BG parallax - translate up to ~6% of viewport across the // section's transit. Closer should still feel grounded; this is // intentionally subtle. React.useEffect(() => { const sec = sectionRef.current; const bg = bgRef.current; if (!sec || !bg) return; const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduceMotion) return; let ticking = false; const update = () => { ticking = false; const r = sec.getBoundingClientRect(); const vh = window.innerHeight || 800; const center = r.top + r.height / 2; const progress = (center - vh / 2) / (vh / 2 + r.height / 2); const clamped = Math.max(-1, Math.min(1, progress)); const y = -clamped * vh * 0.06; bg.style.transform = "translate3d(0, " + y.toFixed(1) + "px, 0)"; }; const onScroll = () => { if (ticking) return; ticking = true; requestAnimationFrame(update); }; update(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); React.useEffect(() => { const sec = sectionRef.current; if (!sec) return; const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduceMotion) { sec.querySelectorAll("[data-cta-rev]").forEach((el) => el.classList.add("is-in")); return; } const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { sec.classList.add("is-in"); io.disconnect(); } }); }, { rootMargin: "0px 0px -30% 0px", threshold: 0 }); io.observe(sec); return () => io.disconnect(); }, []); return (
{/* ── BG image - geothermal dusk. Anchored at center 65% so the horizon sits in the lower third and the upper text zone stays the soft sky region. No parallax. ────────────────── */}
); } window.SectionCTA = SectionCTA;