/* global React, Icon, Logo, Mark, Button, Tag, Eyebrow */ const { useState: uS, useEffect: uE, useRef: uRef } = React; const PAD_X = 'clamp(22px, 5.5vw, 76px)'; const SEC_Y = 'clamp(72px, 11vw, 128px)'; // Step-snap for the pinned scroll-scrub sections, as a DIRECTION-based pager // (TikTok-style): after scrolling pauses, any deliberate swipe past a small // deadzone commits one step in that direction, so a light flick always advances // instead of rounding back to the same card. Larger drags move proportionally. // Scoped per-section; edges are left un-snapped so they hand off to neighbors. function attachStepSnap(secRef, pages) { if (pages < 2) return () => {}; const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); const DEADZONE = 0.1; // fraction of a page that counts as a deliberate swipe let timer = 0, snapping = false, current = 0; const snap = () => { const sec = secRef.current; if (!sec) return; const totalPx = sec.offsetHeight - window.innerHeight; if (totalPx <= 0) return; const top = sec.getBoundingClientRect().top; const p = -top / totalPx; if (p <= 0.004 || p >= 0.996) { current = clamp(Math.round(p * (pages - 1)), 0, pages - 1); return; } const pos = p * (pages - 1); const delta = pos - current; const target = Math.abs(delta) <= DEADZONE ? current : clamp(current + Math.sign(delta) * Math.max(1, Math.round(Math.abs(delta))), 0, pages - 1); current = target; const per = totalPx / (pages - 1); const delPx = (target * per) - (-top); if (Math.abs(delPx) < 2) return; snapping = true; window.scrollBy({ top: delPx, behavior: 'smooth' }); setTimeout(() => { snapping = false; }, 560); }; const onScroll = () => { if (snapping) return; clearTimeout(timer); timer = setTimeout(snap, 110); }; window.addEventListener('scroll', onScroll, { passive: true }); return () => { clearTimeout(timer); window.removeEventListener('scroll', onScroll); }; } /* ============================ HERO ============================ */ function Hero({ t, motionOn, bg, theme }) { const secRef = uRef(null); const markRef = uRef(null); const spotRef = uRef(null); const bloomRef = uRef(null); const eyebrowRef = uRef(null); const bigRef = uRef(null); const shortRef = uRef(null); const ledeRef = uRef(null); const btnRef = uRef(null); const scrollHintRef = uRef(null); const mouse = uRef({ px: 0, py: 0 }); const [mounted, setMounted] = uS(false); const choreo = !window.REDUCED; uE(() => {const id = setTimeout(() => setMounted(true), 80);return () => clearTimeout(id);}, []); // cursor spotlight + mark drift (pointer) uE(() => { if (!motionOn) return; const sec = secRef.current;if (!sec) return; const onMove = (e) => { const r = sec.getBoundingClientRect(); const x = e.clientX - r.left,y = e.clientY - r.top; mouse.current = { px: x / r.width - 0.5, py: y / r.height - 0.5 }; if (spotRef.current) {spotRef.current.style.background = `radial-gradient(560px circle at ${x}px ${y}px, rgba(212,175,55,0.16), transparent 60%)`;} }; sec.addEventListener('mousemove', onMove); return () => sec.removeEventListener('mousemove', onMove); }, [motionOn]); // scroll-driven hero choreography: the hero is a tall scroll track with a // pinned stage. As you scroll: the eyebrow fades + shrinks first, the big // 3-line title grows into that space, then shrinks and cross-fades into a // single-line title while the lede + buttons rise in beneath it. // Driven by BOTH a rAF loop and scroll/input listeners so it stays locked to // the scroll position no matter how the host dispatches scrolling. uE(() => { if (!choreo) return; let raf = 0, lastP = -1, lastMx = 9, lastMy = 9, alive = true; const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); const lerp = (a, b, t) => a + (b - a) * t; const seg = (p, a, b) => clamp((p - a) / (b - a), 0, 1); const apply = () => { const sec = secRef.current; if (!sec) return; const total = Math.max(1, sec.offsetHeight - window.innerHeight); const p = clamp(-sec.getBoundingClientRect().top / total, 0, 1); const { px, py } = mouse.current; if (p === lastP && px === lastMx && py === lastMy) return; lastP = p; lastMx = px; lastMy = py; const e = seg(p, 0, 0.16); if (eyebrowRef.current) { eyebrowRef.current.style.opacity = String(1 - e); eyebrowRef.current.style.transform = `translateY(${-e * 26}px) scale(${lerp(1, 0.7, e)})`; } const g = seg(p, 0, 0.30), s = seg(p, 0.30, 0.52); if (bigRef.current) { bigRef.current.style.opacity = String(1 - s); bigRef.current.style.transform = `translateY(${-g * 20}px) scale(${lerp(1, 1.08, g) * lerp(1, 0.42, s)})`; bigRef.current.style.filter = `blur(${lerp(0, 6, s)}px)`; } const sh = seg(p, 0.44, 0.66); if (shortRef.current) { shortRef.current.style.opacity = String(sh); shortRef.current.style.transform = `scale(${lerp(0.62, 1, sh)})`; shortRef.current.style.filter = `blur(${lerp(6, 0, sh)}px)`; shortRef.current.style.pointerEvents = sh > 0.5 ? 'auto' : 'none'; } const l = seg(p, 0.62, 0.82); if (ledeRef.current) { ledeRef.current.style.opacity = String(l); ledeRef.current.style.transform = `translateY(${lerp(22, 0, l)}px)`; ledeRef.current.style.pointerEvents = l > 0.5 ? 'auto' : 'none'; } const b = seg(p, 0.74, 0.94); if (btnRef.current) { btnRef.current.style.opacity = String(b); btnRef.current.style.transform = `translateY(${lerp(16, 0, b)}px)`; btnRef.current.style.pointerEvents = b > 0.5 ? 'auto' : 'none'; } if (markRef.current) { markRef.current.style.transform = `translateY(calc(-50% + ${p * 120 + (motionOn ? py * -26 : 0)}px)) translateX(${motionOn ? px * -26 : 0}px) rotate(${motionOn ? px * 4 : 0}deg) scale(${1 + p * 0.08})`; } if (bloomRef.current) bloomRef.current.style.transform = `translateY(${p * 60}px)`; if (scrollHintRef.current) scrollHintRef.current.style.opacity = String(1 - seg(p, 0, 0.1)); }; const loop = () => { apply(); if (alive) raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); const onEvt = () => apply(); const opts = { passive: true }; window.addEventListener('scroll', onEvt, opts); window.addEventListener('wheel', onEvt, opts); window.addEventListener('touchmove', onEvt, opts); window.addEventListener('resize', onEvt, opts); document.addEventListener('scroll', onEvt, opts); apply(); return () => { alive = false; cancelAnimationFrame(raf); window.removeEventListener('scroll', onEvt); window.removeEventListener('wheel', onEvt); window.removeEventListener('touchmove', onEvt); window.removeEventListener('resize', onEvt); document.removeEventListener('scroll', onEvt); }; }, [motionOn, choreo]); const line = (txt, i, accent) =>
{txt}
; const markStyle = theme === 'light' ? { width: '100%', opacity: 0.08, filter: 'brightness(0)' } : { width: '100%', opacity: 0.05 }; return (
{/* mark watermark */} {bg !== 'minimal' &&
} {/* static gold bloom + cursor spotlight */}
{bg === 'spotlight' && motionOn &&
}
{t.hero.eyebrow}
{/* title zone — big 3-line + single-line stacked in one cell */}

{line(t.hero.line1, 0)} {line(t.hero.line2, 1)} {line(t.hero.line3, 2, true)}

{t.hero.titleShort}

{t.hero.lede}

{/* scroll hint */}
{t.hero.scroll}
{/* running ticker */}
{[0, 1].map((rep) => {t.hero.ticker.map((w, i) => {w} )} )}
); } /* ============================ ABOUT ============================ */ function About({ t }) { return (
{t.about.kicker}
{t.about.title} {t.about.lede}
{t.about.body}
{t.about.points.map(([h, d], i) => {String(i + 1).padStart(2, '0')}
{h}
{d}
 )}
); } function StatItem({ n, l, i }) { const [ref, shown] = useReveal({ threshold: 0.4 }); const val = useCountUp(n, shown); return (
{val}
{l}
); } function StatsBand({ t }) { return (
{t.about.stats.map(([n, l], i) => )}
); } /* ============================ SERVICES ============================ */ function Services({ t }) { const reduced = window.REDUCED; const [mobile, setMobile] = uS(() => typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches); uE(() => { const mq = window.matchMedia('(max-width: 767px)'); const on = () => setMobile(mq.matches); mq.addEventListener('change', on); on(); return () => mq.removeEventListener('change', on); }, []); // Mobile: pinned header + cards rotating two at a time (like Projects). if (mobile && !reduced) return ; // Desktop / reduced-motion: the full grid. return (
{t.services.items.map(([icon, title, desc], i) => )}
); } // Mobile-only: pinned section, header fixed in view, service cards rotate 2 at a // time on scroll (same scroll-scrub technique as the hero / projects). function ServicesPinned({ t }) { const items = t.services.items; const groups = []; for (let i = 0; i < items.length; i += 2) groups.push(items.slice(i, i + 2)); const P = groups.length; const secRef = uRef(null); const pageRefs = uRef([]); const counterRef = uRef(null); uE(() => { let raf = 0, alive = true, lastP = -1; const clamp = (v, a, b) => Math.min(b, Math.max(a, v)); const apply = () => { const sec = secRef.current; if (!sec) return; const total = Math.max(1, sec.offsetHeight - window.innerHeight); const p = clamp(-sec.getBoundingClientRect().top / total, 0, 1); if (p === lastP) return; lastP = p; const pos = p * (P - 1); pageRefs.current.forEach((el, i) => { if (!el) return; const off = i - pos; const a = clamp(1 - Math.abs(off) * 1.8, 0, 1); el.style.opacity = String(a); el.style.transform = `translateY(${off * 7}vh) scale(${0.96 + 0.04 * a})`; el.style.filter = `blur(${Math.min(6, Math.abs(off) * 8)}px)`; el.style.pointerEvents = Math.abs(off) < 0.5 ? 'auto' : 'none'; el.style.zIndex = Math.abs(off) < 0.5 ? 3 : 1; }); const idx = clamp(Math.round(pos), 0, P - 1); if (counterRef.current) counterRef.current.textContent = String(idx + 1).padStart(2, '0'); }; const loop = () => { apply(); if (alive) raf = requestAnimationFrame(loop); }; const onEvt = () => apply(); raf = requestAnimationFrame(loop); ['scroll', 'wheel', 'touchmove', 'resize'].forEach((e) => window.addEventListener(e, onEvt, { passive: true })); const detachSnap = attachStepSnap(secRef, P); apply(); return () => { alive = false; cancelAnimationFrame(raf); detachSnap(); ['scroll', 'wheel', 'touchmove', 'resize'].forEach((e) => window.removeEventListener(e, onEvt)); }; }, [P]); return (
{/* header stays in view */}
{t.services.kicker}
01 / {String(P).padStart(2, '0')}

