@krizaka/ui 2.8.0 → 2.10.0

package/dist/landscape.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/landscape/landscape.tsx"],"sourcesContent":["// The Krizaka landscape — a valley at dusk under a constellation: three ranges of peaks, a phoenix over a river of\n// two flames, trees of light, a treehouse, and the flock at work (the falcon on watch, the owl, the duck at its\n// laptop, the flamingo). The brand layer's illustration, like the marks: drawn in code, ids unique per instance, its\n// own colours by default (`tone=\"own\"`) or the host brand's sky and peaks (`tone=\"brand\"`). Decorative.\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { cn } from \"../cn\";\n\n/** The sky and the peaks: the Krizaka dusk (`own`), or the host brand's accents (`brand`). Birds keep their colours. */\nconst TONES = {\n  own: {\n    \"--kzl-sun\": \"#f59e0b\",\n    \"--kzl-sun-2\": \"#ec4899\",\n    \"--kzl-sun-3\": \"#6366f1\",\n    \"--kzl-far\": \"#6366f1\",\n    \"--kzl-far-2\": \"#4f46e5\",\n    \"--kzl-far-line\": \"#818cf8\",\n    \"--kzl-mid\": \"#06b6d4\",\n    \"--kzl-mid-2\": \"#0891b2\",\n    \"--kzl-mid-line\": \"#22d3ee\",\n    \"--kzl-near\": \"#d946ef\",\n    \"--kzl-near-2\": \"#a855f7\",\n    \"--kzl-near-line\": \"#e879f9\",\n    \"--kzl-aurora-l\": \"#00f2fe\",\n    \"--kzl-aurora-r\": \"#ec4899\",\n  },\n  brand: {\n    \"--kzl-sun\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-sun-2\": \"var(--kz-accent)\",\n    \"--kzl-sun-3\": \"var(--kz-accent)\",\n    \"--kzl-far\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-far-2\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-far-line\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-mid\": \"color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))\",\n    \"--kzl-mid-2\": \"color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))\",\n    \"--kzl-mid-line\": \"color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))\",\n    \"--kzl-near\": \"var(--kz-accent)\",\n    \"--kzl-near-2\": \"var(--kz-accent)\",\n    \"--kzl-near-line\": \"var(--kz-accent)\",\n    \"--kzl-aurora-l\": \"var(--kz-accent-2, var(--kz-accent))\",\n    \"--kzl-aurora-r\": \"var(--kz-accent)\",\n  },\n} as const;\n\nconst CSS = `\n.kzl { pointer-events: none; overflow: hidden; }\n.kzl-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; pointer-events: none; z-index: 3;\n  background: linear-gradient(to top, var(--kz-surface-0) 0%, transparent 100%); }\n        /* --- Cyber Phoenix & Flame Flow animations --- */\n        @keyframes kzl-phoenix-flow-purple {\n          from { stroke-dashoffset: 350; }\n          to   { stroke-dashoffset: 0; }\n        }\n        @keyframes kzl-phoenix-flow-gold {\n          from { stroke-dashoffset: 0; }\n          to   { stroke-dashoffset: 350; }\n        }\n        @keyframes kzl-phoenix-bob {\n          0%, 100% { transform: translateY(0) scale(1); }\n          50%      { transform: translateY(-8px) scale(1.02); }\n        }\n        @keyframes kzl-wing-flap-l-phoenix {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(-10deg) translateY(-2px); }\n        }\n        @keyframes kzl-wing-flap-r-phoenix {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(10deg) translateY(-2px); }\n        }\n        @keyframes kzl-core-glow {\n          0%, 100% { fill: #ffef5c; filter: drop-shadow(0 0 1px #ffef5c); }\n          50%      { fill: #ffffff; filter: drop-shadow(0 0 5px #ff3c00); }\n        }\n\n        .kzl-cyber-phoenix {\n          animation: kzl-phoenix-bob 4s ease-in-out infinite;\n          transform-origin: 600px 325px;\n          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        }\n        .kzl-cyber-phoenix:hover {\n          transform: translateY(-4px) scale(1.08);\n        }\n        .kzl-phoenix-wing-l {\n          animation: kzl-wing-flap-l-phoenix 2.5s ease-in-out infinite;\n        }\n        .kzl-phoenix-wing-r {\n          animation: kzl-wing-flap-r-phoenix 2.5s ease-in-out infinite;\n        }\n        .kzl-cyber-phoenix:hover .kzl-phoenix-wing-l {\n          animation: kzl-wing-flap-l-phoenix 0.6s linear infinite;\n        }\n        .kzl-cyber-phoenix:hover .kzl-phoenix-wing-r {\n          animation: kzl-wing-flap-r-phoenix 0.6s linear infinite;\n        }\n        .kzl-phoenix-core {\n          animation: kzl-core-glow 1.5s ease-in-out infinite;\n        }\n\n        /* --- Pulse Animations --- */\n        @keyframes kzl-opacity-pulse {\n          0%, 100% { opacity: 0.35; }\n          50%      { opacity: 0.95; }\n        }\n        .kzl-pulse-slow {\n          animation: kzl-opacity-pulse 4s ease-in-out infinite;\n        }\n        @keyframes kzl-sun-pulse {\n          0%, 100% { opacity: 0.16; transform: scale(0.96); }\n          50%      { opacity: 0.32; transform: scale(1.04); }\n        }\n        .kzl-sun-pulsing {\n          animation: kzl-sun-pulse 6s ease-in-out infinite;\n          transform-origin: 600px 200px;\n        }\n\n        /* --- Rising local data pulses --- */\n        @keyframes kzl-rise-fade-1 {\n          0%   { transform: translateY(80px) scale(0.5); opacity: 0; }\n          40%  { opacity: 0.8; }\n          100% { transform: translateY(-30px) scale(1.3); opacity: 0; }\n        }\n        @keyframes kzl-rise-fade-2 {\n          0%   { transform: translateY(60px) scale(0.4); opacity: 0; }\n          50%  { opacity: 0.9; }\n          100% { transform: translateY(-50px) scale(1.2); opacity: 0; }\n        }\n        .kzl-rising-pulse-1 {\n          animation: kzl-rise-fade-1 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;\n          transform-origin: center;\n        }\n        .kzl-rising-pulse-2 {\n          animation: kzl-rise-fade-2 5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 1.5s;\n          transform-origin: center;\n        }\n\n        /* --- Mascot Hover Animations (Stable Hitboxes) --- */\n        .kzl-bird-graphics {\n          transform-box: fill-box;\n          transform-origin: center;\n          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        }\n        .kzl-bird-hitbox:hover .kzl-bird-graphics {\n          transform: scale(1.08) translateY(-4px);\n        }\n\n        /* --- Bird Eye Blinking/Glowing Animations --- */\n        .kzl-falcon-eye {\n          animation: kzl-falcon-eye-pulse 2.5s ease-in-out infinite;\n        }\n        .kzl-duck-eye {\n          transform-box: fill-box;\n          transform-origin: center;\n          animation: kzl-eye-blink 5s ease-in-out infinite 1s;\n        }\n        .kzl-flamingo-eye {\n          transform-box: fill-box;\n          transform-origin: center;\n          animation: kzl-eye-blink 6s ease-in-out infinite 2.5s;\n        }\n        .kzl-owl-eye {\n          transform-box: fill-box;\n          transform-origin: center;\n          animation: kzl-eye-blink 4s ease-in-out infinite 0.5s;\n        }\n\n        @keyframes kzl-eye-blink {\n          0%, 90%, 100% {\n            transform: scaleY(1);\n          }\n          95% {\n            transform: scaleY(0.15);\n          }\n        }\n\n        @keyframes kzl-falcon-eye-pulse {\n          0%, 100% { fill: #00f2fe; filter: drop-shadow(0 0 2px #00f2fe); }\n          50%      { fill: #00ff66; filter: drop-shadow(0 0 5px #00ff66); }\n        }\n\n        /* FalconBot constant loop animations */\n        .kzl-falcon-bot .kzl-head-group {\n          animation: kzl-head-bob 4s ease-in-out infinite;\n        }\n        .kzl-falcon-bot .kzl-wing-left {\n          animation: kzl-wing-flap-left 3s ease-in-out infinite;\n        }\n        .kzl-falcon-bot .kzl-wing-right {\n          animation: kzl-wing-flap-right 3s ease-in-out infinite;\n        }\n        .kzl-falcon-bot .kzl-sentry-laser {\n          animation: kzl-scan-flicker 5s ease-in-out infinite;\n        }\n\n        @keyframes kzl-scan-flicker {\n          0%, 100% { opacity: 0; }\n          10%, 90% { opacity: 0.15; }\n          50%      { opacity: 0.5; }\n        }\n        @keyframes kzl-head-bob {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-2px) rotate(2deg); }\n        }\n        @keyframes kzl-wing-flap-left {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(-8deg) scaleX(1.05); }\n        }\n        @keyframes kzl-wing-flap-right {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(8deg) scaleX(1.05); }\n        }\n\n        /* Developer Duck constant loop animations */\n        .kzl-developer-duck .kzl-head-group {\n          animation: kzl-duck-look 6s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-wing-left-type {\n          animation: kzl-wing-type-l 0.5s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-wing-right-type {\n          animation: kzl-wing-type-r 0.5s ease-in-out infinite 0.25s;\n        }\n        .kzl-developer-duck .kzl-laptop-screen {\n          animation: kzl-screen-flicker-idle 3s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-holo-projection {\n          animation: kzl-holo-flicker 6s ease-in-out infinite;\n        }\n        .kzl-developer-duck .kzl-holo-elements {\n          animation: kzl-holo-elements-rise 6s ease-in-out infinite;\n        }\n\n        @keyframes kzl-screen-flicker-idle {\n          0%, 100% { opacity: 0.7; }\n          50%      { opacity: 0.95; filter: drop-shadow(0 0 3px var(--kz-accent)); }\n        }\n        @keyframes kzl-holo-flicker {\n          0%, 100% { opacity: 0; }\n          20%, 80% { opacity: 0.35; }\n          50%      { opacity: 0.65; }\n        }\n        @keyframes kzl-holo-elements-rise {\n          0%   { transform: translateY(10px); opacity: 0; }\n          50%  { opacity: 0.8; }\n          100% { transform: translateY(-15px); opacity: 0; }\n        }\n        @keyframes kzl-duck-look {\n          0%, 100% { transform: rotate(0deg); }\n          30%      { transform: rotate(-5deg); }\n          70%      { transform: rotate(5deg); }\n        }\n        @keyframes kzl-wing-type-l {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-3px) rotate(-4deg); }\n        }\n        @keyframes kzl-wing-type-r {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-3px) rotate(4deg); }\n        }\n\n        /* Flamingo Bot constant loop animations */\n        .kzl-flamingo-bot .kzl-head-group {\n          animation: kzl-flamingo-head-bob 5s ease-in-out infinite;\n        }\n        .kzl-flamingo-bot .kzl-flamingo-neck {\n          animation: kzl-flamingo-neck-sway 7s ease-in-out infinite;\n          transform-origin: 20px 74px;\n        }\n        .kzl-flamingo-bot .kzl-flamingo-wing {\n          animation: kzl-flamingo-wing-flap 4s ease-in-out infinite;\n        }\n\n        @keyframes kzl-flamingo-neck-sway {\n          0%, 100% { transform: rotate(0deg); }\n          50%      { transform: rotate(-3deg) scaleY(1.02); }\n        }\n        @keyframes kzl-flamingo-head-bob {\n          0%, 100% { transform: translate(8px, 12px) translateY(0) rotate(0deg); }\n          50%      { transform: translate(8px, 12px) translateY(-5px) rotate(-3deg); }\n        }\n        @keyframes kzl-flamingo-wing-flap {\n          0%, 100% { transform: translateY(0) rotate(0deg); }\n          50%      { transform: translateY(-2px) rotate(-6deg); }\n        }\n\n        /* Owl Bot constant loop animations */\n        .kzl-owl-bot {\n          animation: kzl-owl-sway 5s ease-in-out infinite;\n          transform-origin: center;\n        }\n        @keyframes kzl-owl-sway {\n          0%, 100% { transform: rotate(0deg) translateY(0); }\n          50%      { transform: rotate(-3deg) translateY(-2px); }\n        }\n\n        /* Treehouse hover glow */\n        .kzl-cyber-treehouse:hover .kzl-window-glow {\n          fill: #f59e0b;\n          filter: drop-shadow(0 0 10px #f59e0b);\n        }\n\n        /* Floating tech particles */\n        @keyframes kzl-float-up-down {\n          0%, 100% { transform: translateY(0); opacity: 0.4; }\n          50%      { transform: translateY(-24px); opacity: 0.95; }\n        }\n        .kzl-float-particle-1 { animation: kzl-float-up-down 4.2s ease-in-out infinite; }\n        .kzl-float-particle-2 { animation: kzl-float-up-down 5.2s ease-in-out infinite 1.2s; }\n        .kzl-float-particle-3 { animation: kzl-float-up-down 4.7s ease-in-out infinite 0.6s; }\n        .kzl-float-particle-4 { animation: kzl-float-up-down 6.2s ease-in-out infinite 2.2s; }\n\n        @media (max-width: 1024px) {\n          .kzl-mobile-hide {\n            display: none !important;\n          }\n        }\n/* Still: with animated={false}, off screen, and under reduced motion — every loop holds its first frame. */\n.kzl[data-still] *, .kzl[data-offscreen] * { animation-play-state: paused !important; }\n@media (prefers-reduced-motion: reduce) {\n  .kzl * { animation-play-state: paused !important; transition: none !important; }\n}\n`;\n\nexport type LandscapeProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> & {\n  /**\n   * `own`: the Krizaka dusk (indigo, cyan and magenta peaks). `brand`: the sky and the peaks in the host brand's\n   * accents (`.brand-<id>`). The birds and the phoenix keep their own colours.\n   * @default \"own\"\n   */\n  tone?: \"own\" | \"brand\";\n  /**\n   * The flock at work in the valley (hidden under 1024 px wide either way).\n   * @default true\n   */\n  flock?: boolean;\n  /**\n   * The phoenix and its river of two flames.\n   * @default true\n   */\n  phoenix?: boolean;\n  /**\n   * The slow loops (the sun, the stars, the flames, the birds). `false` holds the first frame; always held under\n   * `prefers-reduced-motion` and while off screen (with `MotionObserver`).\n   * @default true\n   */\n  animated?: boolean;\n  /**\n   * `absolute`: fills its positioned parent, anchored at the bottom (a backdrop). `relative`: a block in the flow — give\n   * it a height.\n   * @default \"absolute\"\n   */\n  position?: \"absolute\" | \"relative\";\n  /**\n   * Fades the bottom into the page's surface.\n   * @default true\n   */\n  fade?: boolean;\n};\n\n/** The Krizaka landscape: a decorative backdrop for a hero or a page's end (`aria-hidden`). */\nexport function Landscape({ tone = \"own\", flock = true, phoenix = true, animated = true, position = \"absolute\", fade = true, className, style, ...props }: LandscapeProps) {\n  const u = \"kzl\" + useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  const box: React.CSSProperties =\n    position === \"absolute\" ? { position: \"absolute\", inset: \"auto 0 0 0\", height: \"100%\", width: \"100%\" } : { position: \"relative\", width: \"100%\", height: 440 };\n  return (\n    <div\n      aria-hidden\n      data-motion-scope=\"\"\n      data-still={animated ? undefined : \"\"}\n      className={cn(\"kzl\", className)}\n      style={{ ...box, ...(TONES[tone] as React.CSSProperties), ...style }}\n      {...props}\n    >\n      <style>{CSS}</style>\n      <svg width=\"100%\" height=\"100%\" viewBox=\"0 50 1200 520\" preserveAspectRatio=\"xMidYMax slice\" fill=\"none\" style={{ display: \"block\", pointerEvents: \"none\" }}>\n        <defs>\n          {/* Vibrant Cyber Sun Glow */}\n          <radialGradient id={`${u}-sun-glow`} cx=\"50%\" cy=\"50%\" r=\"50%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-sun)\" stopOpacity=\"0.45\" />\n            <stop offset=\"30%\" stopColor=\"var(--kzl-sun-2)\" stopOpacity=\"0.28\" />\n            <stop offset=\"70%\" stopColor=\"var(--kzl-sun-3)\" stopOpacity=\"0.16\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity=\"0\" />\n          </radialGradient>\n\n          {/* Mountains Vibrant Gradients */}\n          <linearGradient id={`${u}-mtn-back`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-far)\" stopOpacity=\"0.75\" /> {/* indigo */}\n            <stop offset=\"50%\" stopColor=\"var(--kzl-far-2)\" stopOpacity=\"0.45\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n          <linearGradient id={`${u}-mtn-mid`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-mid)\" stopOpacity=\"0.7\" /> {/* cyan */}\n            <stop offset=\"50%\" stopColor=\"var(--kzl-mid-2)\" stopOpacity=\"0.4\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n          <linearGradient id={`${u}-mtn-front`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-near)\" stopOpacity=\"0.8\" /> {/* pink */}\n            <stop offset=\"50%\" stopColor=\"var(--kzl-near-2)\" stopOpacity=\"0.5\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n\n          {/* Vibrant Mascot Gradients */}\n          <linearGradient id={`${u}-falcon-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#ff9f00\" />\n            <stop offset=\"100%\" stopColor=\"#ff2a00\" />\n          </linearGradient>\n          <linearGradient id={`${u}-duck-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#f43f5e\" />\n            <stop offset=\"100%\" stopColor=\"#be123c\" />\n          </linearGradient>\n          <linearGradient id={`${u}-flamingo-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#3b82f6\" />\n            <stop offset=\"100%\" stopColor=\"#1d4ed8\" />\n          </linearGradient>\n          <linearGradient id={`${u}-owl-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#a78bfa\" />\n            <stop offset=\"100%\" stopColor=\"#6d28d9\" />\n          </linearGradient>\n\n          {/* Hologram Projections */}\n          <linearGradient id={`${u}-holo-grad`} x1=\"0%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n            <stop offset=\"0%\" stopColor=\"#10b981\" stopOpacity=\"0.5\" />\n            <stop offset=\"100%\" stopColor=\"#10b981\" stopOpacity=\"0\" />\n          </linearGradient>\n\n          {/* Rival flame gradients for the Cyber-Phoenix */}\n          <linearGradient id={`${u}-phoenix-gold-grad`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#ffb000\" />\n            <stop offset=\"100%\" stopColor=\"#ff3c00\" />\n          </linearGradient>\n          <linearGradient id={`${u}-phoenix-purple-grad`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#c084fc\" />\n            <stop offset=\"100%\" stopColor=\"#db2777\" />\n          </linearGradient>\n          <linearGradient id={`${u}-phoenix-body-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kz-surface-3)\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-2)\" />\n          </linearGradient>\n\n          {/* Glowing stream gradients */}\n          <linearGradient id={`${u}-gold-glow`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#ff3c00\" stopOpacity=\"0.95\" />\n            <stop offset=\"50%\" stopColor=\"#ffb000\" stopOpacity=\"0.75\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n          <linearGradient id={`${u}-purple-glow`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"#db2777\" stopOpacity=\"0.95\" />\n            <stop offset=\"50%\" stopColor=\"#a78bfa\" stopOpacity=\"0.75\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-0)\" />\n          </linearGradient>\n\n          {/* River mask to fade out at the bottom */}\n          <linearGradient id={`${u}-river-mask-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"85%\" stopColor=\"white\" />\n            <stop offset=\"100%\" stopColor=\"black\" />\n          </linearGradient>\n          <mask id={`${u}-river-fade-mask`}>\n            <rect x=\"0\" y=\"0\" width=\"1200\" height=\"1000\" fill={`url(#${u}-river-mask-grad)`} />\n          </mask>\n\n          {/* Cyber trees gradient */}\n          <linearGradient id={`${u}-tree-grad`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n            <stop offset=\"0%\" stopColor=\"var(--kz-accent)\" stopOpacity=\"0.35\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" />\n          </linearGradient>\n\n          {/* Cyber Bench Gradient */}\n          <linearGradient id={`${u}-bench-grad`} x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n            <stop offset=\"0%\" stopColor=\"var(--kz-surface-3)\" />\n            <stop offset=\"100%\" stopColor=\"var(--kz-surface-2)\" />\n          </linearGradient>\n\n          {/* Cyber Aurora Glows */}\n          <radialGradient id={`${u}-aurora-left`} cx=\"20%\" cy=\"30%\" r=\"50%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-aurora-l)\" stopOpacity=\"0.22\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity=\"0\" />\n          </radialGradient>\n          <radialGradient id={`${u}-aurora-right`} cx=\"80%\" cy=\"25%\" r=\"50%\">\n            <stop offset=\"0%\" stopColor=\"var(--kzl-aurora-r)\" stopOpacity=\"0.22\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" stopOpacity=\"0\" />\n          </radialGradient>\n        </defs>\n\n        <g transform=\"translate(0, 60)\">\n        {/* ─── Cyber Aurora Backdrop ─── */}\n        <circle cx=\"200\" cy=\"180\" r=\"600\" fill={`url(#${u}-aurora-left)`} />\n        <circle cx=\"1000\" cy=\"150\" r=\"600\" fill={`url(#${u}-aurora-right)`} />\n\n        {/* ─── Ethereal Sun and Sky Network Nodes (Constellations) ─── */}\n        <circle cx=\"600\" cy=\"200\" r=\"380\" fill={`url(#${u}-sun-glow)`} />\n        <circle cx=\"600\" cy=\"200\" r=\"64\" fill=\"var(--kzl-sun)\" opacity=\"0.16\" className=\"kzl-sun-pulsing\" />\n\n        {/* Constellation grid lines in the sky */}\n        <g opacity=\"0.3\" stroke=\"var(--kz-accent)\" strokeWidth=\"1\">\n          <line x1=\"300\" y1=\"120\" x2=\"380\" y2=\"80\" />\n          <line x1=\"380\" y1=\"80\" x2=\"450\" y2=\"110\" />\n          <line x1=\"450\" y1=\"110\" x2=\"300\" y2=\"120\" />\n          <line x1=\"450\" y1=\"110\" x2=\"520\" y2=\"60\" />\n          <line x1=\"750\" y1=\"80\" x2=\"840\" y2=\"130\" />\n          <line x1=\"840\" y1=\"130\" x2=\"900\" y2=\"70\" />\n          <line x1=\"900\" y1=\"70\" x2=\"750\" y2=\"80\" />\n        </g>\n        {/* Constellation node points */}\n        <g fill=\"var(--kz-accent)\" opacity=\"0.65\">\n          <circle cx=\"300\" cy=\"120\" r=\"3.5\" />\n          <circle cx=\"380\" cy=\"80\" r=\"5\" className=\"kzl-pulse-slow\" />\n          <circle cx=\"450\" cy=\"110\" r=\"3\" />\n          <circle cx=\"520\" cy=\"60\" r=\"4.5\" />\n          <circle cx=\"750\" cy=\"80\" r=\"4.5\" />\n          <circle cx=\"840\" cy=\"130\" r=\"3.5\" />\n          <circle cx=\"900\" cy=\"70\" r=\"6\" className=\"kzl-pulse-slow\" />\n        </g>\n\n        {/* ─── Layered Mountains (with Digital Contours) ─── */}\n        {/* Far Peaks */}\n        <path d=\"M 150 480 L 420 280 L 680 480 Z\" fill={`url(#${u}-mtn-back)`} stroke=\"var(--kzl-far-line)\" strokeWidth=\"1.5\" />\n        <path d=\"M 520 480 L 780 230 L 1050 480 Z\" fill={`url(#${u}-mtn-back)`} stroke=\"var(--kzl-far-line)\" strokeWidth=\"1.5\" />\n\n        {/* Mid Peaks */}\n        <path d=\"M -50 500 L 220 320 L 500 500 Z\" fill={`url(#${u}-mtn-mid)`} stroke=\"var(--kzl-mid-line)\" strokeWidth=\"1.5\" />\n        <path d=\"M 700 500 L 980 300 L 1250 500 Z\" fill={`url(#${u}-mtn-mid)`} stroke=\"var(--kzl-mid-line)\" strokeWidth=\"1.5\" />\n\n        {/* Wireframe grids on mountains (Contour lines) */}\n        <g stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.18\">\n          {/* Mid peak left contours */}\n          <line x1=\"30\" y1=\"440\" x2=\"410\" y2=\"440\" />\n          <line x1=\"85\" y1=\"400\" x2=\"355\" y2=\"400\" />\n          <line x1=\"140\" y1=\"360\" x2=\"300\" y2=\"360\" />\n          {/* Mid peak right contours */}\n          <line x1=\"770\" y1=\"450\" x2=\"1180\" y2=\"450\" />\n          <line x1=\"825\" y1=\"410\" x2=\"1125\" y2=\"410\" />\n          <line x1=\"880\" y1=\"370\" x2=\"1070\" y2=\"370\" />\n        </g>\n\n        {/* Front Peaks */}\n        <path d=\"M 100 520 L 360 380 L 620 520 Z\" fill={`url(#${u}-mtn-front)`} stroke=\"var(--kzl-near-line)\" strokeWidth=\"1.8\" />\n        <path d=\"M 580 520 L 850 350 L 1100 520 Z\" fill={`url(#${u}-mtn-front)`} stroke=\"var(--kzl-near-line)\" strokeWidth=\"1.8\" />\n\n        {phoenix && (\n          <>\n        {/* ─── Cyber-Phoenix & Dual Glowing Flame Trails ─── */}\n        {/* Dual Cascading Flame Trails */}\n        {/* Left Purple Flame Trail */}\n        <path\n          d=\"M 590 340 C 570 370, 610 390, 590 410 C 570 430, 490 440, 510 480 C 530 520, 670 530, 700 560 C 720 580, 750 600, 730 630 C 710 660, 630 670, 650 710 C 660 730, 690 740, 700 760 C 710 780, 670 800, 650 830 C 630 860, 680 890, 690 920 C 695 935, 705 945, 710 1000\"\n          fill=\"none\"\n          stroke={`url(#${u}-purple-glow)`}\n          strokeWidth=\"6\"\n          strokeLinecap=\"round\"\n          opacity=\"0.6\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            filter: \"drop-shadow(0 0 6px rgba(219, 39, 119, 0.4))\",\n          }}\n        />\n        <path\n          d=\"M 590 340 C 570 370, 610 390, 590 410 C 570 430, 490 440, 510 480 C 530 520, 670 530, 700 560 C 720 580, 750 600, 730 630 C 710 660, 630 670, 650 710 C 660 730, 690 740, 700 760 C 710 780, 670 800, 650 830 C 630 860, 680 890, 690 920 C 695 935, 705 945, 710 1000\"\n          fill=\"none\"\n          stroke=\"#db2777\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          opacity=\"0.9\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            strokeDasharray: \"25, 20\",\n            animation: \"kzl-phoenix-flow-purple 8s linear infinite\",\n            pointerEvents: \"none\",\n            filter: \"drop-shadow(0 0 3px #db2777)\",\n          }}\n        />\n\n        {/* Right Gold Flame Trail */}\n        <path\n          d=\"M 610 340 C 590 370, 630 390, 610 410 C 590 430, 510 440, 530 480 C 550 520, 690 530, 720 560 C 740 580, 770 600, 750 630 C 730 660, 650 670, 670 710 C 680 730, 710 740, 720 760 C 730 780, 690 800, 670 830 C 650 860, 700 890, 710 920 C 715 935, 725 945, 730 1000\"\n          fill=\"none\"\n          stroke={`url(#${u}-gold-glow)`}\n          strokeWidth=\"6\"\n          strokeLinecap=\"round\"\n          opacity=\"0.6\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            filter: \"drop-shadow(0 0 6px rgba(251, 191, 36, 0.4))\",\n          }}\n        />\n        <path\n          d=\"M 610 340 C 590 370, 630 390, 610 410 C 590 430, 510 440, 530 480 C 550 520, 690 530, 720 560 C 740 580, 770 600, 750 630 C 730 660, 650 670, 670 710 C 680 730, 710 740, 720 760 C 730 780, 690 800, 670 830 C 650 860, 700 890, 710 920 C 715 935, 725 945, 730 1000\"\n          fill=\"none\"\n          stroke=\"#fbbf24\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          opacity=\"0.9\"\n          mask={`url(#${u}-river-fade-mask)`}\n          style={{\n            strokeDasharray: \"35, 15\",\n            animation: \"kzl-phoenix-flow-gold 6s linear infinite\",\n            pointerEvents: \"none\",\n            filter: \"drop-shadow(0 0 3px #fbbf24)\",\n          }}\n        />\n\n        {/* Hoverable Cyber-Phoenix Soaring in the Valley Center */}\n        <g className=\"kzl-cyber-phoenix\" style={{ cursor: \"pointer\", pointerEvents: \"auto\" }}>\n          {/* Main Body diamond capsule */}\n          <polygon\n            points=\"600,310 608,325 600,345 592,325\"\n            fill={`url(#${u}-phoenix-body-grad)`}\n            stroke=\"var(--kz-border-strong)\"\n            strokeWidth=\"1.2\"\n          />\n          {/* Glowing Phoenix Core */}\n          <circle cx=\"600\" cy=\"325\" r=\"3\" fill=\"#ffef5c\" className=\"kzl-phoenix-core\" />\n\n          {/* Head */}\n          <circle cx=\"600\" cy=\"302\" r=\"6\" fill={`url(#${u}-phoenix-body-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n          {/* Visor */}\n          <rect x=\"598\" y=\"300\" width=\"4\" height=\"2\" rx=\"0.5\" fill=\"#00f2fe\" />\n          {/* Head Crest */}\n          <polygon points=\"600,296 603,290 600,293 597,290\" fill=\"#ff3c00\" />\n\n          {/* Left Wing (Purple mechanical fire) */}\n          <path\n            d=\"M 592 322 C 555 310, 520 325, 498 348 C 525 348, 545 338, 568 340 C 582 341, 588 333, 592 322 Z\"\n            fill={`url(#${u}-phoenix-purple-grad)`}\n            stroke=\"var(--kz-border-strong)\"\n            strokeWidth=\"1\"\n            className=\"kzl-phoenix-wing-l\"\n            style={{ transformOrigin: \"592px 322px\" }}\n          />\n\n          {/* Right Wing (Gold mechanical fire) */}\n          <path\n            d=\"M 608 322 C 645 310, 680 325, 702 348 C 675 348, 655 338, 632 340 C 618 341, 612 333, 608 322 Z\"\n            fill={`url(#${u}-phoenix-gold-grad)`}\n            stroke=\"var(--kz-border-strong)\"\n            strokeWidth=\"1\"\n            className=\"kzl-phoenix-wing-r\"\n            style={{ transformOrigin: \"608px 322px\" }}\n          />\n        </g>\n\n          </>\n        )}\n        {/* ─── Cyber Trees & Hexagonal Foliage (Nature + Tech) ─── */}\n        {/* Left Tree */}\n        <g transform=\"translate(180, 360)\">\n          {/* Server trunk */}\n          <line x1=\"0\" y1=\"120\" x2=\"0\" y2=\"40\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          <rect x=\"-8\" y=\"50\" width=\"16\" height=\"28\" rx=\"2\" fill=\"var(--kz-surface-2)\" stroke=\"var(--kz-border-subtle)\" />\n          {/* LED dots on trunk */}\n          <circle cx=\"0\" cy=\"58\" r=\"1.5\" fill=\"var(--kz-accent)\" />\n          <circle cx=\"0\" cy=\"66\" r=\"1.5\" fill=\"var(--kz-accent)\" opacity=\"0.6\" />\n          {/* Hexagonal foliage */}\n          <polygon points=\"0,-10 35,10 35,50 0,70 -35,50 -35,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.4\" />\n          <polygon points=\"0,-5 25,10 25,40 0,55 -25,40 -25,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.6\" />\n        </g>\n\n        {/* Treehouse Tree (Center-Left) */}\n        <g transform=\"translate(420, 320)\">\n          {/* Trunk */}\n          <line x1=\"0\" y1=\"180\" x2=\"0\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"5\" />\n          <line x1=\"0\" y1=\"110\" x2=\"35\" y2=\"90\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"3.5\" />\n          {/* Foliage */}\n          <polygon points=\"0,-20 52,10 52,70 0,100 -52,70 -52,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.35\" />\n          <polygon points=\"0,-10 38,10 38,55 0,75 -38,55 -38,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.5\" />\n\n          {/* Hexagonal Treehouse */}\n          <g transform=\"translate(0, 50)\" style={{ pointerEvents: \"auto\", cursor: \"pointer\" }} className=\"kzl-cyber-treehouse\">\n            <polygon points=\"0,-30 26,-15 26,15 0,30 -26,15 -26,-15\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-accent)\" strokeWidth=\"1.5\" />\n            {/* Window */}\n            <circle cx=\"0\" cy=\"0\" r=\"8\" fill=\"var(--kz-surface-1)\" stroke=\"var(--kz-border-strong)\" />\n            <circle cx=\"0\" cy=\"0\" r=\"4\" fill=\"var(--kz-accent)\" className=\"kzl-window-glow\" />\n            {/* Ladder */}\n            <path d=\"M -6 30 L -6 95 M 6 30 L 6 95 M -6 42 L 6 42 M -6 54 L 6 54 M -6 66 L 6 66 M -6 78 L 6 78 M -6 90 L 6 90\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.5\" />\n            {/* Animated green local data pulses rising from treehouse */}\n            <circle cx=\"0\" cy=\"-45\" r=\"3\" fill=\"#10b981\" className=\"kzl-rising-pulse-1\" />\n            <circle cx=\"15\" cy=\"-35\" r=\"2\" fill=\"#10b981\" className=\"kzl-rising-pulse-2\" />\n          </g>\n        </g>\n\n        {/* Right Tree */}\n        <g transform=\"translate(1000, 340)\">\n          <line x1=\"0\" y1=\"160\" x2=\"0\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          <polygon points=\"0,-15 42,10 42,60 0,85 -42,60 -42,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.4\" />\n          <polygon points=\"0,-5 28,10 28,42 0,60 -28,42 -28,10\" fill={`url(#${u}-tree-grad)`} stroke=\"var(--kz-accent)\" strokeWidth=\"1.2\" opacity=\"0.6\" />\n        </g>\n\n        {/* ─── Cyber Tech Bench (Center-Right) ─── */}\n        <g transform=\"translate(740, 480)\">\n          {/* Bench support legs */}\n          <line x1=\"20\" y1=\"35\" x2=\"20\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          <line x1=\"140\" y1=\"35\" x2=\"140\" y2=\"60\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"4\" />\n          {/* Bench seat */}\n          <rect x=\"0\" y=\"22\" width=\"160\" height=\"12\" rx=\"4\" fill={`url(#${u}-bench-grad)`} stroke=\"var(--kz-border-default)\" strokeWidth=\"1.2\" />\n          {/* Bench backrest */}\n          <rect x=\"0\" y=\"0\" width=\"160\" height=\"10\" rx=\"3\" fill={`url(#${u}-bench-grad)`} stroke=\"var(--kz-border-default)\" strokeWidth=\"1.2\" transform=\"rotate(-5, 80, 5)\" />\n          {/* Backrest brackets */}\n          <line x1=\"15\" y1=\"10\" x2=\"15\" y2=\"24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"3\" />\n          <line x1=\"145\" y1=\"10\" x2=\"145\" y2=\"24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"3\" />\n        </g>\n\n        {flock && (\n          <>\n        {/* ─── MASCOT BIRD 4: Cyber Owl (Teal/Indigo - Left Tree) ─── */}\n        <g transform=\"translate(180, 275) scale(1.4)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-20\" y=\"-15\" width=\"40\" height=\"70\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-owl-bot\">\n            {/* Shadow */}\n            <ellipse cx=\"0\" cy=\"50\" rx=\"16\" ry=\"4\" fill=\"rgba(0,0,0,0.15)\" />\n            {/* Body */}\n            <path\n              d=\"M -15,10 C -15,-10, 15,-10, 15,10 C 15,30, 10,45, 0,45 C -10,45, -15,30, -15,10 Z\"\n              fill={`url(#${u}-owl-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.2\"\n            />\n            {/* Belly plate */}\n            <path\n              d=\"M -8,15 C -8,5, 8,5, 8,15 C 8,28, 5,35, 0,35 C -5,35, -8,28, -8,15 Z\"\n              fill=\"#00f2fe\"\n              opacity=\"0.35\"\n            />\n            {/* Eyes */}\n            <circle cx=\"-6\" cy=\"2\" r=\"5\" fill=\"var(--kz-surface-0)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            <circle cx=\"6\" cy=\"2\" r=\"5\" fill=\"var(--kz-surface-0)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            <circle cx=\"-6\" cy=\"2\" r=\"2\" fill=\"#00ff66\" className=\"kzl-owl-eye\" />\n            <circle cx=\"6\" cy=\"2\" r=\"2\" fill=\"#00ff66\" className=\"kzl-owl-eye\" />\n            {/* Beak */}\n            <polygon points=\"-2,4 2,4 0,10\" fill=\"#fbbf24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            {/* Horns / Ears */}\n            <polygon points=\"-12,-8 -6,-4 -14,2\" fill=\"#7c3aed\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            <polygon points=\"12,-8 6,-4 14,2\" fill=\"#7c3aed\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n          </g>\n        </g>\n\n        {/* ─── MASCOT BIRD 1: Cyber-Sentry Falcon (Orange - Left) ─── */}\n        <g transform=\"translate(120, 360) scale(1.65)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-10\" y=\"0\" width=\"70\" height=\"90\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-falcon-bot\">\n            {/* Shadow */}\n            <ellipse cx=\"25\" cy=\"85\" rx=\"30\" ry=\"6\" fill=\"rgba(0,0,0,0.15)\" />\n            \n            {/* Legs */}\n            <line x1=\"16\" y1=\"65\" x2=\"12\" y2=\"85\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n            <line x1=\"34\" y1=\"65\" x2=\"38\" y2=\"85\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n            {/* Feet claws */}\n            <path d=\"M 6 85 L 14 85 M 34 85 L 44 85\" stroke=\"#f97316\" strokeWidth=\"3\" strokeLinecap=\"round\" />\n\n            {/* Body */}\n            <path\n              d=\"M 5 35 C 5 20, 45 20, 45 35 C 45 58, 38 68, 25 68 C 12 68, 5 58, 5 35 Z\"\n              fill={`url(#${u}-falcon-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.5\"\n            />\n            {/* Belly plate */}\n            <path\n              d=\"M 12 38 C 12 28, 38 28, 38 38 C 38 52, 32 58, 25 58 C 18 58, 12 52, 12 38 Z\"\n              fill=\"#ff9800\"\n              opacity=\"0.85\"\n            />\n\n            {/* Wings */}\n            <path\n              d=\"M 2 30 C -8 40, -4 60, 10 58 C 5 50, 4 38, 2 30 Z\"\n              fill=\"#d84315\"\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.2\"\n              className=\"kzl-wing-left\"\n              style={{ transformOrigin: \"2px 30px\" }}\n            />\n            <path\n              d=\"M 48 30 C 58 40, 54 60, 40 58 C 45 50, 46 38, 48 30 Z\"\n              fill=\"#d84315\"\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.2\"\n              className=\"kzl-wing-right\"\n              style={{ transformOrigin: \"48px 30px\" }}\n            />\n\n            {/* Tail feathers */}\n            <path d=\"M 20 66 L 15 80 L 25 76 L 35 80 L 30 66\" fill=\"#bf360c\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n\n            {/* Head */}\n            <g className=\"kzl-head-group\" style={{ transformOrigin: \"25px 28px\" }}>\n              <circle cx=\"25\" cy=\"22\" r=\"18\" fill={`url(#${u}-falcon-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.5\" />\n              \n              {/* Beak */}\n              <polygon points=\"21,24 29,24 25,36\" fill=\"#ffb300\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n\n              {/* Visor */}\n              <rect x=\"9\" y=\"10\" width=\"32\" height=\"10\" rx=\"3\" fill=\"var(--kz-surface-0)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              {/* Lenses */}\n              <circle cx=\"17\" cy=\"15\" r=\"2.5\" fill=\"#00f2fe\" className=\"kzl-falcon-eye\" />\n              <circle cx=\"33\" cy=\"15\" r=\"2.5\" fill=\"#00f2fe\" className=\"kzl-falcon-eye\" />\n              {/* Wire */}\n              <path d=\"M 41 15 C 44 15, 43 25, 41 28\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" fill=\"none\" />\n            </g>\n\n            {/* Sentry Scan Laser Overlay */}\n            <polygon points=\"25,28 -60,180 110,180\" fill={`url(#${u}-holo-grad)`} className=\"kzl-sentry-laser\" opacity=\"0\" style={{ transformOrigin: \"25px 28px\", pointerEvents: \"none\" }} />\n          </g>\n        </g>\n\n        {/* ─── MASCOT BIRD 2: Developer Duck (Pink - Center Bench) ─── */}\n        <g transform=\"translate(750, 355) scale(1.75)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-10\" y=\"5\" width=\"70\" height=\"75\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-developer-duck\">\n            {/* Sitting body */}\n            <path\n              d=\"M 5 45 C 5 30, 45 30, 45 45 C 45 62, 38 72, 25 72 C 12 72, 5 62, 5 45 Z\"\n              fill={`url(#${u}-duck-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.5\"\n            />\n            {/* Belly light */}\n            <path\n              d=\"M 12 48 C 12 40, 38 40, 38 48 C 38 60, 32 64, 25 64 C 18 64, 12 60, 12 48 Z\"\n              fill=\"#f472b6\"\n              opacity=\"0.85\"\n            />\n\n            {/* Wings typing */}\n            <path\n              d=\"M -2 40 C -8 46, -4 55, 10 52\"\n              fill=\"none\"\n              stroke=\"#db2777\"\n              strokeWidth=\"8\"\n              strokeLinecap=\"round\"\n              className=\"kzl-wing-left-type\"\n            />\n            <path\n              d=\"M 52 40 C 58 46, 54 55, 40 52\"\n              fill=\"none\"\n              stroke=\"#db2777\"\n              strokeWidth=\"8\"\n              strokeLinecap=\"round\"\n              className=\"kzl-wing-right-type\"\n            />\n\n            {/* Head */}\n            <g className=\"kzl-head-group\" style={{ transformOrigin: \"25px 32px\" }}>\n              <circle cx=\"25\" cy=\"24\" r=\"16\" fill={`url(#${u}-duck-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.5\" />\n              {/* Duck Beak */}\n              <path\n                d=\"M 12 24 C 12 20, 22 18, 25 18 C 28 18, 38 20, 38 24 C 38 28, 28 32, 25 32 C 22 32, 12 28, 12 24 Z\"\n                fill=\"#fbbf24\"\n                stroke=\"var(--kz-border-strong)\"\n                strokeWidth=\"1.2\"\n              />\n              {/* Eyes */}\n              <circle cx=\"19\" cy=\"16\" r=\"2\" fill=\"var(--kz-text-primary)\" className=\"kzl-duck-eye\" />\n              <circle cx=\"31\" cy=\"16\" r=\"2\" fill=\"var(--kz-text-primary)\" className=\"kzl-duck-eye\" />\n              {/* Glasses */}\n              <circle cx=\"19\" cy=\"16\" r=\"4.5\" fill=\"none\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              <circle cx=\"31\" cy=\"16\" r=\"4.5\" fill=\"none\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              <line x1=\"23.5\" y1=\"16\" x2=\"26.5\" y2=\"16\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n            </g>\n\n            {/* Holographic Laptop */}\n            <g transform=\"translate(10, 52)\">\n              {/* Base */}\n              <polygon points=\"-8,16 38,16 30,22 -14,22\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n              {/* Hologram screen */}\n              <polygon\n                points=\"-4,14 34,14 30,-2 -8,-2\"\n                fill=\"var(--kz-accent-soft)\"\n                stroke=\"var(--kz-accent)\"\n                strokeWidth=\"1\"\n                opacity=\"0.8\"\n                className=\"kzl-laptop-screen\"\n              />\n              {/* Glowing prompt line */}\n              <line x1=\"-2\" y1=\"4\" x2=\"24\" y2=\"4\" stroke=\"var(--kz-accent)\" strokeWidth=\"1.5\" opacity=\"0.9\" />\n              <line x1=\"-2\" y1=\"8\" x2=\"16\" y2=\"8\" stroke=\"var(--kz-accent)\" strokeWidth=\"1.5\" opacity=\"0.6\" />\n              \n              {/* Holographic Projection */}\n              <polygon points=\"12,-2 -40,-80 70,-80\" fill={`url(#${u}-holo-grad)`} opacity=\"0\" className=\"kzl-holo-projection\" style={{ pointerEvents: \"none\" }} />\n              {/* Tiny code elements inside hologram */}\n              <g className=\"kzl-holo-elements\" opacity=\"0\">\n                <rect x=\"-10\" y=\"-45\" width=\"22\" height=\"6\" rx=\"2\" fill=\"var(--kz-surface-3)\" stroke=\"#10b981\" strokeWidth=\"0.5\" />\n                <rect x=\"18\" y=\"-35\" width=\"18\" height=\"6\" rx=\"2\" fill=\"var(--kz-surface-3)\" stroke=\"#10b981\" strokeWidth=\"0.5\" />\n              </g>\n            </g>\n          </g>\n        </g>\n\n        {/* ─── MASCOT BIRD 3: High-Neck Flamingo-Bot (Blue - Right) ─── */}\n        <g transform=\"translate(1000, 270) scale(1.75)\" className=\"kzl-bird-hitbox kzl-mobile-hide\">\n          <rect x=\"-15\" y=\"0\" width=\"65\" height=\"165\" fill=\"transparent\" style={{ cursor: \"pointer\", pointerEvents: \"all\" }} />\n          <g className=\"kzl-bird-graphics kzl-flamingo-bot\">\n            {/* Shadow */}\n            <ellipse cx=\"20\" cy=\"160\" rx=\"22\" ry=\"5\" fill=\"rgba(0,0,0,0.15)\" />\n\n            {/* Long legs */}\n            <line x1=\"12\" y1=\"105\" x2=\"12\" y2=\"160\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"2.5\" />\n            <line x1=\"26\" y1=\"105\" x2=\"28\" y2=\"160\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"2.5\" />\n            {/* Joints */}\n            <circle cx=\"12\" cy=\"130\" r=\"2.5\" fill=\"#3b82f6\" />\n            <circle cx=\"27\" cy=\"130\" r=\"2.5\" fill=\"#3b82f6\" />\n\n            {/* Body */}\n            <path\n              d=\"M 2 80 C 2 68, 38 68, 38 80 C 38 108, 28 112, 20 112 C 12 112, 2 108, 2 80 Z\"\n              fill={`url(#${u}-flamingo-grad)`}\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1.5\"\n            />\n\n            {/* Wing (Vibrant contrast) */}\n            <path\n              d=\"M 8 82 L 20 74 L 32 82 L 32 94 L 20 102 L 8 94 Z\"\n              fill=\"#ec4899\"\n              stroke=\"var(--kz-border-strong)\"\n              strokeWidth=\"1\"\n              opacity=\"0.95\"\n              className=\"kzl-flamingo-wing\"\n            />\n\n            {/* Curved neck */}\n            <path\n              d=\"M 20 74 C 20 60, -2 40, 8 18\"\n              fill=\"none\"\n              stroke={`url(#${u}-flamingo-grad)`}\n              strokeWidth=\"6\"\n              strokeLinecap=\"round\"\n              className=\"kzl-flamingo-neck\"\n            />\n\n            {/* Head */}\n            <g className=\"kzl-head-group\" transform=\"translate(8, 12)\" style={{ transformOrigin: \"0px 0px\" }}>\n              <circle cx=\"0\" cy=\"0\" r=\"10\" fill={`url(#${u}-flamingo-grad)`} stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              \n              {/* Eye */}\n              <circle cx=\"-3\" cy=\"-2\" r=\"1.5\" fill=\"var(--kz-surface-0)\" />\n              <circle cx=\"-3\" cy=\"-2\" r=\"0.6\" fill=\"#f43f5e\" className=\"kzl-flamingo-eye\" />\n\n              {/* Beak */}\n              <path d=\"M -8 -2 C -18 2, -16 14, -22 18 C -14 10, -8 4, -8 -2 Z\" fill=\"#fbbf24\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n\n              {/* Hat */}\n              <path d=\"M -8 -8 L 8 -8 L 6 -14 L -6 -14 Z\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1.2\" />\n              <ellipse cx=\"0\" cy=\"-8\" rx=\"10\" ry=\"1.5\" fill=\"var(--kz-surface-3)\" stroke=\"var(--kz-border-strong)\" strokeWidth=\"1\" />\n            </g>\n          </g>\n        </g>\n\n          </>\n        )}\n        {/* ─── Floating Glowing Tech Particles ─── */}\n        <circle cx=\"340\" cy=\"300\" r=\"6\" fill=\"#00f2fe\" opacity=\"0.75\" className=\"kzl-float-particle-1\" />\n        <circle cx=\"520\" cy=\"220\" r=\"5\" fill=\"#a855f7\" opacity=\"0.65\" className=\"kzl-float-particle-2\" />\n        <circle cx=\"710\" cy=\"310\" r=\"6.5\" fill=\"#3b82f6\" opacity=\"0.7\" className=\"kzl-float-particle-3\" />\n        <circle cx=\"920\" cy=\"250\" r=\"5\" fill=\"#00f2fe\" opacity=\"0.8\" className=\"kzl-float-particle-4\" />\n        </g>\n      </svg>\n      {fade && <div className=\"kzl-fade\" />}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/legal-page.d.ts

