);
}
// ================================================================
// LOGO-FAITHFUL BOAT — hull traced from the brand mark:
// navy rowing boat with cream plank stripes, upswept notched prow,
// two chunky stylised waves, fat coral heart floating above.
//
// One scene, three motion modes:
// scroll="none" — ambient rocking only (like the current boat)
// scroll="voyage" — as the page scrolls, the boat sails forward,
// the water slides beneath, the heart drifts up
// scroll="drift" — as the page scrolls, the boat settles into the
// rising water while the heart floats upward
// ================================================================
// Scroll progress (0→1 while the scene scrolls out of view), written to
// a CSS custom property --p so transforms update without re-rendering.
// Written synchronously in the scroll handler (no rAF dependency — rAF can
// be throttled); smoothing comes from a CSS transition on the transformed
// groups instead. Measured via getBoundingClientRect so it stays correct
// under the site's global zoom. Respects reduced motion.
function useScrollProgress(ref, enabled) {
React.useEffect(() => {
if (!enabled) return;
const el = ref.current;
if (!el) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const measure = () => {
// Progress runs from the very first scroll (p=0 at page top) to ~1 by
// the time the scene has scrolled mostly out of view, so the boat
// responds the moment the visitor starts scrolling.
const r = el.getBoundingClientRect();
const docTop = r.top + window.scrollY;
const total = Math.max(1, docTop + r.height * 0.7);
const p = Math.min(1, Math.max(0, window.scrollY / total));
el.style.setProperty("--p", p.toFixed(4));
};
el.style.setProperty("--p", "0");
measure();
window.addEventListener("scroll", measure, { passive: true });
window.addEventListener("resize", measure);
return () => {
window.removeEventListener("scroll", measure);
window.removeEventListener("resize", measure);
};
}, [enabled]);
}
// Chunky logo-style wave line: n rounded humps of width w on baseline y.
function humpPath(y, w, n, x0 = -280) {
let d = `M ${x0} ${y}`;
for (let i = 0; i < n; i++) d += ` q ${w / 2} ${-w * 0.26} ${w} 0`;
return d;
}
function LogoBoatScene({ size = 520, scroll = "none", idSuffix = "L" }) {
const ref = React.useRef(null);
useScrollProgress(ref, scroll !== "none");
// Scroll-linked transforms (no-ops when --p stays 0 / scroll="none")
const boatT =
scroll === "voyage" ? "translate(calc(var(--p,0)*169px), calc(var(--p,0)*-10px)) rotate(calc(var(--p,0)*5.2deg))"
: scroll === "drift" ? "translateY(calc(var(--p,0)*36px)) rotate(calc(var(--p,0)*-3deg))"
: undefined;
const heartT =
scroll === "voyage" ? "translate(calc(var(--p,0)*110px), calc(var(--p,0)*-98px))"
: scroll === "drift" ? "translateY(calc(var(--p,0)*-95px)) scale(calc(1 + var(--p,0)*0.12))"
: undefined;
const waveT =
scroll === "voyage" ? "translateX(calc(var(--p,0)*-91px))"
: scroll === "drift" ? "translateY(calc(var(--p,0)*-24px))"
: undefined;
const heartOp = scroll === "voyage" ? "calc(1 - var(--p,0)*0.3)" : undefined;
// Deeper, chunkier hull traced from the logo: upswept notched prow (right),
// tapered stern tip (left), fat solid belly below the plank stripes.
const hull = `M 150 310
C 196 334, 248 344, 302 344
C 356 343, 404 326, 438 296
L 462 270
L 452 306
C 448 344, 428 384, 386 408
C 352 424, 326 430, 300 430
C 244 429, 200 408, 178 372
C 166 352, 156 330, 150 310 Z`;
const clipId = `caLogoHull${idSuffix}`;
const waterId = `caLogoWater${idSuffix}`;
const gStyle = (t, extra = {}) =>
t ? {
transform: t, transformBox: "fill-box", transformOrigin: "50% 50%",
// scroll updates land per scroll-event; this transition smooths between
// them (replaces the old rAF lerp, which stalled when rAF was throttled)
transition: "transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease",
...extra,
} : extra;
return (
{/* overflow hidden: the wave paths extend far past the viewBox so their
ambient drift never shows a gap — they must clip at the edges */}