/* ──────────────────────────────────────────────────────────── Section 4 - The Impact on Geothermal "Axion's system doesn't just lower drilling costs. It changes the scale of what geothermal can become." 4 stat cards in a 2x2 or 4-up grid. ──────────────────────────────────────────────────────────── */ function SectionImpact() { // Scroll-zoom: U.S. geothermal heatmap background. // // Mirrors the Section 07 (Domain expansion) capsule treatment: // the bg starts tight (~1.25×) when the section is entering the // viewport and pulls back to (~1.00×) by the time it exits the // top. Smoothstep easing on the progress curve so the change // feels deliberate, not linear; Lenis already smooths the scroll // input so we don't layer another time-based easing on top. // // We never go BELOW 1.0 because the bg is height-locked to the // wrapper (100%) - shrinking would expose the section background // above/below. The wrapper has overflow: hidden (via the mask) // so the 1.25× over-scale stays clipped to the section frame. const bgRef = React.useRef(null); const sectionRef = React.useRef(null); React.useEffect(() => { const el = bgRef.current; const section = sectionRef.current; if (!el || !section) return; const prm = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)"); if (prm && prm.matches) { el.style.transform = "scale(1)"; return; } let raf = 0; const tick = () => { raf = 0; const sec = sectionRef.current; const bg = bgRef.current; if (!sec || !bg) return; const r = sec.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; // Progress 0→1 as the section travels from "just entering // viewport" to "just exiting the top". Same formula as the // Section 07 capsule. let p = 1 - (r.top + r.height) / (vh + r.height); p = Math.max(0, Math.min(1, p)); const eased = p * p * (3 - 2 * p); // smoothstep const scale = 1.25 - eased * 0.25; // 1.25 → 1.00 bg.style.transform = `scale(${scale.toFixed(4)})`; }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); }; tick(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); const cards = [ { stat: "90GW", label: "U.S. CAPACITY · BY 2050", body: "U.S. geothermal capacity achievable by 2050 with next-generation drilling technology." }, { stat: "1,300×", label: "RESOURCE BEYOND THE GRID", body: "How much more geothermal resource exists beyond what's currently on the U.S. grid." }, { stat: "10×", label: "OUTPUT MULTIPLE", body: "Energy output of a superhot rock well versus a conventional geothermal well." }, { stat: "96%", label: "DRILLING COST REDUCTION", body: "Projected reduction in drilling cost per well with Axion's system." } ]; return (
{/* Heat map background - parallax-contained. Wrapper is absolute-inset with overflow: hidden so the 120% oversized inner element's 10% buffer above/below the frame stays clipped. The inner element owns the parallax translate (±40px). ImageSettle wraps the wrapper for the entrance choreography (opacity + scale + y settle); the inner ref owns the per-scroll transform - separated so they never fight over `transform`. */}