@@ -0,0 +1,34 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+interface LegalSection {
+    /** The section's anchor. */
+    id: string;
+    /** Its title. */
+    title: string;
+    /** Its paragraphs. */
+    children: React.ReactNode;
+}
+type LegalPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The way back. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** The page's `h1` (`Privacy policy`). */
+    title: React.ReactNode;
+    /** In force since (`Last updated: October 2026`). */
+    updated?: React.ReactNode;
+    /** The short version, in plain words, before the sections. */
+    summary?: React.ReactNode;
+    /** The contents' label (`On this page`). */
+    tocLabel: string;
+    /** The sections. */
+    sections: readonly LegalSection[];
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A legal page: hero with the date, a plain-words summary, the sections with their contents. */
+declare function LegalPage({ back, title, updated, summary, tocLabel, sections, linkAs, ...props }: LegalPageProps): React.JSX.Element;
+
+export { LegalPage, type LegalPageProps, type LegalSection };

package/dist/legal-page.js

@@ -0,0 +1,18 @@
+// src/legal-page/legal-page.tsx
+import { Page, Section } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { Toc, TocLayout } from "@krizaka/ui/toc";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LegalPage({ back, title, updated, summary, tocLabel, sections, linkAs, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, title, lead: updated, backdrop: "plain" }),
+    /* @__PURE__ */ jsx(Page, { className: "kz-tpl-longform", children: /* @__PURE__ */ jsxs(TocLayout, { toc: /* @__PURE__ */ jsx(Toc, { label: tocLabel, items: sections.map((s) => ({ id: s.id, label: s.title })) }), children: [
+      summary && /* @__PURE__ */ jsx("div", { className: "kz-cta kz-tpl-summary", children: summary }),
+      sections.map((s, i) => /* @__PURE__ */ jsx(Section, { id: s.id, title: s.title, headingSize: "sm", spacing: "sm", size: "narrow", divider: i > 0 || Boolean(summary), children: /* @__PURE__ */ jsx("div", { className: "kz-tpl-prose", children: s.children }) }, s.id))
+    ] }) })
+  ] });
+}
+export {
+  LegalPage
+};
+//# sourceMappingURL=legal-page.js.map

