Booking placeholder — you'll receive a confirmation by email within one working day. Real booking system arrives next.
);
}
/* ----------------------------------------------------------------- */
/* ANGLE THUMB — small variant of a scene with a subtle hover zoom */
/* ----------------------------------------------------------------- */
function AngleTile({ scene, blue, label, idx }) {
return (
{String(idx+1).padStart(2,'0')} · {label}
);
}
/* ----------------------------------------------------------------- */
/* STUDIO DETAIL — Full layout */
/* ----------------------------------------------------------------- */
function StudioDetail({ studio, blue, onClose, originRect }) {
const [phase, setPhase] = useStateDS('zoom'); // 'zoom' (start at originRect) → 'open' (full)
const [breathe, setBreathe] = useStateDS(0);
const data = DETAIL_DATA[studio.scene] || {};
// Phase orchestration: start at origin rect → expand → resolve content
useLayoutEffectDS(() => {
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = ''; };
}, []);
useEffectDS(() => {
const t = setTimeout(() => setPhase('open'), 30);
const onKey = (e) => { if (e.key === 'Escape') handleClose(); };
window.addEventListener('keydown', onKey);
return () => { clearTimeout(t); window.removeEventListener('keydown', onKey); };
}, []);
// Subtle breathing on hero — sin wave
useEffectDS(() => {
let raf, t0 = performance.now();
const tick = (t) => {
const elapsed = (t - t0) / 1000;
setBreathe(Math.sin(elapsed * 0.6));
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
const handleClose = () => {
setPhase('zoom');
setTimeout(onClose, 760);
};
// Compute the hero card transform.
// We render the hero in a fixed container that occupies its natural slot,
// but during 'zoom' phase we transform from origin rect to the natural slot.
const heroOuterRef = useRefDS(null);
const [transformStr, setTransformStr] = useStateDS('');
useLayoutEffectDS(() => {
const compute = () => {
const el = heroOuterRef.current;
if (!el || !originRect) return;
const r = el.getBoundingClientRect();
// Translate FROM target TO origin
const tx = originRect.left - r.left;
const ty = originRect.top - r.top;
const sx = originRect.width / r.width;
const sy = originRect.height / r.height;
setTransformStr(`translate(${tx}px, ${ty}px) scale(${sx}, ${sy})`);
};
compute();
window.addEventListener('resize', compute);
return () => window.removeEventListener('resize', compute);
}, [originRect]);
return (
{/* Backdrop */}
{/* The page */}
{/* Top action bar */}
Studio · {studio.n}
{/* Title block */}
{data.overline}
{studio.title}.
{/* HERO IMAGE — flies from originRect to its natural slot */}
{/* Floating availability badge */}
{studio.status}
{/* INFO LAYOUT — left description / right booking */}