/* ──────────────────────────────────────────────────────────── Section 7 - Space "One system. Two frontiers." Two cards side-by-side: "The same technology" and "The expansion opportunity." A subtle starfield and a horizon hairline divide the two. ──────────────────────────────────────────────────────────── */ function SectionSpace() { // Slow scroll-zoom treatment applied ONLY to the foreground capsule // (replaces the old image-wide zoom): as the section travels through // the viewport, the capsule starts tight (~1.10×) and pulls back to // (~1.00×). The starfield+earth bg behind it is height-locked and // anchored top-right so the earth is always visible regardless of // viewport size. const bgRef = React.useRef(null); const sectionRef = React.useRef(null); React.useEffect(() => { if (!sectionRef.current || !bgRef.current) 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; // p = 0 when section is fully below viewport (entering), // = 1 when section has fully exited the top. // Use the section's center vs viewport center so the curve // straddles the section symmetrically. const center = r.top + r.height / 2; const span = (r.height + vh) / 2; let p = 1 - (center / span + 0.5) / 1; // approx // simpler: progress based on top relative to viewport height p = 1 - (r.top + r.height) / (vh + r.height); p = Math.max(0, Math.min(1, p)); // Ease the curve so the change feels deliberate, not linear. const eased = p * p * (3 - 2 * p); // smoothstep // Scroll-zoom: gentle camera pull-back from 1.10 → 1.00. We // never go BELOW 1.0 because the image is height-locked to the // section (auto 100%) and shrinking would expose the section // background above/below. 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); }; }, []); return (

{/* Ambient particle field - same atmospheric layer used in sections 5 + 8. Sits above the BG image but below the section content; explicit zIndex keeps it as a quiet drifting layer. */} {typeof PtParticles !== "undefined" && } {/* ────────── 3-LAYER IMAGE SYSTEM (back → front) ────────── 1. Starfield : full-bleed atmospheric background 2. Planet : lit crescent, anchored top-right, bleeding off the top + right edges so the night side (transparent on the source PNG) never shows 3. Capsule : foreground hero, desktop scroll-zoom kept intact; on mobile becomes a rotated banner pinned upper-left of the establishing band */} {/* Layer 1 — Starfield. Plain cover; the planet is now its own layer so we no longer need a directional crop. */}

{/* Layer 2 — Planet. The asset is a sphere whose lit crescent is rendered in the top-right of the PNG and whose night side fades to transparent toward the bottom-left. Therefore we position the box so the lit corner sits AT the section's top-right with only a hair of bleed — the transparent bottom-left of the image extends down/left into the section and reads as starfield (it's fully transparent, so the night side simply isn't drawn). No rotation: the lit limb shows in its natural orientation, matching the legacy desktop build. */}

); } window.SectionSpace = SectionSpace;