package/dist/legal-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/legal-page/legal-page.tsx"],"sourcesContent":["// Server-safe. A policy or terms (TocLayout): the hero with the date in force, then the sections in a narrow reading\n// column with their contents beside — chips on a phone — and a summary in plain words first when there is one.\nimport { Page, Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport { Toc, TocLayout } from \"@krizaka/ui/toc\";\nimport type * as React from \"react\";\n\nexport interface LegalSection {\n  /** The section's anchor. */\n  id: string;\n  /** Its title. */\n  title: string;\n  /** Its paragraphs. */\n  children: React.ReactNode;\n}\n\nexport type LegalPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** The page's `h1` (`Privacy policy`). */\n  title: React.ReactNode;\n  /** In force since (`Last updated: October 2026`). */\n  updated?: React.ReactNode;\n  /** The short version, in plain words, before the sections. */\n  summary?: React.ReactNode;\n  /** The contents' label (`On this page`). */\n  tocLabel: string;\n  /** The sections. */\n  sections: readonly LegalSection[];\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A legal page: hero with the date, a plain-words summary, the sections with their contents. */\nexport function LegalPage({ back, title, updated, summary, tocLabel, sections, linkAs, ...props }: LegalPageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} title={title} lead={updated} backdrop=\"plain\" />\n      <Page className=\"kz-tpl-longform\">\n        <TocLayout toc={<Toc label={tocLabel} items={sections.map((s) => ({ id: s.id, label: s.title }))} />}>\n          {summary && <div className=\"kz-cta kz-tpl-summary\">{summary}</div>}\n          {sections.map((s, i) => (\n            <Section key={s.id} id={s.id} title={s.title} headingSize=\"sm\" spacing=\"sm\" size=\"narrow\" divider={i > 0 || Boolean(summary)}>\n              <div className=\"kz-tpl-prose\">{s.children}</div>\n            </Section>\n          ))}\n        </TocLayout>\n      </Page>\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,MAAM,eAAe;AAE9B,SAAS,gBAAgB;AACzB,SAAS,KAAK,iBAAiB;AAiCzB,cAEE,YAFF;AAHC,SAAS,UAAU,EAAE,MAAM,OAAO,SAAS,SAAS,UAAU,UAAU,QAAQ,GAAG,MAAM,GAAmB;AACjH,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,OAAc,MAAM,SAAS,UAAS,SAAQ;AAAA,IACpF,oBAAC,QAAK,WAAU,mBACd,+BAAC,aAAU,KAAK,oBAAC,OAAI,OAAO,UAAU,OAAO,SAAS,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,OAAO,EAAE,MAAM,EAAE,GAAG,GAC/F;AAAA,iBAAW,oBAAC,SAAI,WAAU,yBAAyB,mBAAQ;AAAA,MAC3D,SAAS,IAAI,CAAC,GAAG,MAChB,oBAAC,WAAmB,IAAI,EAAE,IAAI,OAAO,EAAE,OAAO,aAAY,MAAK,SAAQ,MAAK,MAAK,UAAS,SAAS,IAAI,KAAK,QAAQ,OAAO,GACzH,8BAAC,SAAI,WAAU,gBAAgB,YAAE,UAAS,KAD9B,EAAE,EAEhB,CACD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/longform-page.d.ts

