/* ============================================================
Reynard Marketing — shared primitives
Glass panels, buttons, wordmark, eyebrow, icons, reveal-on-scroll.
Forked from the design-system UI kit. Exports to window.
============================================================ */
const rk = {
// amber CTA — dark ink text, the one warm accent
amberBtn: {
fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "1rem",
color: "var(--text-on-amber)", background: "var(--amber-500)",
border: "1px solid var(--amber-400)", borderRadius: "var(--r-sm)",
padding: "14px 26px", cursor: "pointer", letterSpacing: "-0.01em",
boxShadow: "var(--sh-amber), inset 0 1px 0 rgba(255,255,255,0.35)",
transition: "transform var(--dur) var(--ease-out), background var(--dur), box-shadow var(--dur)",
display: "inline-flex", alignItems: "center", gap: "10px", whiteSpace: "nowrap",
},
ghostBtn: {
fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "1rem",
color: "var(--text-on-dark)", background: "rgba(255,255,255,0.06)",
border: "1px solid var(--glass-dark-border)", borderRadius: "var(--r-sm)",
padding: "13px 22px", cursor: "pointer",
backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)",
transition: "background var(--dur) var(--ease-out), transform var(--dur)",
display: "inline-flex", alignItems: "center", gap: "8px", whiteSpace: "nowrap",
},
};
// ---- Wordmark (img, recolored variants) ----
function Wordmark({ variant = "light", height = 30, style }) {
const src = `assets/reynard-wordmark-${variant}.svg`;
return 
;
}
// ---- Amber CTA button with hover/press ----
function AmberButton({ children, onClick, style }) {
const [h, setH] = React.useState(false);
const [p, setP] = React.useState(false);
return (
);
}
function GhostButton({ children, onClick, style }) {
const [h, setH] = React.useState(false);
return (
);
}
// ---- Glass panel ----
const Glass = React.forwardRef(function Glass({ children, light = false, style, strong = false, className = "", onMouseEnter, onMouseLeave, id }, ref) {
const base = {
background: light ? "var(--glass-light-bg)" : (strong ? "var(--glass-dark-bg-strong)" : "var(--glass-dark-bg)"),
backdropFilter: "blur(var(--glass-blur)) saturate(115%)",
WebkitBackdropFilter: "blur(var(--glass-blur)) saturate(115%)",
border: `1px solid ${light ? "var(--glass-light-border)" : "var(--glass-dark-border)"}`,
borderRadius: "var(--r-lg)",
boxShadow: `var(--sh-glass-md), ${light ? "var(--inset-light-hi)" : "var(--inset-glass-hi)"}`,
color: light ? "var(--text-on-light)" : "var(--text-on-dark)",
};
return {children}
;
});
// ---- Eyebrow (mono, tracked) ----
function Eyebrow({ children, color = "var(--amber-400)", style }) {
return {children}
;
}
// ---- Reveal on scroll (restrained fade + lift) ----
function Reveal({ children, delay = 0, style, enabled = true }) {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
if (!enabled) { setShown(true); return; }
const el = ref.current;
if (!el) { setShown(true); return; }
// If already in view on mount, show right away (IO's initial callback can
// be unreliable for in-viewport elements after a reload).
const root = document.querySelector("#site-scroll");
const inView = () => {
const r = el.getBoundingClientRect();
const h = (root ? root.clientHeight : window.innerHeight) || window.innerHeight;
return r.top < h * 0.92 && r.bottom > 0;
};
if (inView()) { setShown(true); return; }
let io;
try {
io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
}, { threshold: 0.12, root, rootMargin: "0px 0px -8% 0px" });
io.observe(el);
} catch (err) { setShown(true); }
// Safety net: never let content stay hidden if the observer misfires.
const t = setTimeout(() => setShown(true), 1400);
return () => { io && io.disconnect(); clearTimeout(t); };
}, [enabled]);
return (
{children}
);
}
// ---- Minimal stroke icons (Lucide-style, 1.7 stroke) ----
const Icon = {
phone: (p) => ,
target: (p) => ,
search: (p) => ,
layout: (p) => ,
funnel: (p) => ,
trending: (p) => ,
arrow: (p) => ,
check: (p) => ,
menu: (p) => ,
x: (p) => ,
waveform: (p) => ,
route: (p) => ,
receipt: (p) => ,
shield: (p) => ,
eyeOff: (p) => ,
loop: (p) => ,
form: (p) => ,
globe: (p) => ,
chat: (p) => ,
};
Object.assign(window, { rk, Wordmark, AmberButton, GhostButton, Glass, Eyebrow, Reveal, Icon });