/* global React */ const { useState, useEffect, useRef } = React; const C = { ink: '#1F2022', green: '#5C6457', clearGreen: '#B1B4A9', bege: '#EEE8DA', grey: '#EAECEB', terracota: '#974315', white: '#FFFFFF', }; // ============================================================ // useIsMobile — responsive breakpoint hook // ============================================================ function useIsMobile(breakpoint = 768) { const [isMobile, setIsMobile] = useState(window.innerWidth < breakpoint); useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth < breakpoint); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [breakpoint]); return isMobile; } // ============================================================ // useScrollReveal — IntersectionObserver-triggered fade + slide // Elements start invisible, animate in when entering viewport. // ============================================================ function useScrollReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; el.style.opacity = '0'; el.style.transform = 'translateY(48px)'; el.style.transition = 'opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1)'; const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; observer.unobserve(el); } }); }, { threshold: 0.12 } ); observer.observe(el); return () => observer.disconnect(); }, []); return ref; } // ============================================================ // WordReveal — scroll-driven word-by-word text reveal // Each word starts faded, becomes opaque as user scrolls. // Progress tied to scroll position (not one-shot). // ============================================================ function WordReveal({ text, italic, style }) { const containerRef = useRef(null); // Split text into segments: regular words and the italic portion const segments = []; if (italic) { const idx = text.indexOf(italic); if (idx >= 0) { const before = text.substring(0, idx).trim(); const after = text.substring(idx + italic.length).trim(); if (before) before.split(/\s+/).forEach(w => segments.push({ word: w, em: false })); italic.split(/\s+/).forEach(w => segments.push({ word: w, em: true })); if (after) after.split(/\s+/).forEach(w => segments.push({ word: w, em: false })); } else { text.split(/\s+/).forEach(w => segments.push({ word: w, em: false })); } } else { text.split(/\s+/).forEach(w => segments.push({ word: w, em: false })); } useEffect(() => { const container = containerRef.current; if (!container) return; const wordEls = container.querySelectorAll('[data-word]'); if (!wordEls.length) return; let raf = null; const update = () => { const rect = container.getBoundingClientRect(); const wh = window.innerHeight; // Range: words start revealing when container top hits 85% of viewport // All words revealed when container top hits 25% of viewport const enter = wh * 0.85; const full = wh * 0.25; const totalWords = wordEls.length; wordEls.forEach((wordEl, i) => { // Each word has its own reveal point within the scroll range const wordStart = enter - (i / totalWords) * (enter - full); const wordEnd = wordStart - (enter - full) * 0.12; // each word reveals over ~12% of the range let p; if (rect.top >= wordStart) p = 0; else if (rect.top <= wordEnd) p = 1; else p = (wordStart - rect.top) / (wordStart - wordEnd); // Clamp p = Math.max(0, Math.min(1, p)); wordEl.style.opacity = String(0.15 + p * 0.85); }); }; const onScroll = () => { if (raf) cancelAnimationFrame(raf); raf = requestAnimationFrame(update); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); return (

{segments.map((seg, i) => { const wordStyle = { display: 'inline', opacity: 0.15, transition: 'opacity 0.05s linear', }; if (seg.em) { return ( {seg.word} {i < segments.length - 1 ? ' ' : ''} ); } return ( {seg.word} {i < segments.length - 1 ? ' ' : ''} ); })}

); } // ============================================================ // SiteImage — real image via background-image // ============================================================ function SiteImage({ src, style = {} }) { return (
); } // ============================================================ // Tree watermark — actual tree PNG // ============================================================ function TreeMark({ opacity = 0.08, style = {} }) { return (