@@ -0,0 +1,42 @@
+import { LinkComponent } from '@krizaka/ui/page-hero';
+import * as React from 'react';
+
+interface LongformChapter {
+    /** The chapter's anchor. */
+    id: string;
+    /** Its title. */
+    title: React.ReactNode;
+    /** Its text (paragraphs). */
+    children: React.ReactNode;
+    /** A sentence pulled into the margin. */
+    pull?: React.ReactNode;
+    /** A figure under the text (an image, a schema, a quote by a bird). */
+    figure?: React.ReactNode;
+}
+type LongformPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The brand the page wears (`.brand-<id>`). */
+    brand?: string;
+    /** The way back. */
+    back?: {
+        href: string;
+        label: string;
+    };
+    /** A mono line above the title. */
+    eyebrow?: React.ReactNode;
+    /** The page's `h1`. */
+    title: React.ReactNode;
+    /** The standfirst. */
+    lead?: React.ReactNode;
+    /** Beside the hero: the page's bird, an illustration. */
+    aside?: React.ReactNode;
+    /** The chapters, in order. */
+    chapters: readonly LongformChapter[];
+    /** After the chapters: the end note, a call. */
+    children?: React.ReactNode;
+    /** The app's link component (Next's `Link`). */
+    linkAs?: LinkComponent;
+};
+/** A long read: hero, then numbered chapters with pull quotes in the margin and figures that break out. */
+declare function LongformPage({ brand, back, eyebrow, title, lead, aside, chapters, linkAs, className, children, ...props }: LongformPageProps): React.JSX.Element;
+
+export { type LongformChapter, LongformPage, type LongformPageProps };