{t.services.title}

{t.services.lede}

{/* rotating pages of 2 cards */}
{groups.map((g, i) =>
pageRefs.current[i] = el} style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'clamp(12px,2vh,18px)', opacity: i === 0 ? 1 : 0, willChange: 'opacity, transform, filter' }}> {g.map(([icon, title, desc], j) =>
)}
)}
); } function ServiceCard({ icon, title, desc }) { const [h, setH] = uS(false); return (
setH(true)} onMouseLeave={() => setH(false)} style={{ padding: 'clamp(24px,3vw,34px)', borderRadius: 'var(--r-md)', background: 'var(--bg-raised)', border: h ? '1px solid var(--accent)' : '1px solid var(--hairline)', cursor: 'default', transition: 'all var(--dur-base) var(--ease-out)', transform: h ? 'translateY(-4px)' : 'none', boxShadow: h ? 'var(--shadow-md)' : 'none', position: 'relative', overflow: 'hidden', width: '100%', height: '100%' }}>

{title}

{desc}

); } /* ============================ PROJECTS ============================ */ // A project is "playable" if we can open something: a specific YouTube video, // a self-hosted file, or (fallback) an external channel link in a new tab. function projectPlayable(s) { return !!(s.youtube || s.video || s.link); } // Lightbox: YouTube embed or self-hosted