{stars.current.map((s, i) => (
))}
;
if (!halo) return img;
return {img};
}
/* ---- Cosmos backdrop: faint nebula + starfield ---- */
function Cosmos() {
const stars = useRef(null);
if (!stars.current) {
const arr = [];
for (let i = 0; i < 80; i++) {
const big = Math.random() > 0.86;
arr.push({
left: Math.random() * 100,
top: Math.random() * 100,
s: big ? 2.2 + Math.random() * 1.4 : 0.7 + Math.random() * 1.1,
dur: 4 + Math.random() * 7,
del: -Math.random() * 8,
o: big ? 0.9 : 0.5,
});
}
stars.current = arr;
}
return (
);
}
/* ---- Controls: language + theme ---- */
function LangToggle({ lang, onToggle, t }) {
return (
);
}
function ThemeToggle({ theme, onToggle }) {
return (
);
}
/* ---- Reveal on scroll (scroll-driven, robust; content never stuck hidden) ---- */
function useReveal() {
const ref = useRef(null);
useEffect(() => {
let raf = 0;
const reveal = () => {
raf = 0;
const vh = window.innerHeight || 800;
document.querySelectorAll(".rise:not(.in)").forEach((e) => {
if (e.getBoundingClientRect().top < vh * 0.92) e.classList.add("in");
});
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(reveal); };
reveal();
requestAnimationFrame(reveal);
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
const t = setTimeout(reveal, 350);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
clearTimeout(t); cancelAnimationFrame(raf);
};
}, []);
return ref;
}
/* ---- Section header ---- */
function SectionHead({ idx, title, cjk, en }) {
return (