package/dist/longform-page.js

@@ -0,0 +1,29 @@
+import {
+  cn
+} from "./chunk-KNBYZGSQ.js";
+
+// src/longform-page/longform-page.tsx
+import { Page } from "@krizaka/ui/page";
+import { PageHero } from "@krizaka/ui/page-hero";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LongformPage({ brand, back, eyebrow, title, lead, aside, chapters, linkAs, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
+    /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, aside }),
+    /* @__PURE__ */ jsxs(Page, { className: "kz-tpl-longform", children: [
+      /* @__PURE__ */ jsx("div", { className: "kz-tpl-chapters", children: chapters.map((c, i) => /* @__PURE__ */ jsxs("section", { className: "kz-tpl-chapter", "aria-labelledby": c.id, "data-reveal": "", children: [
+        /* @__PURE__ */ jsx("span", { className: "kz-tpl-chapter-n", "aria-hidden": true, children: String(i + 1).padStart(2, "0") }),
+        /* @__PURE__ */ jsxs("div", { className: "kz-tpl-chapter-body", children: [
+          /* @__PURE__ */ jsx("h2", { id: c.id, children: c.title }),
+          c.children
+        ] }),
+        c.pull && /* @__PURE__ */ jsx("aside", { className: "kz-tpl-chapter-aside", children: /* @__PURE__ */ jsx("p", { className: "kz-tpl-pull", children: c.pull }) }),
+        c.figure && /* @__PURE__ */ jsx("figure", { className: "kz-tpl-chapter-figure", children: c.figure })
+      ] }, c.id)) }),
+      children
+    ] })
+  ] });
+}
+export {
+  LongformPage
+};
+//# sourceMappingURL=longform-page.js.map

