{overlay && (

)} {credit && (

{credit}

)} {children}

); }; /* Brass-detail rule */ const Rule = ({ color = CK.charcoal, opacity = 0.16, style }) => (

); /* Section eyebrow */ const Eyebrow = ({ children, color = CK.brass }) => (

{children}

); /* Display heading */ const Display = ({ children, size = 96, color = CK.charcoal, weight = 400, italic = false, style, ...rest }) => (

{children}

); /* Body */ const Body = ({ children, size = 16, color = CK.slate, style }) => (

{children}

); /* Mono label */ const Mono = ({ children, size = 12, color = CK.slate, style }) => ( {children} ); /* Pill */ const Tag = ({ children, variant = 'outline', icon, style }) => { const variants = { outline: { bg: 'transparent', border: CK.charcoal, color: CK.charcoal }, solid: { bg: CK.estateGreen, border: CK.estateGreen, color: CK.ivory }, brass: { bg: CK.brass, border: CK.brass, color: CK.charcoal }, ghost: { bg: 'rgba(45,74,31,0.06)', border: 'transparent', color: CK.estateGreen }, sage: { bg: 'transparent', border: CK.sage + '88', color: CK.sage }, }; const v = variants[variant]; return ( {icon && {icon}} {children} ); }; /* Button */ const Button = ({ children, variant = 'primary', size = 'md', style, after }) => { const variants = { primary: { bg: CK.estateGreen, color: CK.ivory, border: CK.estateGreen }, brass: { bg: CK.brass, color: CK.charcoal, border: CK.brass }, ghost: { bg: 'transparent', color: CK.charcoal, border: CK.charcoal }, soft: { bg: CK.stone, color: CK.charcoal, border: CK.stoneDeep }, }; const v = variants[variant]; const sizes = { sm: { p: '8px 16px', fs: 13 }, md: { p: '12px 22px', fs: 14 }, lg: { p: '16px 28px', fs: 15 }, }; const s = sizes[size]; return ( ); }; /* Compact icon: square, circle, diamond — primitives only */ const Glyph = ({ shape = 'circle', size = 12, color = CK.brass, fill = false }) => { const stroke = color, fillC = fill ? color : 'none'; return ( ); }; Object.assign(window, { CK, Photo, Rule, Eyebrow, Display, Body, Mono, Tag, Button, Glyph }); /* ── Animation primitives ───────────────────────────────────────────── * Reveal — fades + lifts a node into view on scroll (IntersectionObserver, fires once). * Stagger — wraps children with incremental delays. * useParallax — returns a translateY based on element's scroll position. * — subtle lift / shadow on hover. */ const { useState: __useState, useEffect: __useEffect, useRef: __useRef, Children: __Children, cloneElement: __cloneElement, isValidElement: __isValidElement } = React; const Reveal = ({ children, delay = 0, y = 28, duration = 900, threshold = 0.15, once = true, as: Tag = 'div', style, className, ...rest }) => { const ref = __useRef(null); const [shown, setShown] = __useState(false); __useEffect(() => { const el = ref.current; if (!el) return; if (typeof IntersectionObserver === 'undefined') { setShown(true); return; } const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { setShown(true); if (once) io.unobserve(e.target); } else if (!once) setShown(false); }); }, { threshold, rootMargin: '0px 0px -8% 0px' }); io.observe(el); return () => io.disconnect(); }, [once, threshold]); return ( {children} ); }; const Stagger = ({ children, gap = 90, initialDelay = 0, y = 22, duration = 800, threshold = 0.12, as: Tag = 'div', style, className, ...rest }) => { const arr = __Children.toArray(children).filter(Boolean); return ( {arr.map((child, i) => ( {child} ))} ); }; /* useParallax — returns a number to use in translateY(...) — small magnitudes only */ const useParallax = (strength = 0.15) => { const ref = __useRef(null); const [y, setY] = __useState(0); __useEffect(() => { let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const el = ref.current; if (!el) return; const rect = el.getBoundingClientRect(); const center = rect.top + rect.height / 2; const offset = center - window.innerHeight / 2; setY(-offset * strength); }); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { cancelAnimationFrame(raf); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, [strength]); return [ref, y]; }; /* HoverCard — gentle lift + shadow on hover. Wrap any block. */ const HoverCard = ({ children, lift = 6, scale = 1.0, glow = '0 24px 60px rgba(31,36,25,0.16)', style, className, as: Tag = 'div', ...rest }) => { const [hover, setHover] = __useState(false); return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ transform: hover ? `translate3d(0, -${lift}px, 0) scale(${scale})` : 'translate3d(0,0,0) scale(1)', boxShadow: hover ? glow : 'none', transition: 'transform 480ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 480ms cubic-bezier(0.22, 1, 0.36, 1)', willChange: 'transform', ...style, }} {...rest} >{children} ); }; Object.assign(window, { Reveal, Stagger, useParallax, HoverCard });