);
}
/* ──────────────────────────────────────────────────────────
Intro animation — on first visit (per session) the logo appears
large & centered on a navy field, holds, then flies up + scales
down into its exact spot in the nav while the field fades to
reveal the site. Skipped for repeat visits & reduced-motion.
────────────────────────────────────────────────────────── */
function IntroAnimation() {
const SEEN_KEY = 'matai_intro_seen';
const reduced = typeof window !== 'undefined' && window.matchMedia
&& window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let alreadySeen = false;
try { alreadySeen = sessionStorage.getItem(SEEN_KEY) === '1'; } catch (e) {}
const [active, setActive] = useState(!alreadySeen && !reduced);
const [step, setStep] = useState(0); // 0 enter→1 shown→2 fly→3 land→4 done
const [fly, setFly] = useState('scale(1)');
const bigRef = useRef(null);
useLayoutEffect(() => {
if (!active) return;
try { sessionStorage.setItem(SEEN_KEY, '1'); } catch (e) {}
const prevOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
window.scrollTo(0, 0);
const t = [];
t.push(setTimeout(() => setStep(1), 40)); // entrance
t.push(setTimeout(() => { // fly to nav (after a longer hold)
const nav = document.getElementById('nav-logo');
const big = bigRef.current;
if (nav && big) {
const nr = nav.getBoundingClientRect();
const br = big.getBoundingClientRect();
const s = nr.height / br.height;
const dx = (nr.left + nr.width / 2) - (br.left + br.width / 2);
const dy = (nr.top + nr.height / 2) - (br.top + br.height / 2);
setFly(`translate(${dx}px, ${dy}px) scale(${s})`);
} else {
setFly('scale(0.28)');
}
setStep(2);
}, 1650));
t.push(setTimeout(() => setStep(3), 2700)); // fade logo, reveal nav logo
t.push(setTimeout(() => setStep(4), 3050)); // done
t.push(setTimeout(() => { // unmount + restore scroll
document.body.style.overflow = prevOverflow;
setActive(false);
}, 3090));
return () => { t.forEach(clearTimeout); document.body.style.overflow = prevOverflow; };
}, [active]);
if (!active) return null;
const wrapTransform = step === 0 ? 'scale(0.92)' : step < 2 ? 'scale(1)' : fly;
const wrapOpacity = step === 0 ? 0 : step >= 3 ? 0 : 1;
// Logo renders at ~5.93× the size value in width (aspect 3.49 × 1.7 height
// factor). Cap size so the wordmark stays within ~84% of the viewport width.
const vw = typeof window !== 'undefined' ? window.innerWidth : 1200;
const introSize = Math.min(72, Math.floor((0.84 * vw) / 5.93));
return (