package/dist/longform-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/longform-page/longform-page.tsx"],"sourcesContent":["// Server-safe. A long read — a story, an essay, a case (blocks.css `.kz-tpl-chapters`): the hero, then chapters, each\n// with its big outlined number, its title, its text in a reading column, a pull quote in the margin and a figure that\n// breaks out to the margin's width; the contents as chips on a phone. Editorial, not cards.\nimport { Page } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface LongformChapter {\n  /** The chapter's anchor. */\n  id: string;\n  /** Its title. */\n  title: React.ReactNode;\n  /** Its text (paragraphs). */\n  children: React.ReactNode;\n  /** A sentence pulled into the margin. */\n  pull?: React.ReactNode;\n  /** A figure under the text (an image, a schema, a quote by a bird). */\n  figure?: React.ReactNode;\n}\n\nexport type LongformPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** The standfirst. */\n  lead?: React.ReactNode;\n  /** Beside the hero: the page's bird, an illustration. */\n  aside?: React.ReactNode;\n  /** The chapters, in order. */\n  chapters: readonly LongformChapter[];\n  /** After the chapters: the end note, a call. */\n  children?: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A long read: hero, then numbered chapters with pull quotes in the margin and figures that break out. */\nexport function LongformPage({ brand, back, eyebrow, title, lead, aside, chapters, linkAs, className, children, ...props }: LongformPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} aside={aside} />\n      <Page className=\"kz-tpl-longform\">\n        <div className=\"kz-tpl-chapters\">\n          {chapters.map((c, i) => (\n            <section key={c.id} className=\"kz-tpl-chapter\" aria-labelledby={c.id} data-reveal=\"\">\n              <span className=\"kz-tpl-chapter-n\" aria-hidden>\n                {String(i + 1).padStart(2, \"0\")}\n              </span>\n              <div className=\"kz-tpl-chapter-body\">\n                <h2 id={c.id}>{c.title}</h2>\n                {c.children}\n              </div>\n              {c.pull && (\n                <aside className=\"kz-tpl-chapter-aside\">\n                  <p className=\"kz-tpl-pull\">{c.pull}</p>\n                </aside>\n              )}\n              {c.figure && <figure className=\"kz-tpl-chapter-figure\">{c.figure}</figure>}\n            </section>\n          ))}\n        </div>\n        {children}\n      </Page>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AA2CnB,cAQQ,YARR;AAHC,SAAS,aAAa,EAAE,OAAO,MAAM,SAAS,OAAO,MAAM,OAAO,UAAU,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAsB;AAC7I,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAc;AAAA,IAChG,qBAAC,QAAK,WAAU,mBACd;AAAA,0BAAC,SAAI,WAAU,mBACZ,mBAAS,IAAI,CAAC,GAAG,MAChB,qBAAC,aAAmB,WAAU,kBAAiB,mBAAiB,EAAE,IAAI,eAAY,IAChF;AAAA,4BAAC,UAAK,WAAU,oBAAmB,eAAW,MAC3C,iBAAO,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,GAChC;AAAA,QACA,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,QAAG,IAAI,EAAE,IAAK,YAAE,OAAM;AAAA,UACtB,EAAE;AAAA,WACL;AAAA,QACC,EAAE,QACD,oBAAC,WAAM,WAAU,wBACf,8BAAC,OAAE,WAAU,eAAe,YAAE,MAAK,GACrC;AAAA,QAED,EAAE,UAAU,oBAAC,YAAO,WAAU,yBAAyB,YAAE,QAAO;AAAA,WAbrD,EAAE,EAchB,CACD,GACH;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/marketing-layout.d.ts

