@krizaka/ui 2.0.0-beta.4 → 2.0.0-beta.6

package/dist/index.js

@@ -5,6 +5,25 @@ function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 
+// src/marks/krizaka-geometry.ts
+var KRIZAKA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "86 82 228 228",
+  offset: 20,
+  /** The shield: a pointy-top hexagon (r 92 around 180,180), open at its upper-right edge. */
+  shield: "M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5",
+  stroke: 22,
+  ink: { x1: 70, y1: 290, x2: 290, y2: 70 },
+  blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: [["0%", "#196df5"], ["100%", "#629cf8"]] },
+  /** The vertex where the shield opens: a node (the serpent's head in Orochia's grammar). */
+  node: { cx: 259.7, cy: 134, r: 19, inner: 6 },
+  core: { cx: 180, cy: 180, r: 24, inner: 8 },
+  highlight: "#dbeafe",
+  glow: { color: "#196df5", opacity: 0.16 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
 // src/marks/shared.ts
 import { useId } from "react";
 var neutral = (token, percent) => `var(${token}, color-mix(in srgb, currentColor ${percent}%, transparent))`;
@@ -17,97 +36,103 @@ var a11y = (title) => title ? { role: "img", "aria-label": title } : { "aria-hid
 // src/marks/KrizakaLogo.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var CSS = `
-.kzm-spin { transform-origin: 180px 180px; animation: kzm-spin 30s linear infinite; }
-.kzm-pulse { animation: kzm-pulse 4s ease-in-out infinite; }
+.kzm-spin { transform-origin: 200px 200px; animation: kzm-spin 30s linear infinite; }
+.kzm-pulse { transform-box: fill-box; transform-origin: center; animation: kzm-pulse 3.2s ease-in-out infinite; }
 @keyframes kzm-spin { to { transform: rotate(360deg); } }
 @keyframes kzm-pulse {
-  0%, 100% { filter: drop-shadow(0 0 8px hsla(217, 92%, 60%, .2)) drop-shadow(0 0 24px hsla(217, 92%, 60%, .06)); }
-  50% { filter: drop-shadow(0 0 12px hsla(217, 92%, 60%, .35)) drop-shadow(0 0 36px hsla(217, 92%, 60%, .12)); }
+  0%, 100% { filter: drop-shadow(0 0 6px hsla(217, 92%, 53%, .25)); opacity: .9; }
+  50% { filter: drop-shadow(0 0 14px hsla(217, 92%, 53%, .55)); opacity: 1; }
 }
 @media (prefers-reduced-motion: reduce) { .kzm-spin, .kzm-pulse { animation: none; } }
 `;
 function KrizakaLogo({ size = 32, animated = true, title, className }) {
-  const id = useIds("kzm", ["blue", "steel", "core", "ambient"]);
-  const accent = "var(--kz-accent, hsl(217, 92%, 60%))";
+  const id = useIds("kzm", ["ink", "blue", "glow"]);
   const m = (cls) => animated ? cls : void 0;
-  const pulse = (x, y) => ({ className: m("kzm-pulse"), style: { transformOrigin: `${x}px ${y}px` } });
-  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 400 400", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
     /* @__PURE__ */ jsx("style", { children: CSS }),
     /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsxs("linearGradient", { id: id.blue, x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: accent }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#60A5FA" })
-      ] }),
-      /* @__PURE__ */ jsxs("linearGradient", { id: id.steel, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: neutral("--kz-text-secondary", 64) }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: neutral("--kz-text-muted", 38) })
-      ] }),
-      /* @__PURE__ */ jsxs("radialGradient", { id: id.core, cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#60A5FA", stopOpacity: "1" }),
-        /* @__PURE__ */ jsx("stop", { offset: "35%", stopColor: accent, stopOpacity: "0.7" }),
-        /* @__PURE__ */ jsx("stop", { offset: "65%", stopColor: accent, stopOpacity: "0.02" }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" })
+      /* @__PURE__ */ jsxs("linearGradient", { id: id.ink, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.ink.x1, y1: KRIZAKA.ink.y1, x2: KRIZAKA.ink.x2, y2: KRIZAKA.ink.y2, children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: neutral("--kz-text-secondary", 60) }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: neutral("--kz-text-primary", 92) })
       ] }),
-      /* @__PURE__ */ jsxs("radialGradient", { id: id.ambient, cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.08" }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" })
+      /* @__PURE__ */ jsx("linearGradient", { id: id.blue, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.blue.x1, y1: KRIZAKA.blue.y1, x2: KRIZAKA.blue.x2, y2: KRIZAKA.blue.y2, children: KRIZAKA.blue.stops.map(([offset, color]) => /* @__PURE__ */ jsx("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsxs("radialGradient", { id: id.glow, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: KRIZAKA.glow.color, stopOpacity: KRIZAKA.glow.opacity }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: KRIZAKA.glow.color, stopOpacity: "0" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("g", { transform: "translate(20, 20)", children: [
-      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "180", r: "170", fill: `url(#${id.ambient})` }),
-      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "180", r: "160", stroke: neutral("--kz-border-strong", 16), strokeWidth: "1.5", strokeDasharray: "8 8", opacity: "0.6", className: m("kzm-spin") }),
-      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "180", r: "130", stroke: neutral("--kz-border-default", 10), strokeWidth: "1", opacity: "0.35" }),
-      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "180", r: "100", stroke: neutral("--kz-border-subtle", 6), strokeWidth: "1", strokeDasharray: "3 6", opacity: "0.3" }),
-      /* @__PURE__ */ jsx("line", { x1: "180", y1: "20", x2: "180", y2: "80", stroke: neutral("--kz-border-strong", 16), strokeWidth: "0.5", opacity: "0.2" }),
-      /* @__PURE__ */ jsx("line", { x1: "320", y1: "100", x2: "260", y2: "140", stroke: neutral("--kz-border-strong", 16), strokeWidth: "0.5", opacity: "0.2" }),
-      /* @__PURE__ */ jsx("line", { x1: "40", y1: "100", x2: "100", y2: "140", stroke: neutral("--kz-border-strong", 16), strokeWidth: "0.5", opacity: "0.2" }),
-      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "180", r: "55", fill: `url(#${id.core})`, ...pulse(180, 180) }),
-      /* @__PURE__ */ jsx("path", { d: "M180,80 L255,120 L255,200 L180,240 L105,200 L105,120 Z", stroke: `url(#${id.blue})`, strokeWidth: "3", strokeLinejoin: "round", opacity: "0.9" }),
-      /* @__PURE__ */ jsx("path", { d: "M180,105 L235,133 L235,187 L180,215 L125,187 L125,133 Z", stroke: `url(#${id.steel})`, strokeWidth: "2", strokeLinejoin: "round", opacity: "0.5" }),
-      /* @__PURE__ */ jsx("path", { d: "M255,120 L290,85 L310,100", stroke: `url(#${id.blue})`, strokeWidth: "5", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ jsx("path", { d: "M105,120 L70,85 L50,100", stroke: `url(#${id.steel})`, strokeWidth: "5", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ jsx("path", { d: "M180,240 L180,280 L200,295", stroke: `url(#${id.steel})`, strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", opacity: "0.5" }),
-      /* @__PURE__ */ jsx("path", { d: "M180,280 L160,295", stroke: `url(#${id.steel})`, strokeWidth: "3", strokeLinecap: "round", opacity: "0.5" }),
-      /* @__PURE__ */ jsx("line", { x1: "180", y1: "130", x2: "180", y2: "195", stroke: "#60A5FA", strokeWidth: "1.5", opacity: "0.3" }),
-      /* @__PURE__ */ jsx("line", { x1: "145", y1: "160", x2: "215", y2: "160", stroke: "#60A5FA", strokeWidth: "1.5", opacity: "0.3" }),
-      [[180, 130], [180, 195], [145, 160], [215, 160]].map(([x, y]) => /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: "3", fill: "#60A5FA", opacity: "0.5", ...pulse(x, y) }, `${x}-${y}`)),
-      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "160", r: "18", fill: "#1E40AF", ...pulse(180, 160) }),
-      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "160", r: "12", fill: "#3B82F6", ...pulse(180, 160) }),
-      /* @__PURE__ */ jsx("circle", { cx: "180", cy: "160", r: "5", fill: "#BFDBFE", ...pulse(180, 160) }),
-      /* @__PURE__ */ jsx("circle", { cx: "310", cy: "50", r: "2.5", fill: "#60A5FA", opacity: "0.6" }),
-      /* @__PURE__ */ jsx("circle", { cx: "50", cy: "260", r: "2", fill: neutral("--kz-border-strong", 16), opacity: "0.4" })
+    size >= 48 ? /* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: "190", fill: `url(#${id.glow})` }) : null,
+    /* @__PURE__ */ jsx("circle", { className: m("kzm-spin"), cx: "200", cy: "200", r: KRIZAKA.orbit.r, stroke: neutral("--kz-border-strong", 40), strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: ".6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: KRIZAKA.ring.r, stroke: neutral("--kz-border-default", 30), strokeWidth: KRIZAKA.ring.width, opacity: ".35" }),
+    /* @__PURE__ */ jsxs("g", { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
+      /* @__PURE__ */ jsx("path", { d: KRIZAKA.shield, stroke: `url(#${id.ink})`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxs("g", { className: m("kzm-pulse"), children: [
+        /* @__PURE__ */ jsx("circle", { cx: KRIZAKA.node.cx, cy: KRIZAKA.node.cy, r: KRIZAKA.node.r, fill: `url(#${id.blue})` }),
+        /* @__PURE__ */ jsx("circle", { cx: KRIZAKA.node.cx, cy: KRIZAKA.node.cy, r: KRIZAKA.node.inner, fill: KRIZAKA.highlight })
+      ] }),
+      /* @__PURE__ */ jsxs("g", { className: m("kzm-pulse"), children: [
+        /* @__PURE__ */ jsx("circle", { cx: KRIZAKA.core.cx, cy: KRIZAKA.core.cy, r: KRIZAKA.core.r, fill: `url(#${id.blue})` }),
+        /* @__PURE__ */ jsx("circle", { cx: KRIZAKA.core.cx, cy: KRIZAKA.core.cy, r: KRIZAKA.core.inner, fill: KRIZAKA.highlight })
+      ] })
     ] })
   ] });
 }
 
