// Hero with three variants: // blueprint — full-bleed cycling day/night animated scene + the looping video sits in the mid-distance // sketch — split layout: text left, looping video right // hybrid — full-bleed video + a framed text card const PHASES = ["day", "dusk", "night"]; const PHASE_DURATION_MS = 12000; // 12s each → 36s total loop function useDayNightCycle(active, reduceMotion) { const [phase, setPhase] = useState(0); // 0..3 (continuous) const raf = useRef(0); const start = useRef(0); useEffect(() => { if (!active || reduceMotion) { setPhase(0); return; } const tick = (t) => { if (!start.current) start.current = t; const elapsed = (t - start.current) % (PHASE_DURATION_MS * 3); setPhase(elapsed / PHASE_DURATION_MS); // 0..3 raf.current = requestAnimationFrame(tick); }; raf.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf.current); }, [active, reduceMotion]); // p[0..1] for each phase, summing roughly to 1 const idx = Math.floor(phase) % 3; const f = phase - Math.floor(phase); const weights = [0, 0, 0]; weights[idx] = 1 - f; weights[(idx + 1) % 3] = f; return { phase, idx, f, weights, label: PHASES[idx] }; } function HeroBackdrop({ cycle }) { // Sky: linear-gradient that morphs by mixing three color stacks via opacity layers. const skyDay = "linear-gradient(180deg, #7fb8d6 0%, #b9d4e1 55%, #d8e0d8 100%)"; const skyDusk = "linear-gradient(180deg, #2b1f3a 0%, #6e3650 45%, #d96c4f 80%, #f6b27a 100%)"; const skyNight = "linear-gradient(180deg, #03060f 0%, #0a1126 50%, #1a2240 100%)"; return (