@@ -0,0 +1,60 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const marketingLayout: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            skip?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            skip?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    skip: string;
+    header: string;
+    main: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            skip?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    skip: string;
+    header: string;
+    main: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    skip: string;
+    header: string;
+    main: string;
+}>>;
+type MarketingLayoutProps = React.ComponentProps<"div"> & {
+    /** The site's bar (a floating NavBar of @krizaka/ui/nav-bar). */
+    header: React.ReactNode;
+    /** The site's footer. */
+    footer?: React.ReactNode;
+    /** The words of the link that skips to the content (`Skip to content`). */
+    skipLabel: string;
+    /** The page: a PageHero, then Sections. */
+    children: React.ReactNode;
+};
+/** A site's page: skip link, floating bar, the page, the footer. */
+declare function MarketingLayout({ header, footer, skipLabel, className, children, ...props }: MarketingLayoutProps): React.JSX.Element;
+
+export { MarketingLayout, type MarketingLayoutProps, marketingLayout };

package/dist/marketing-layout.js

@@ -0,0 +1,25 @@
+// src/marketing-layout/marketing-layout.tsx
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var marketingLayout = tv({
+  slots: {
+    root: "flex min-h-dvh w-full flex-col bg-surface-0 text-fg",
+    skip: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[60] focus:rounded-lg focus:bg-surface-1 focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-fg focus:shadow-lg focus:outline-hidden focus:ring-2 focus:ring-ring",
+    header: "fixed inset-x-0 top-3 z-50 px-(--kz-page-gutter,16px) pointer-events-none *:pointer-events-auto",
+    main: "flex-1 outline-hidden"
+  }
+});
+var s = marketingLayout();
+function MarketingLayout({ header, footer, skipLabel, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    /* @__PURE__ */ jsx("a", { href: "#content", className: s.skip(), children: skipLabel }),
+    /* @__PURE__ */ jsx("div", { className: s.header(), children: header }),
+    /* @__PURE__ */ jsx("main", { id: "content", tabIndex: -1, className: s.main(), children }),
+    footer
+  ] });
+}
+export {
+  MarketingLayout,
+  marketingLayout
+};
+//# sourceMappingURL=marketing-layout.js.map

