/* Hero — video background, logo top-left, editorial headline + glass buttons bottom-left. Parallax: video drifts up, logo drifts down, content fades out — all driven by scroll. */ function Hero({ tweaks }) { const tintSpeed = tweaks.tintSpeed || 30; const bgRef = React.useRef(null); const brandRef = React.useRef(null); // logo const contentRef = React.useRef(null); // headline + copy + buttons const hazeRef = React.useRef(null); const exitRef = React.useRef(null); React.useEffect(() => { const hero = document.getElementById('home'); if (!hero) return; let raf = 0; let lastP = -1; const update = () => { const rect = hero.getBoundingClientRect(); const vh = window.innerHeight; const scrollable = Math.max(1, rect.height - vh); const p = Math.max(0, Math.min(1, -rect.top / scrollable)); if (Math.abs(p - lastP) < 0.002) return; lastP = p; // Video: drifts up + gentle zoom if (bgRef.current) { const y = -p * vh * 0.24; const s = 1 + p * 0.06; bgRef.current.style.transform = `translate3d(0,${y.toFixed(2)}px,0) scale(${s.toFixed(4)})`; } // Logo: drifts down, fades from p≈0.28 to p≈0.78 if (brandRef.current) { const drift = p * vh * 0.13; const fp = Math.max(0, Math.min(1, (p - 0.28) / 0.50)); const op = Math.max(0, 1 - Math.pow(fp, 1.3)); brandRef.current.style.transform = `translate3d(0,${drift.toFixed(2)}px,0)`; brandRef.current.style.opacity = op.toFixed(3); } // Content: fades slightly earlier than logo if (contentRef.current) { const fp = Math.max(0, Math.min(1, (p - 0.22) / 0.46)); const op = Math.max(0, 1 - Math.pow(fp, 1.2)); const drift = p * vh * 0.09; contentRef.current.style.opacity = op.toFixed(3); contentRef.current.style.transform = `translate3d(0,${drift.toFixed(2)}px,0)`; } // Warm haze swells as buildings approach if (hazeRef.current) { hazeRef.current.style.opacity = Math.min(1, p * 1.2).toFixed(3); } // Exit fade into next section if (exitRef.current) { const op = Math.min(1, Math.max(0, (p - 0.62) / 0.34)); exitRef.current.style.opacity = op.toFixed(3); } }; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { update(); raf = 0; }); }; update(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', update); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', update); if (raf) cancelAnimationFrame(raf); }; }, []); return (

{/* Pinned viewport */}

{/* Video background */}

{/* Time-of-day tint */}

{/* Logo — top-left, FLIP target for loader animation */}

{/* Hero content — bottom-left editorial composition */}

{/* Headline */}

{tweaks.headline1 || 'Engineering Confidence.'} {tweaks.headline2 || 'Delivering Certainty.'}

{/* Supporting copy */}

Engineering solutions shaped around your project vision, approval pathway and commercial priorities.

{/* Authority mantra — copper badge row */}

Fire Engineering: Engineering Accuracy · Practical · Holistic Approach

{/* Frosted glass CTA button */}

GET IN TOUCH

{/* Warm atmospheric haze — grows over brand to sell depth */}

{/* Exit fade — bottom bleeds into next section tray colour */}

); } Object.assign(window, { Hero });