// Hero — ONE cinematic version with scroll-driven split // Marco slides left, Valeria slides right as user scrolls // Real background photo, dramatic overlay, bold red accent function Hero(){ const { t } = useLang(); const y = useScrollY(); const mouse = useMouseParallax(0.012); const [mounted, setMounted] = React.useState(false); React.useEffect(() => { const t = setTimeout(() => setMounted(true), 50); return () => clearTimeout(t); }, []); // Scroll progress 0 → 1 over first 100vh const vh = typeof window !== 'undefined' ? window.innerHeight : 800; const p = Math.min(1, Math.max(0, y / (vh * 0.9))); // Split: Marco slides left, Valeria slides right const splitMarco = -p * 60; // vw const splitValeria = p * 60; const ampSpread = p * 30; const fadeText = Math.max(0, 1 - p*1.2); const zoomBg = 1 + p * 0.06; return (

{/* Background photo — zooms & darkens on scroll */}

{/* red wash overlay that intensifies with scroll */}

{/* film grain — heavy */}

")`, }}/> {/* second grain layer for texture depth */}

")`, }}/> {/* MAIN COMPOSITION */}

{/* Marco — slides left on scroll */}

{CONFIG.couple.name1}

{/* ampersand — stays centered, pulses with scroll */}

&

{/* Valeria — slides right */}

{CONFIG.couple.name2}

{/* Under-hero subtitle — reveals as names separate */}

{t('hero.subtitle')}

{/* Corners */}

{t('hero.date_line')}

{t('hero.coordinates')}

{/* Scroll cue */}

SCORRI

); } window.Hero = Hero;