package/dist/marketing-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/marketing-layout/marketing-layout.tsx"],"sourcesContent":["// Server-safe. The page of a site (krizaka.com, a product's public pages): a link to skip to the content, the site's\n// bar, the page — its PageHero and Sections (@krizaka/ui/page) — and the footer. The bar floats over the hero\n// (`--kz-hero-top` clears it); everything shares the page frame (`--kz-page-max`, `--kz-page-gutter`).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const marketingLayout = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full flex-col bg-surface-0 text-fg\",\n    skip:\n      \"sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[60] focus:rounded-lg focus:bg-surface-1 focus:px-4 focus:py-2 \" +\n      \"focus:text-sm focus:font-semibold focus:text-fg focus:shadow-lg focus:outline-hidden focus:ring-2 focus:ring-ring\",\n    header: \"fixed inset-x-0 top-3 z-50 px-(--kz-page-gutter,16px) pointer-events-none *:pointer-events-auto\",\n    main: \"flex-1 outline-hidden\",\n  },\n});\nconst s = marketingLayout();\n\nexport type MarketingLayoutProps = React.ComponentProps<\"div\"> & {\n  /** The site's bar (a floating NavBar of @krizaka/ui/nav-bar). */\n  header: React.ReactNode;\n  /** The site's footer. */\n  footer?: React.ReactNode;\n  /** The words of the link that skips to the content (`Skip to content`). */\n  skipLabel: string;\n  /** The page: a PageHero, then Sections. */\n  children: React.ReactNode;\n};\n\n/** A site's page: skip link, floating bar, the page, the footer. */\nexport function MarketingLayout({ header, footer, skipLabel, className, children, ...props }: MarketingLayoutProps) {\n  return (\n    <div className={s.root({ className })} {...props}>\n      <a href=\"#content\" className={s.skip()}>\n        {skipLabel}\n      </a>\n      <div className={s.header()}>{header}</div>\n      <main id=\"content\" tabIndex={-1} className={s.main()}>\n        {children}\n      </main>\n      {footer}\n    </div>\n  );\n}\n"],"mappings":";AAIA,SAAS,UAAU;AA4Bf,SACE,KADF;AA1BG,IAAM,kBAAkB,GAAG;AAAA,EAChC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MACE;AAAA,IAEF,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF,CAAC;AACD,IAAM,IAAI,gBAAgB;AAcnB,SAAS,gBAAgB,EAAE,QAAQ,QAAQ,WAAW,WAAW,UAAU,GAAG,MAAM,GAAyB;AAClH,SACE,qBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACzC;AAAA,wBAAC,OAAE,MAAK,YAAW,WAAW,EAAE,KAAK,GAClC,qBACH;AAAA,IACA,oBAAC,SAAI,WAAW,EAAE,OAAO,GAAI,kBAAO;AAAA,IACpC,oBAAC,UAAK,IAAG,WAAU,UAAU,IAAI,WAAW,EAAE,KAAK,GAChD,UACH;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}

package/dist/mascot-quote.d.ts

@@ -3,16 +3,16 @@ import * as React from 'react';
 /**
  * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one
  * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,
- * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon) and the lovebird that
- * introduces (2026-10, with Yazakia: "l'inséparable présente"), redrawn on one 120 × 120 grid so that any bird can
- * wear any mood.
+ * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that
+ * introduces (2026-10, with Yazakia: "l'inséparable présente") and the crane that listens (2026-10, with Yororis:
+ * "la grue écoute"), redrawn on one 120 × 120 grid so that any bird can wear any mood.
  *
  * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,
  * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives
  * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades
  * and highlights are black and white at a low opacity over the role, so they hold in both themes.
  */
-declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird"];
+declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird", "crane"];
 type MascotBird = (typeof MASCOT_BIRDS)[number];
 declare const MASCOT_MOODS: readonly ["welcome", "thinking", "success", "empty", "error"];
 type MascotMood = (typeof MASCOT_MOODS)[number];

package/dist/mascot-quote.js

@@ -105,6 +105,26 @@ var BIRDS = {
     details: ["M43 40 C42 28 51 22 60 22 C69 22 78 28 77 40 C76 50 68 55 60 55 C52 55 44 50 43 40 Z"],
     beak: "M55 44 C55 40 65 40 65 44 C65 50 62 54 60 55 C58 54 55 50 55 44 Z",
     eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 }
+  },
+  /**
+   * The crane — the one that listens: posed, unhurried, drawn in one line. A tall wader seen in profile, standing still
+   * on two straight legs, the neck a single stroke up to a small head with its crown (the detail colour) and a long,
+   * straight beak; the folded wings low on its back. The flamingo bends and answers; the crane stands and listens.
+   */
+  crane: {
+    shadow: [62, 110, 20, 3],
+    legs: ["M56 87 L55 108 M51 108 L59 108", "M67 87 L68 108 M64 108 L73 108"],
+    body: "M40 66 C38 54 84 54 86 68 C88 82 76 88 62 88 C48 88 40 80 40 66 Z",
+    belly: "M48 70 C48 62 78 62 79 70 C80 79 72 84 63 84 C54 84 48 79 48 70 Z",
+    wings: [
+      { d: "M44 62 C33 68 35 82 49 83 C45 76 45 69 44 62 Z", pivot: [44, 62] },
+      { d: "M82 62 C93 67 96 82 80 84 C83 76 83 69 82 62 Z", pivot: [82, 62] }
+    ],
+    neck: { d: "M52 62 C48 47 52 37 48 26", width: 6 },
+    head: { cx: 47, cy: 21, r: 8.5 },
+    details: ["M41 16.5 C42 11 52 11 53 16.5 C50 14.6 44 14.6 41 16.5 Z"],
+    beak: "M40.5 18.5 L19 22.5 L40.5 25.5 Z",
+    eyes: { at: [[45.5, 19.5]], white: 2.8, pupil: 1.6 }
   }
 };
 var MOOD_PARTS = {
@@ -133,7 +153,9 @@ var OWN_PALETTES = {
   duck: { from: "#f43f5e", to: "#be123c", wing: "#db2777", detail: "#9f1239", beak: "#fbbf24", eye: "#1f2937" },
   flamingo: { from: "#f9a8d4", to: "#db2777", wing: "#ec4899", detail: "#be185d", beak: "#fbbf24", eye: "#1f2937" },
   pigeon: { from: "#22d3ee", to: "#6366f1", wing: "#a855f7", detail: "#4338ca", beak: "#f59e0b", eye: "#1f2937" },
-  lovebird: { from: "#6ee7b7", to: "#059669", wing: "#047857", detail: "#fb7185", beak: "#f97316", eye: "#1f2937" }
+  lovebird: { from: "#6ee7b7", to: "#059669", wing: "#047857", detail: "#fb7185", beak: "#f97316", eye: "#1f2937" },
+  // The sandhill crane (grue du Canada): sand-grey plumage, its red crown, dark legs and beak.
+  crane: { from: "#ebe3d6", to: "#9c8f80", wing: "#7d7266", detail: "#dc2626", beak: "#44403c", eye: "#1f2937" }
 };
 var LIGHT = "#ffffff";
 var SHADE = "#000000";