+// src/marks/orazaka-geometry.ts
+var ORAZAKA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "76 76 248 248",
+  center: 200,
+  /**
+   * The three shards — a hexagon's cap (from the original 132-unit drawing), scaled ×1.9 around the centre and turned
+   * 0°, 120°, 240° — in view-box coordinates, so that one gradient runs across all three.
+   */
+  shards: [
+    "M154.4,121.2 L200,94.7 L245.6,121.2 L245.6,154.4 L226.6,165.4 L226.6,132.2 L200,116.8 L173.4,132.2 L173.4,165.4 L154.4,154.4 Z",
+    "M291.1,199.9 L291.2,252.6 L245.5,278.9 L216.7,262.3 L216.6,240.3 L245.4,257 L272.1,241.6 L272,210.9 L243.2,194.3 L262.3,183.3 Z",
+    "M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z"
+  ],
+  shardStroke: 5.7,
+  amber: { x1: 90, y1: 310, x2: 310, y2: 90, stops: [["0%", "#b45309"], ["100%", "#f59e0b"]] },
+  core: { r: 21, inner: 7.6 },
+  highlight: "#fffbeb",
+  glow: { color: "#f59e0b", opacity: 0.16 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
 // src/marks/OrazakaLogo.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var CSS2 = `
-.ozm-orbit { transform-box: view-box; transform-origin: 0 0; animation: ozm-orbit 35s linear infinite; }
-.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 2.5s ease-in-out infinite; }
+.ozm-orbit { transform-origin: 200px 200px; animation: ozm-orbit 35s linear infinite; }
+.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 3.2s ease-in-out infinite; }
 @keyframes ozm-orbit { to { transform: rotate(360deg); } }
 @keyframes ozm-core {
-  0%, 100% { transform: scale(1); opacity: .9; filter: drop-shadow(0 0 3px #f59e0b); }
-  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 10px #f59e0b); }
+  0%, 100% { filter: drop-shadow(0 0 6px hsla(38, 92%, 50%, .3)); opacity: .9; }
+  50% { filter: drop-shadow(0 0 14px hsla(38, 92%, 50%, .6)); opacity: 1; }
 }
 @media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }
 `;
-function OrazakaLogo({ size = 28, animated = true, title, className }) {
-  const id = useIds("ozm", ["amber"]);
-  return /* @__PURE__ */ jsxs2("svg", { width: size, height: size, viewBox: "-66 -66 132 132", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
+function OrazakaLogo({ size = 32, animated = true, title, className }) {
+  const id = useIds("ozm", ["amber", "glow"]);
+  const fill = `url(#${id.amber})`;
+  return /* @__PURE__ */ jsxs2("svg", { width: size, height: size, viewBox: size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className, ...a11y(title), children: [
     /* @__PURE__ */ jsx2("style", { children: CSS2 }),
-    /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsxs2("linearGradient", { id: id.amber, x1: "0", y1: "0", x2: "1", y2: "1", children: [
-      /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: "#f59e0b" }),
-      /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: "#b45309" })
-    ] }) }),
-    /* @__PURE__ */ jsx2("circle", { r: "62", stroke: neutral("--kz-border-strong", 16), strokeWidth: "1.5", strokeDasharray: "6 6", opacity: "0.5" }),
-    /* @__PURE__ */ jsx2("circle", { r: "48", stroke: neutral("--kz-border-default", 10), strokeWidth: "1", opacity: "0.3" }),
-    /* @__PURE__ */ jsxs2("g", { className: animated ? "ozm-orbit" : void 0, children: [
-      /* @__PURE__ */ jsx2("path", { d: "M -24 -41.5 L 0 -55.4 L 24 -41.5 L 24 -24 L 14 -18.2 L 14 -35.7 L 0 -43.8 L -14 -35.7 L -14 -18.2", stroke: neutral("--kz-text-muted", 45), strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ jsx2("path", { d: "M -48 0 L -38 17.3 L -14 31.2 L 0 23.1 L -10 17.3 L -24 9.2 L -24 -9.2", stroke: neutral("--kz-text-secondary", 70), strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ jsx2("path", { d: "M 48 0 L 38 17.3 L 14 31.2 L 0 23.1 L 10 17.3 L 24 9.2 L 24 -9.2", stroke: `url(#${id.amber})`, strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    /* @__PURE__ */ jsxs2("defs", { children: [
+      /* @__PURE__ */ jsx2("linearGradient", { id: id.amber, gradientUnits: "userSpaceOnUse", x1: ORAZAKA.amber.x1, y1: ORAZAKA.amber.y1, x2: ORAZAKA.amber.x2, y2: ORAZAKA.amber.y2, children: ORAZAKA.amber.stops.map(([offset, color]) => /* @__PURE__ */ jsx2("stop", { offset, stopColor: color }, offset)) }),
+      /* @__PURE__ */ jsxs2("radialGradient", { id: id.glow, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
+        /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: "0" })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx2("circle", { r: "10", fill: `url(#${id.amber})`, className: animated ? "ozm-core" : void 0 })
+    size >= 48 ? /* @__PURE__ */ jsx2("circle", { cx: ORAZAKA.center, cy: ORAZAKA.center, r: "190", fill: `url(#${id.glow})` }) : null,
+    /* @__PURE__ */ jsx2("circle", { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.orbit.r, stroke: neutral("--kz-border-strong", 40), strokeWidth: ORAZAKA.orbit.width, strokeDasharray: ORAZAKA.orbit.dash, opacity: ".6" }),
+    /* @__PURE__ */ jsx2("circle", { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke: neutral("--kz-border-default", 30), strokeWidth: ORAZAKA.ring.width, opacity: ".35" }),
+    /* @__PURE__ */ jsx2("g", { className: animated ? "ozm-orbit" : void 0, children: ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx2("path", { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d)) }),
+    /* @__PURE__ */ jsxs2("g", { className: animated ? "ozm-core" : void 0, children: [
+      /* @__PURE__ */ jsx2("circle", { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
+      /* @__PURE__ */ jsx2("circle", { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
+    ] })
   ] });
 }
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cx.ts","../src/marks/shared.ts","../src/marks/KrizakaLogo.tsx","../src/marks/OrazakaLogo.tsx","../src/marks/orochia-geometry.ts","../src/marks/OrochiaLogo.tsx","../src/marks/ProductLogo.tsx","../src/motion/MotionObserver.tsx","../src/motion/RotatingWord.tsx"],"sourcesContent":["/** Joins class names, skipping the falsy ones. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(\" \");\n}\n","import { useId } from \"react\";\n\nexport interface MarkProps {\n  /** Width and height in pixels. */\n  size?: number;\n  /** Orbit, pulse and shimmer. Off with `false`; always off under prefers-reduced-motion. */\n  animated?: boolean;\n  /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n  title?: string;\n  className?: string;\n}\n\n/** A neutral stroke: the host's `--kz-*` token when it has one, else the text colour at a low opacity. */\nexport const neutral = (token: string, percent: number) => `var(${token}, color-mix(in srgb, currentColor ${percent}%, transparent))`;\n\n/** Ids unique per instance, so several marks on a page never share a gradient. */\nexport function useIds<K extends string>(prefix: string, keys: readonly K[]): Record<K, string> {\n  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  return Object.fromEntries(keys.map((k) => [k, `${prefix}-${k}-${uid}`])) as Record<K, string>;\n}\n\nexport const a11y = (title?: string) => (title ? { role: \"img\" as const, \"aria-label\": title } : { \"aria-hidden\": true as const });\n","import { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.kzm-spin { transform-origin: 180px 180px; animation: kzm-spin 30s linear infinite; }\n.kzm-pulse { animation: kzm-pulse 4s ease-in-out infinite; }\n@keyframes kzm-spin { to { transform: rotate(360deg); } }\n@keyframes kzm-pulse {\n  0%, 100% { filter: drop-shadow(0 0 8px hsla(217, 92%, 60%, .2)) drop-shadow(0 0 24px hsla(217, 92%, 60%, .06)); }\n  50% { filter: drop-shadow(0 0 12px hsla(217, 92%, 60%, .35)) drop-shadow(0 0 36px hsla(217, 92%, 60%, .12)); }\n}\n@media (prefers-reduced-motion: reduce) { .kzm-spin, .kzm-pulse { animation: none; } }\n`;\n\n/** The Krizaka mark: a hexagonal shield with a neural core, inside slow orbits. Blue accent: `--kz-accent`. */\nexport function KrizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"kzm\", [\"blue\", \"steel\", \"core\", \"ambient\"] as const);\n  const accent = \"var(--kz-accent, hsl(217, 92%, 60%))\";\n  const m = (cls: string) => (animated ? cls : undefined);\n  const pulse = (x: number, y: number) => ({ className: m(\"kzm-pulse\"), style: { transformOrigin: `${x}px ${y}px` } });\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 400 400\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.blue} x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" stopColor={accent} />\n          <stop offset=\"100%\" stopColor=\"#60A5FA\" />\n        </linearGradient>\n        <linearGradient id={id.steel} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n          <stop offset=\"0%\" stopColor={neutral(\"--kz-text-secondary\", 64)} />\n          <stop offset=\"100%\" stopColor={neutral(\"--kz-text-muted\", 38)} />\n        </linearGradient>\n        <radialGradient id={id.core} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor=\"#60A5FA\" stopOpacity=\"1\" />\n          <stop offset=\"35%\" stopColor={accent} stopOpacity=\"0.7\" />\n          <stop offset=\"65%\" stopColor={accent} stopOpacity=\"0.02\" />\n          <stop offset=\"100%\" stopColor={accent} stopOpacity=\"0\" />\n        </radialGradient>\n        <radialGradient id={id.ambient} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={accent} stopOpacity=\"0.08\" />\n          <stop offset=\"100%\" stopColor={accent} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      <g transform=\"translate(20, 20)\">\n        <circle cx=\"180\" cy=\"180\" r=\"170\" fill={`url(#${id.ambient})`} />\n        <circle cx=\"180\" cy=\"180\" r=\"160\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"1.5\" strokeDasharray=\"8 8\" opacity=\"0.6\" className={m(\"kzm-spin\")} />\n        <circle cx=\"180\" cy=\"180\" r=\"130\" stroke={neutral(\"--kz-border-default\", 10)} strokeWidth=\"1\" opacity=\"0.35\" />\n        <circle cx=\"180\" cy=\"180\" r=\"100\" stroke={neutral(\"--kz-border-subtle\", 6)} strokeWidth=\"1\" strokeDasharray=\"3 6\" opacity=\"0.3\" />\n        <line x1=\"180\" y1=\"20\" x2=\"180\" y2=\"80\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"0.5\" opacity=\"0.2\" />\n        <line x1=\"320\" y1=\"100\" x2=\"260\" y2=\"140\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"0.5\" opacity=\"0.2\" />\n        <line x1=\"40\" y1=\"100\" x2=\"100\" y2=\"140\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"0.5\" opacity=\"0.2\" />\n        <circle cx=\"180\" cy=\"180\" r=\"55\" fill={`url(#${id.core})`} {...pulse(180, 180)} />\n        <path d=\"M180,80 L255,120 L255,200 L180,240 L105,200 L105,120 Z\" stroke={`url(#${id.blue})`} strokeWidth=\"3\" strokeLinejoin=\"round\" opacity=\"0.9\" />\n        <path d=\"M180,105 L235,133 L235,187 L180,215 L125,187 L125,133 Z\" stroke={`url(#${id.steel})`} strokeWidth=\"2\" strokeLinejoin=\"round\" opacity=\"0.5\" />\n        <path d=\"M255,120 L290,85 L310,100\" stroke={`url(#${id.blue})`} strokeWidth=\"5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M105,120 L70,85 L50,100\" stroke={`url(#${id.steel})`} strokeWidth=\"5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M180,240 L180,280 L200,295\" stroke={`url(#${id.steel})`} strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" opacity=\"0.5\" />\n        <path d=\"M180,280 L160,295\" stroke={`url(#${id.steel})`} strokeWidth=\"3\" strokeLinecap=\"round\" opacity=\"0.5\" />\n        <line x1=\"180\" y1=\"130\" x2=\"180\" y2=\"195\" stroke=\"#60A5FA\" strokeWidth=\"1.5\" opacity=\"0.3\" />\n        <line x1=\"145\" y1=\"160\" x2=\"215\" y2=\"160\" stroke=\"#60A5FA\" strokeWidth=\"1.5\" opacity=\"0.3\" />\n        {[[180, 130], [180, 195], [145, 160], [215, 160]].map(([x, y]) => (\n          <circle key={`${x}-${y}`} cx={x} cy={y} r=\"3\" fill=\"#60A5FA\" opacity=\"0.5\" {...pulse(x, y)} />\n        ))}\n        <circle cx=\"180\" cy=\"160\" r=\"18\" fill=\"#1E40AF\" {...pulse(180, 160)} />\n        <circle cx=\"180\" cy=\"160\" r=\"12\" fill=\"#3B82F6\" {...pulse(180, 160)} />\n        <circle cx=\"180\" cy=\"160\" r=\"5\" fill=\"#BFDBFE\" {...pulse(180, 160)} />\n        <circle cx=\"310\" cy=\"50\" r=\"2.5\" fill=\"#60A5FA\" opacity=\"0.6\" />\n        <circle cx=\"50\" cy=\"260\" r=\"2\" fill={neutral(\"--kz-border-strong\", 16)} opacity=\"0.4\" />\n      </g>\n    </svg>\n  );\n}\n","import { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.ozm-orbit { transform-box: view-box; transform-origin: 0 0; animation: ozm-orbit 35s linear infinite; }\n.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 2.5s ease-in-out infinite; }\n@keyframes ozm-orbit { to { transform: rotate(360deg); } }\n@keyframes ozm-core {\n  0%, 100% { transform: scale(1); opacity: .9; filter: drop-shadow(0 0 3px #f59e0b); }\n  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 10px #f59e0b); }\n}\n@media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }\n`;\n\n/** The Orazaka mark: three shards orbiting slowly around an amber core that breathes. */\nexport function OrazakaLogo({ size = 28, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"ozm\", [\"amber\"] as const);\n  return (\n    <svg width={size} height={size} viewBox=\"-66 -66 132 132\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.amber} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0%\" stopColor=\"#f59e0b\" />\n          <stop offset=\"100%\" stopColor=\"#b45309\" />\n        </linearGradient>\n      </defs>\n      <circle r=\"62\" stroke={neutral(\"--kz-border-strong\", 16)} strokeWidth=\"1.5\" strokeDasharray=\"6 6\" opacity=\"0.5\" />\n      <circle r=\"48\" stroke={neutral(\"--kz-border-default\", 10)} strokeWidth=\"1\" opacity=\"0.3\" />\n      <g className={animated ? \"ozm-orbit\" : undefined}>\n        <path d=\"M -24 -41.5 L 0 -55.4 L 24 -41.5 L 24 -24 L 14 -18.2 L 14 -35.7 L 0 -43.8 L -14 -35.7 L -14 -18.2\" stroke={neutral(\"--kz-text-muted\", 45)} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M -48 0 L -38 17.3 L -14 31.2 L 0 23.1 L -10 17.3 L -24 9.2 L -24 -9.2\" stroke={neutral(\"--kz-text-secondary\", 70)} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M 48 0 L 38 17.3 L 14 31.2 L 0 23.1 L 10 17.3 L 24 9.2 L 24 -9.2\" stroke={`url(#${id.amber})`} strokeWidth=\"3.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </g>\n      <circle r=\"10\" fill={`url(#${id.amber})`} className={animated ? \"ozm-core\" : undefined} />\n    </svg>\n  );\n}\n","/**\n * The Orochia mark's geometry — the one description of the serpent and its flame, drawn by the web mark (SVG in the\n * DOM, OrochiaLogo) and the native one (react-native-svg, @krizaka/ui/native). Coordinates are in the 360×360 artwork,\n * placed at (20, 20) in a 400×400 view box; below 48 px the view box crops to the serpent.\n */\nexport const OROCHIA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: [[\"0%\", \"#7c3aed\"], [\"55%\", \"#d946ef\"], [\"100%\", \"#f472b6\"]] },\n  flameGradient: { stops: [[\"0%\", \"#a855f7\"], [\"100%\", \"#f9a8d4\"]] },\n  glow: { color: \"#d946ef\", opacity: 0.18 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n  arc: \"M259.8,142.8 A88,88 0 1 1 142.8,100.2\",\n  neck: \"M142.8,100.2 A88,88 0 0 1 187.7,92.3\",\n  tail: \"M187.7,92.3 A88,88 0 0 1 221.3,102.3\",\n  scales: { color: \"#fdf4ff\", opacity: 0.45, width: 3, dash: \"2 14\" },\n  head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },\n  tongue: { d: \"M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3\", color: \"#f472b6\" },\n  eye: { cx: 256.3, cy: 123.5, r: 4.5, color: \"#fdf4ff\" },\n  flame: {\n    translate: [127, 120] as const,\n    scale: 4.4,\n    d: \"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\",\n  },\n} as const;\n","import { OROCHIA as G } from \"./orochia-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.orom-spin { transform-origin: 180px 180px; animation: orom-spin 30s linear infinite; }\n.orom-slither { animation: orom-slither 2.4s linear infinite; }\n.orom-pulse { transform-box: view-box; animation: orom-pulse 3.2s ease-in-out infinite; }\n@keyframes orom-spin { to { transform: rotate(360deg); } }\n@keyframes orom-slither { to { stroke-dashoffset: -64; } }\n@keyframes orom-pulse {\n  0%, 100% { filter: drop-shadow(0 0 6px hsla(292, 84%, 61%, .25)); opacity: .9; }\n  50% { filter: drop-shadow(0 0 14px hsla(292, 84%, 61%, .55)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .orom-spin, .orom-slither, .orom-pulse { animation: none; } }\n`;\n\n/**\n * The Orochia mark: the serpent (Orochi) coiled into an \"O\" around the flame it guards. The orbit turns, scales slide\n * along the body, the eye and the flame breathe. Below 48 px it crops to the serpent: the orbits would be hairlines.\n */\nexport function OrochiaLogo({ size = 36, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"orom\", [\"body\", \"flame\", \"glow\"] as const);\n  const m = (cls: string) => (animated ? cls : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.body} gradientUnits=\"userSpaceOnUse\" x1={G.body.x1} y1={G.body.y1} x2={G.body.x2} y2={G.body.y2}>\n          {G.body.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <linearGradient id={id.flame} x1=\"50%\" y1=\"100%\" x2=\"50%\" y2=\"0%\">\n          {G.flameGradient.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      <g transform={`translate(${G.offset} ${G.offset})`}>\n        <circle cx=\"180\" cy=\"180\" r=\"170\" fill={`url(#${id.glow})`} />\n        <circle className={m(\"orom-spin\")} cx=\"180\" cy=\"180\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n        <circle cx=\"180\" cy=\"180\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n        <path d={G.arc} stroke={`url(#${id.body})`} strokeWidth=\"22\" strokeLinecap=\"round\" />\n        <path className={m(\"orom-slither\")} d={G.arc} stroke={G.scales.color} strokeOpacity={G.scales.opacity} strokeWidth={G.scales.width} strokeLinecap=\"round\" strokeDasharray={G.scales.dash} />\n        <path d={G.neck} stroke={`url(#${id.body})`} strokeWidth=\"14\" strokeLinecap=\"round\" />\n        <path d={G.tail} stroke={`url(#${id.body})`} strokeWidth=\"6\" strokeLinecap=\"round\" />\n        <ellipse cx={G.head.cx} cy={G.head.cy} rx={G.head.rx} ry={G.head.ry} transform={`rotate(${G.head.rotate} ${G.head.cx} ${G.head.cy})`} fill={`url(#${id.body})`} />\n        <path d={G.tongue.d} stroke={G.tongue.color} strokeWidth=\"3\" strokeLinecap=\"round\" />\n        <circle className={m(\"orom-pulse\")} cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.eye.color} />\n        <path className={m(\"orom-pulse\")} transform={`translate(${G.flame.translate[0]} ${G.flame.translate[1]}) scale(${G.flame.scale})`} d={G.flame.d} fill={`url(#${id.flame})`} />\n      </g>\n    </svg>\n  );\n}\n","import { KrizakaLogo } from \"./KrizakaLogo\";\nimport { OrazakaLogo } from \"./OrazakaLogo\";\nimport { OrochiaLogo } from \"./OrochiaLogo\";\nimport type { MarkProps } from \"./shared\";\n\nexport type BrandId = \"krizaka\" | \"orazaka\" | \"orochia\";\n\n/** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */\nexport function ProductLogo({ id, ...props }: MarkProps & { id: BrandId }) {\n  if (id === \"krizaka\") return <KrizakaLogo {...props} />;\n  if (id === \"orazaka\") return <OrazakaLogo {...props} />;\n  return <OrochiaLogo {...props} />;\n}\n","import { useEffect } from \"react\";\n\n/**\n * Mount once at the root of the app. It reveals every `[data-reveal]` element as it enters the viewport — including\n * elements added later, so client-side navigation needs nothing more — and feeds the pointer position to\n * `.kz-spotlight` cards (`--spot-x`, `--spot-y`). One IntersectionObserver, one MutationObserver, one listener.\n * Under prefers-reduced-motion everything is revealed at once.\n */\nexport function MotionObserver(): null {\n  useEffect(() => {\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n      const revealAll = (root: ParentNode) => root.querySelectorAll(\"[data-reveal]\").forEach((el) => el.classList.add(\"kz-in\"));\n      revealAll(document);\n      const mo = new MutationObserver(() => revealAll(document));\n      mo.observe(document.body, { childList: true, subtree: true });\n      return () => mo.disconnect();\n    }\n    const io = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (!entry.isIntersecting) continue;\n          entry.target.classList.add(\"kz-in\");\n          io.unobserve(entry.target);\n        }\n      },\n      { rootMargin: \"0px 0px -8% 0px\", threshold: 0.12 },\n    );\n    const watch = (root: ParentNode) => root.querySelectorAll(\"[data-reveal]:not(.kz-in)\").forEach((el) => io.observe(el));\n    watch(document);\n    const mo = new MutationObserver((records) => {\n      for (const r of records) r.addedNodes.forEach((n) => n instanceof Element && (n.matches(\"[data-reveal]\") ? io.observe(n) : watch(n)));\n    });\n    mo.observe(document.body, { childList: true, subtree: true });\n    return () => {\n      io.disconnect();\n      mo.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    const move = (e: PointerEvent) => {\n      const card = (e.target as Element | null)?.closest?.(\".kz-spotlight\") as HTMLElement | null;\n      if (!card) return;\n      const box = card.getBoundingClientRect();\n      card.style.setProperty(\"--spot-x\", `${e.clientX - box.left}px`);\n      card.style.setProperty(\"--spot-y\", `${e.clientY - box.top}px`);\n    };\n    document.addEventListener(\"pointermove\", move, { passive: true });\n    return () => document.removeEventListener(\"pointermove\", move);\n  }, []);\n\n  return null;\n}\n","import { useEffect, useState } from \"react\";\n\nimport { cx } from \"../cx\";\n\n/**\n * A word that rolls through alternatives — the Krizaka headline signature. The server render and the first client\n * render show the first word; under prefers-reduced-motion it stays put. Decorative (`aria-hidden`): give the\n * heading a stable accessible label.\n */\nexport function RotatingWord({ words, interval = 2600, className }: { words: readonly string[]; interval?: number; className?: string }) {\n  const [i, setI] = useState(0);\n  useEffect(() => {\n    if (words.length < 2 || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const timer = setInterval(() => setI((k) => (k + 1) % words.length), interval);\n    return () => clearInterval(timer);\n  }, [words.length, interval]);\n  return (\n    <span aria-hidden className=\"kz-rotating\">\n      <span key={i} className={cx(\"kz-word\", className)}>\n        {words[i]}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","CSS","jsx","jsxs","CSS","jsx","mo","useEffect","jsx","useEffect"]}
+{"version":3,"sources":["../src/cx.ts","../src/marks/krizaka-geometry.ts","../src/marks/shared.ts","../src/marks/KrizakaLogo.tsx","../src/marks/orazaka-geometry.ts","../src/marks/OrazakaLogo.tsx","../src/marks/orochia-geometry.ts","../src/marks/OrochiaLogo.tsx","../src/marks/ProductLogo.tsx","../src/motion/MotionObserver.tsx","../src/motion/RotatingWord.tsx"],"sourcesContent":["/** Joins class names, skipping the falsy ones. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n  return parts.filter(Boolean).join(\" \");\n}\n","/**\n * The Krizaka mark's geometry — the one description drawn by the web mark (KrizakaLogo) and the native one\n * (KrizakaMark). Built on the Orochia mark's grammar (docs: packages/tokens/BRAND.md, \"Marks\"): a 360×360 artwork at\n * (20, 20) in a 400×400 view box, one bold stroke (22) drawn as an open figure, an end that breaks out as a node, a\n * core, a dashed orbit and a ring; below 48 px the view box crops to the emblem.\n *\n * Krizaka is the parent: the hexagonal shield is **ink** (the host's text roles), the node and the core carry the\n * Krizaka blue (the accent of @krizaka/tokens, krizaka brand: hsl(217 92% 53%) → its text tint hsl(217 92% 68%)).\n */\nexport const KRIZAKA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  /** The shield: a pointy-top hexagon (r 92 around 180,180), open at its upper-right edge. */\n  shield: \"M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5\",\n  stroke: 22,\n  ink: { x1: 70, y1: 290, x2: 290, y2: 70 },\n  blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: [[\"0%\", \"#196df5\"], [\"100%\", \"#629cf8\"]] },\n  /** The vertex where the shield opens: a node (the serpent's head in Orochia's grammar). */\n  node: { cx: 259.7, cy: 134, r: 19, inner: 6 },\n  core: { cx: 180, cy: 180, r: 24, inner: 8 },\n  highlight: \"#dbeafe\",\n  glow: { color: \"#196df5\", opacity: 0.16 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n","import { useId } from \"react\";\n\nexport interface MarkProps {\n  /** Width and height in pixels. */\n  size?: number;\n  /** Orbit, pulse and shimmer. Off with `false`; always off under prefers-reduced-motion. */\n  animated?: boolean;\n  /** An accessible name (the mark becomes an image); without it the mark is decorative. */\n  title?: string;\n  className?: string;\n}\n\n/** A neutral stroke: the host's `--kz-*` token when it has one, else the text colour at a low opacity. */\nexport const neutral = (token: string, percent: number) => `var(${token}, color-mix(in srgb, currentColor ${percent}%, transparent))`;\n\n/** Ids unique per instance, so several marks on a page never share a gradient. */\nexport function useIds<K extends string>(prefix: string, keys: readonly K[]): Record<K, string> {\n  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  return Object.fromEntries(keys.map((k) => [k, `${prefix}-${k}-${uid}`])) as Record<K, string>;\n}\n\nexport const a11y = (title?: string) => (title ? { role: \"img\" as const, \"aria-label\": title } : { \"aria-hidden\": true as const });\n","import { KRIZAKA as G } from \"./krizaka-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.kzm-spin { transform-origin: 200px 200px; animation: kzm-spin 30s linear infinite; }\n.kzm-pulse { transform-box: fill-box; transform-origin: center; animation: kzm-pulse 3.2s ease-in-out infinite; }\n@keyframes kzm-spin { to { transform: rotate(360deg); } }\n@keyframes kzm-pulse {\n  0%, 100% { filter: drop-shadow(0 0 6px hsla(217, 92%, 53%, .25)); opacity: .9; }\n  50% { filter: drop-shadow(0 0 14px hsla(217, 92%, 53%, .55)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .kzm-spin, .kzm-pulse { animation: none; } }\n`;\n\n/**\n * The Krizaka mark: an ink hexagonal shield, open at one vertex where a blue node breaks out, around a blue core —\n * the parent of the family (Orochia's coiled serpent, Orazaka's shards). The orbit turns, the node and the core\n * breathe. The shield reads the host's text roles, so it is ink in both themes. Below 48 px it crops to the emblem.\n */\nexport function KrizakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"kzm\", [\"ink\", \"blue\", \"glow\"] as const);\n  const m = (cls: string) => (animated ? cls : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.ink} gradientUnits=\"userSpaceOnUse\" x1={G.ink.x1} y1={G.ink.y1} x2={G.ink.x2} y2={G.ink.y2}>\n          <stop offset=\"0%\" stopColor={neutral(\"--kz-text-secondary\", 60)} />\n          <stop offset=\"100%\" stopColor={neutral(\"--kz-text-primary\", 92)} />\n        </linearGradient>\n        <linearGradient id={id.blue} gradientUnits=\"userSpaceOnUse\" x1={G.blue.x1} y1={G.blue.y1} x2={G.blue.x2} y2={G.blue.y2}>\n          {G.blue.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx=\"200\" cy=\"200\" r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n      <circle className={m(\"kzm-spin\")} cx=\"200\" cy=\"200\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n      <circle cx=\"200\" cy=\"200\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g transform={`translate(${G.offset} ${G.offset})`}>\n        <path d={G.shield} stroke={`url(#${id.ink})`} strokeWidth={G.stroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <g className={m(\"kzm-pulse\")}>\n          <circle cx={G.node.cx} cy={G.node.cy} r={G.node.r} fill={`url(#${id.blue})`} />\n          <circle cx={G.node.cx} cy={G.node.cy} r={G.node.inner} fill={G.highlight} />\n        </g>\n        <g className={m(\"kzm-pulse\")}>\n          <circle cx={G.core.cx} cy={G.core.cy} r={G.core.r} fill={`url(#${id.blue})`} />\n          <circle cx={G.core.cx} cy={G.core.cy} r={G.core.inner} fill={G.highlight} />\n        </g>\n      </g>\n    </svg>\n  );\n}\n","/**\n * The Orazaka mark's geometry — drawn by the web mark (OrazakaLogo) and the native one (OrazakaMark). The same\n * grammar as Orochia and Krizaka (packages/tokens/BRAND.md, \"Marks\"): 400×400 view box, dashed orbit and ring, a bold\n * emblem in the brand gradient, a bright core; below 48 px the view box crops to the emblem.\n *\n * The emblem keeps the original idea — three hexagonal shards orbiting a core — drawn as solid shards (the weight of\n * Orochia's body) in the logo's own orange: #b45309 → #f59e0b, the stops the Orazaka brand theme is built from.\n */\nexport const ORAZAKA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"76 76 248 248\",\n  center: 200,\n  /**\n   * The three shards — a hexagon's cap (from the original 132-unit drawing), scaled ×1.9 around the centre and turned\n   * 0°, 120°, 240° — in view-box coordinates, so that one gradient runs across all three.\n   */\n  shards: [\n    \"M154.4,121.2 L200,94.7 L245.6,121.2 L245.6,154.4 L226.6,165.4 L226.6,132.2 L200,116.8 L173.4,132.2 L173.4,165.4 L154.4,154.4 Z\",\n    \"M291.1,199.9 L291.2,252.6 L245.5,278.9 L216.7,262.3 L216.6,240.3 L245.4,257 L272.1,241.6 L272,210.9 L243.2,194.3 L262.3,183.3 Z\",\n    \"M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z\",\n  ],\n  shardStroke: 5.7,\n  amber: { x1: 90, y1: 310, x2: 310, y2: 90, stops: [[\"0%\", \"#b45309\"], [\"100%\", \"#f59e0b\"]] },\n  core: { r: 21, inner: 7.6 },\n  highlight: \"#fffbeb\",\n  glow: { color: \"#f59e0b\", opacity: 0.16 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n","import { ORAZAKA as G } from \"./orazaka-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.ozm-orbit { transform-origin: 200px 200px; animation: ozm-orbit 35s linear infinite; }\n.ozm-core { transform-box: fill-box; transform-origin: center; animation: ozm-core 3.2s ease-in-out infinite; }\n@keyframes ozm-orbit { to { transform: rotate(360deg); } }\n@keyframes ozm-core {\n  0%, 100% { filter: drop-shadow(0 0 6px hsla(38, 92%, 50%, .3)); opacity: .9; }\n  50% { filter: drop-shadow(0 0 14px hsla(38, 92%, 50%, .6)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .ozm-orbit, .ozm-core { animation: none; } }\n`;\n\n/**\n * The Orazaka mark: three solid hexagonal shards in the Orazaka orange orbiting slowly around a core that breathes —\n * the family's grammar (dashed orbit, ring, bold emblem, bright core). Below 48 px it crops to the emblem.\n */\nexport function OrazakaLogo({ size = 32, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"ozm\", [\"amber\", \"glow\"] as const);\n  const fill = `url(#${id.amber})`;\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.amber} gradientUnits=\"userSpaceOnUse\" x1={G.amber.x1} y1={G.amber.y1} x2={G.amber.x2} y2={G.amber.y2}>\n          {G.amber.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx={G.center} cy={G.center} r=\"190\" fill={`url(#${id.glow})`} /> : null /* cropped: the halo would show its square */}\n      <circle cx={G.center} cy={G.center} r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n      <circle cx={G.center} cy={G.center} r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n      <g className={animated ? \"ozm-orbit\" : undefined}>\n        {G.shards.map((d) => (\n          <path key={d} d={d} fill={fill} stroke={fill} strokeWidth={G.shardStroke} strokeLinejoin=\"round\" />\n        ))}\n      </g>\n      <g className={animated ? \"ozm-core\" : undefined}>\n        <circle cx={G.center} cy={G.center} r={G.core.r} fill={fill} />\n        <circle cx={G.center} cy={G.center} r={G.core.inner} fill={G.highlight} />\n      </g>\n    </svg>\n  );\n}\n","/**\n * The Orochia mark's geometry — the one description of the serpent and its flame, drawn by the web mark (SVG in the\n * DOM, OrochiaLogo) and the native one (react-native-svg, @krizaka/ui/native). Coordinates are in the 360×360 artwork,\n * placed at (20, 20) in a 400×400 view box; below 48 px the view box crops to the serpent.\n */\nexport const OROCHIA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  body: { x1: 70, y1: 290, x2: 290, y2: 70, stops: [[\"0%\", \"#7c3aed\"], [\"55%\", \"#d946ef\"], [\"100%\", \"#f472b6\"]] },\n  flameGradient: { stops: [[\"0%\", \"#a855f7\"], [\"100%\", \"#f9a8d4\"]] },\n  glow: { color: \"#d946ef\", opacity: 0.18 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n  arc: \"M259.8,142.8 A88,88 0 1 1 142.8,100.2\",\n  neck: \"M142.8,100.2 A88,88 0 0 1 187.7,92.3\",\n  tail: \"M187.7,92.3 A88,88 0 0 1 221.3,102.3\",\n  scales: { color: \"#fdf4ff\", opacity: 0.45, width: 3, dash: \"2 14\" },\n  head: { cx: 253.9, cy: 130.1, rx: 13, ry: 20, rotate: -25 },\n  tongue: { d: \"M245.4,112.0 L242.0,104.8 L235.0,101.5 M242.0,104.8 L244.0,97.3\", color: \"#f472b6\" },\n  eye: { cx: 256.3, cy: 123.5, r: 4.5, color: \"#fdf4ff\" },\n  flame: {\n    translate: [127, 120] as const,\n    scale: 4.4,\n    d: \"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\",\n  },\n} as const;\n","import { OROCHIA as G } from \"./orochia-geometry\";\nimport { a11y, type MarkProps, neutral, useIds } from \"./shared\";\n\nconst CSS = `\n.orom-spin { transform-origin: 180px 180px; animation: orom-spin 30s linear infinite; }\n.orom-slither { animation: orom-slither 2.4s linear infinite; }\n.orom-pulse { transform-box: view-box; animation: orom-pulse 3.2s ease-in-out infinite; }\n@keyframes orom-spin { to { transform: rotate(360deg); } }\n@keyframes orom-slither { to { stroke-dashoffset: -64; } }\n@keyframes orom-pulse {\n  0%, 100% { filter: drop-shadow(0 0 6px hsla(292, 84%, 61%, .25)); opacity: .9; }\n  50% { filter: drop-shadow(0 0 14px hsla(292, 84%, 61%, .55)); opacity: 1; }\n}\n@media (prefers-reduced-motion: reduce) { .orom-spin, .orom-slither, .orom-pulse { animation: none; } }\n`;\n\n/**\n * The Orochia mark: the serpent (Orochi) coiled into an \"O\" around the flame it guards. The orbit turns, scales slide\n * along the body, the eye and the flame breathe. Below 48 px it crops to the serpent: the orbits would be hairlines.\n */\nexport function OrochiaLogo({ size = 36, animated = true, title, className }: MarkProps) {\n  const id = useIds(\"orom\", [\"body\", \"flame\", \"glow\"] as const);\n  const m = (cls: string) => (animated ? cls : undefined);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={id.body} gradientUnits=\"userSpaceOnUse\" x1={G.body.x1} y1={G.body.y1} x2={G.body.x2} y2={G.body.y2}>\n          {G.body.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <linearGradient id={id.flame} x1=\"50%\" y1=\"100%\" x2=\"50%\" y2=\"0%\">\n          {G.flameGradient.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      <g transform={`translate(${G.offset} ${G.offset})`}>\n        <circle cx=\"180\" cy=\"180\" r=\"170\" fill={`url(#${id.glow})`} />\n        <circle className={m(\"orom-spin\")} cx=\"180\" cy=\"180\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n        <circle cx=\"180\" cy=\"180\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n        <path d={G.arc} stroke={`url(#${id.body})`} strokeWidth=\"22\" strokeLinecap=\"round\" />\n        <path className={m(\"orom-slither\")} d={G.arc} stroke={G.scales.color} strokeOpacity={G.scales.opacity} strokeWidth={G.scales.width} strokeLinecap=\"round\" strokeDasharray={G.scales.dash} />\n        <path d={G.neck} stroke={`url(#${id.body})`} strokeWidth=\"14\" strokeLinecap=\"round\" />\n        <path d={G.tail} stroke={`url(#${id.body})`} strokeWidth=\"6\" strokeLinecap=\"round\" />\n        <ellipse cx={G.head.cx} cy={G.head.cy} rx={G.head.rx} ry={G.head.ry} transform={`rotate(${G.head.rotate} ${G.head.cx} ${G.head.cy})`} fill={`url(#${id.body})`} />\n        <path d={G.tongue.d} stroke={G.tongue.color} strokeWidth=\"3\" strokeLinecap=\"round\" />\n        <circle className={m(\"orom-pulse\")} cx={G.eye.cx} cy={G.eye.cy} r={G.eye.r} fill={G.eye.color} />\n        <path className={m(\"orom-pulse\")} transform={`translate(${G.flame.translate[0]} ${G.flame.translate[1]}) scale(${G.flame.scale})`} d={G.flame.d} fill={`url(#${id.flame})`} />\n      </g>\n    </svg>\n  );\n}\n","import { KrizakaLogo } from \"./KrizakaLogo\";\nimport { OrazakaLogo } from \"./OrazakaLogo\";\nimport { OrochiaLogo } from \"./OrochiaLogo\";\nimport type { MarkProps } from \"./shared\";\n\nexport type BrandId = \"krizaka\" | \"orazaka\" | \"orochia\";\n\n/** The mark of a Krizaka brand by id — for navigation, cards and lists driven by data. */\nexport function ProductLogo({ id, ...props }: MarkProps & { id: BrandId }) {\n  if (id === \"krizaka\") return <KrizakaLogo {...props} />;\n  if (id === \"orazaka\") return <OrazakaLogo {...props} />;\n  return <OrochiaLogo {...props} />;\n}\n","import { useEffect } from \"react\";\n\n/**\n * Mount once at the root of the app. It reveals every `[data-reveal]` element as it enters the viewport — including\n * elements added later, so client-side navigation needs nothing more — and feeds the pointer position to\n * `.kz-spotlight` cards (`--spot-x`, `--spot-y`). One IntersectionObserver, one MutationObserver, one listener.\n * Under prefers-reduced-motion everything is revealed at once.\n */\nexport function MotionObserver(): null {\n  useEffect(() => {\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n      const revealAll = (root: ParentNode) => root.querySelectorAll(\"[data-reveal]\").forEach((el) => el.classList.add(\"kz-in\"));\n      revealAll(document);\n      const mo = new MutationObserver(() => revealAll(document));\n      mo.observe(document.body, { childList: true, subtree: true });\n      return () => mo.disconnect();\n    }\n    const io = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (!entry.isIntersecting) continue;\n          entry.target.classList.add(\"kz-in\");\n          io.unobserve(entry.target);\n        }\n      },\n      { rootMargin: \"0px 0px -8% 0px\", threshold: 0.12 },\n    );\n    const watch = (root: ParentNode) => root.querySelectorAll(\"[data-reveal]:not(.kz-in)\").forEach((el) => io.observe(el));\n    watch(document);\n    const mo = new MutationObserver((records) => {\n      for (const r of records) r.addedNodes.forEach((n) => n instanceof Element && (n.matches(\"[data-reveal]\") ? io.observe(n) : watch(n)));\n    });\n    mo.observe(document.body, { childList: true, subtree: true });\n    return () => {\n      io.disconnect();\n      mo.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    const move = (e: PointerEvent) => {\n      const card = (e.target as Element | null)?.closest?.(\".kz-spotlight\") as HTMLElement | null;\n      if (!card) return;\n      const box = card.getBoundingClientRect();\n      card.style.setProperty(\"--spot-x\", `${e.clientX - box.left}px`);\n      card.style.setProperty(\"--spot-y\", `${e.clientY - box.top}px`);\n    };\n    document.addEventListener(\"pointermove\", move, { passive: true });\n    return () => document.removeEventListener(\"pointermove\", move);\n  }, []);\n\n  return null;\n}\n","import { useEffect, useState } from \"react\";\n\nimport { cx } from \"../cx\";\n\n/**\n * A word that rolls through alternatives — the Krizaka headline signature. The server render and the first client\n * render show the first word; under prefers-reduced-motion it stays put. Decorative (`aria-hidden`): give the\n * heading a stable accessible label.\n */\nexport function RotatingWord({ words, interval = 2600, className }: { words: readonly string[]; interval?: number; className?: string }) {\n  const [i, setI] = useState(0);\n  useEffect(() => {\n    if (words.length < 2 || window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const timer = setInterval(() => setI((k) => (k + 1) % words.length), interval);\n    return () => clearInterval(timer);\n  }, [words.length, interval]);\n  return (\n    <span aria-hidden className=\"kz-rotating\">\n      <span key={i} className={cx(\"kz-word\", className)}>\n        {words[i]}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","CSS","jsx","jsxs","CSS","jsx","mo","useEffect","jsx","useEffect"]}

package/dist/motion.css

@@ -1,7 +1,7 @@
 /* @krizaka/ui — the Krizaka motion signature.
    One easing (--kz-ease); pages that enter; sections that rise into view ([data-reveal] + MotionObserver); words
    that roll (RotatingWord); a sheen across primary actions; a spotlight that follows the pointer; cards that lift;
-   bands that slide; and one vocabulary for what opens over the page (overlay, dialog, pop, fade).
+   bands that slide; section backdrops that glide from one brand tint to the next; and one vocabulary for what opens over the page (overlay, dialog, pop, fade).
    Plain CSS, no framework: import "@krizaka/ui/motion.css" once. Everything stops under prefers-reduced-motion.
    Tailwind v4: `--default-transition-timing-function: var(--kz-ease)` in @theme gives every transition the easing. */
 
@@ -155,8 +155,58 @@
   from { opacity: 0; transform: translateY(-6px) scale(0.96); }
 }
 
+/* Section backdrop (SectionBackdrop): the brand's section gradient (--kz-brand-gradient-*), sections that glide from
+   one temperature to the next (each ends on the page surface, so the next starts where it stopped), a light dome, a
+   perspective grid, a blurred foreground for depth of field, and a very slow drift. */
+.kz-backdrop {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  background: linear-gradient(180deg, var(--kz-brand-gradient-from), var(--kz-brand-gradient-via) 55%, var(--kz-brand-gradient-to));
+}
+.kz-backdrop[data-direction="up"] {
+  background: linear-gradient(0deg, var(--kz-brand-gradient-from), var(--kz-brand-gradient-via) 55%, var(--kz-brand-gradient-to));
+}
+.kz-backdrop > [data-backdrop-layer] { position: absolute; z-index: -1; pointer-events: none; }
+.kz-backdrop-drift {
+  inset: -20%;
+  background:
+    radial-gradient(38% 32% at 28% 30%, color-mix(in oklab, var(--kz-accent, #196df5) 14%, transparent), transparent 70%),
+    radial-gradient(34% 30% at 76% 22%, color-mix(in oklab, var(--kz-accent-2, #196df5) 10%, transparent), transparent 70%);
+  animation: kz-backdrop-drift 40s ease-in-out infinite alternate;
+}
+@keyframes kz-backdrop-drift {
+  to { transform: translate3d(6%, 4%, 0) rotate(6deg); }
+}
+.kz-backdrop-dome {
+  left: 50%;
+  top: -35%;
+  width: 110%;
+  aspect-ratio: 2 / 1;
+  transform: translateX(-50%);
+  border-radius: 50%;
+  background: radial-gradient(closest-side, color-mix(in oklab, var(--kz-accent, #196df5) 24%, transparent), transparent);
+  filter: blur(28px);
+}
+.kz-backdrop-grid {
+  inset: auto -50% 0 -50%;
+  height: 55%;
+  background-image:
+    linear-gradient(to right, var(--kz-border-default) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--kz-border-default) 1px, transparent 1px);
+  background-size: 48px 48px;
+  transform: perspective(640px) rotateX(62deg);
+  transform-origin: bottom;
+  mask-image: linear-gradient(to top, #000 5%, transparent 85%);
+}
+.kz-backdrop-media {
+  inset: 0;
+  filter: blur(var(--kz-backdrop-blur, 18px));
+  opacity: 0.5;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade, .kz-progress { animation: none !important; }
+  .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-backdrop-drift, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade, .kz-progress { animation: none !important; }
   [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
   .kz-sheen::after { display: none; }
   .kz-lift, .kz-lift:hover { transform: none; transition: none; }