@krizaka/ui 2.8.0 → 2.9.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/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/mascots.d.ts

@@ -22,4 +22,17 @@ type MascotProps = Omit<React.ComponentProps<"svg">, "children"> & {
  */
 declare function Mascot({ bird, mood, tone, size, animated, title, className, ...props }: MascotProps): React.JSX.Element;
 
-export { Mascot, MascotBird, MascotMood, type MascotProps, MascotTone };
+type PhoenixProps = Omit<React.ComponentProps<"svg">, "children"> & {
+    /** `own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2. */
+    tone?: "own" | "brand";
+    /** Width and height in pixels. */
+    size?: number;
+    /** A slow float and a breathing core. Off with `false`; always off under `prefers-reduced-motion`. */
+    animated?: boolean;
+    /** An accessible name (the phoenix becomes an image); without it, it is decorative. */
+    title?: string;
+};
+/** The phoenix: the comeback, beside the five birds of the flock (`Mascot`). Decorative unless titled. */
+declare function Phoenix({ tone, size, animated, title, className, ...props }: PhoenixProps): React.JSX.Element;
+
+export { Mascot, MascotBird, MascotMood, type MascotProps, MascotTone, Phoenix, type PhoenixProps };

package/dist/mascots.js

@@ -4,9 +4,94 @@ import {
   MASCOT_MOODS,
   Mascot
 } from "./chunk-NOVUREEC.js";
+
+// src/mascots/phoenix.tsx
+import { useId } from "react";
+
+// src/mascots/phoenix-geometry.ts
+var PHOENIX = {
+  wingL: "M56 62 C40 40 22 36 8 40 C22 46 30 56 34 70 C40 64 48 62 56 62 Z",
+  wingR: "M64 62 C80 40 98 36 112 40 C98 46 90 56 86 70 C80 64 72 62 64 62 Z",
+  tailL: "M52 66 C46 82 40 94 30 104 C44 98 52 90 58 78 Z",
+  tailR: "M68 66 C74 82 80 94 90 104 C76 98 68 90 62 78 Z",
+  body: "M60 34 L68 60 L60 82 L52 60 Z",
+  crest: "M60 34 L56 24 M60 34 L64 24"
+};
+var PHOENIX_PALETTES = {
+  own: {
+    left: ["#c084fc", "#7c3aed"],
+    right: ["#fde68a", "#f59e0b"],
+    core: ["#fff7ed", "#fb923c"],
+    body: "#1f1530",
+    edge: "#e9d5ff",
+    crest: "#fbbf24"
+  }
+};
+
+// src/mascots/phoenix.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CSS = `
+@keyframes kzp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+@keyframes kzp-core { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
+.kzp[data-animated] { animation: kzp-float 5s ease-in-out infinite; }
+.kzp[data-animated] .kzp-core { animation: kzp-core 2.8s ease-in-out infinite; }
+@media (prefers-reduced-motion: reduce) { .kzp, .kzp .kzp-core { animation: none !important; } }
+`;
+var BRAND = {
+  left: ["var(--kz-accent-2, var(--kz-accent))", "var(--kz-accent)"],
+  right: ["var(--kz-accent)", "var(--kz-accent-2, var(--kz-accent))"],
+  core: ["#ffffff", "var(--kz-accent)"],
+  body: "var(--kz-surface-3)",
+  edge: "var(--kz-border-strong)",
+  crest: "var(--kz-accent)"
+};
+function Phoenix({ tone = "own", size = 120, animated = true, title, className, ...props }) {
+  const id = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const p = tone === "brand" ? BRAND : PHOENIX_PALETTES.own;
+  const a11y = title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 120 120",
+      fill: "none",
+      "data-animated": animated ? "" : void 0,
+      className: ["kzp", className].filter(Boolean).join(" "),
+      ...a11y,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: CSS }),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: `kzp-l-${id}`, x1: "1", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: p.left[0] }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: p.left[1] })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: `kzp-r-${id}`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: p.right[0] }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: p.right[1] })
+          ] }),
+          /* @__PURE__ */ jsxs("radialGradient", { id: `kzp-c-${id}`, children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: p.core[0] }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: p.core[1], stopOpacity: "0" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("path", { d: PHOENIX.wingL, fill: `url(#kzp-l-${id})` }),
+        /* @__PURE__ */ jsx("path", { d: PHOENIX.wingR, fill: `url(#kzp-r-${id})` }),
+        /* @__PURE__ */ jsx("path", { d: PHOENIX.tailL, fill: `url(#kzp-l-${id})`, opacity: ".7" }),
+        /* @__PURE__ */ jsx("path", { d: PHOENIX.tailR, fill: `url(#kzp-r-${id})`, opacity: ".7" }),
+        /* @__PURE__ */ jsx("path", { d: PHOENIX.body, fill: p.body, stroke: p.edge, strokeOpacity: ".5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "60", cy: "58", r: "12", fill: `url(#kzp-c-${id})`, className: "kzp-core" }),
+        /* @__PURE__ */ jsx("circle", { cx: "60", cy: "58", r: "3.5", fill: "#fff" }),
+        /* @__PURE__ */ jsx("path", { d: PHOENIX.crest, stroke: p.crest, strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
 export {
   MASCOT_BIRDS,
   MASCOT_MOODS,
-  Mascot
+  Mascot,
+  Phoenix
 };
 //# sourceMappingURL=mascots.js.map

package/dist/mascots.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/mascots/phoenix.tsx","../src/mascots/phoenix-geometry.ts"],"sourcesContent":["// The phoenix of the Krizaka landscape, on its own: two wings — two rival flames — around one bright core. The sixth\n// figure of the flock: it does no job, it stands for the comeback (a relaunch, a recovered account, a second chance).\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { PHOENIX, PHOENIX_PALETTES,type PhoenixPalette } from \"./phoenix-geometry\";\n\nconst CSS = `\n@keyframes kzp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }\n@keyframes kzp-core { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }\n.kzp[data-animated] { animation: kzp-float 5s ease-in-out infinite; }\n.kzp[data-animated] .kzp-core { animation: kzp-core 2.8s ease-in-out infinite; }\n@media (prefers-reduced-motion: reduce) { .kzp, .kzp .kzp-core { animation: none !important; } }\n`;\n\nexport type PhoenixProps = Omit<React.ComponentProps<\"svg\">, \"children\"> & {\n  /** `own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the host's accent and accent-2. */\n  tone?: \"own\" | \"brand\";\n  /** Width and height in pixels. */\n  size?: number;\n  /** A slow float and a breathing core. Off with `false`; always off under `prefers-reduced-motion`. */\n  animated?: boolean;\n  /** An accessible name (the phoenix becomes an image); without it, it is decorative. */\n  title?: string;\n};\n\nconst BRAND: PhoenixPalette = {\n  left: [\"var(--kz-accent-2, var(--kz-accent))\", \"var(--kz-accent)\"],\n  right: [\"var(--kz-accent)\", \"var(--kz-accent-2, var(--kz-accent))\"],\n  core: [\"#ffffff\", \"var(--kz-accent)\"],\n  body: \"var(--kz-surface-3)\",\n  edge: \"var(--kz-border-strong)\",\n  crest: \"var(--kz-accent)\",\n};\n\n/** The phoenix: the comeback, beside the five birds of the flock (`Mascot`). Decorative unless titled. */\nexport function Phoenix({ tone = \"own\", size = 120, animated = true, title, className, ...props }: PhoenixProps) {\n  const id = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n  const p = tone === \"brand\" ? BRAND : PHOENIX_PALETTES.own;\n  const a11y = title ? { role: \"img\", \"aria-label\": title } : { \"aria-hidden\": true };\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 120 120\"\n      fill=\"none\"\n      data-animated={animated ? \"\" : undefined}\n      className={[\"kzp\", className].filter(Boolean).join(\" \")}\n      {...a11y}\n      {...props}\n    >\n      <style>{CSS}</style>\n      <defs>\n        <linearGradient id={`kzp-l-${id}`} x1=\"1\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={p.left[0]} />\n          <stop offset=\"100%\" stopColor={p.left[1]} />\n        </linearGradient>\n        <linearGradient id={`kzp-r-${id}`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={p.right[0]} />\n          <stop offset=\"100%\" stopColor={p.right[1]} />\n        </linearGradient>\n        <radialGradient id={`kzp-c-${id}`}>\n          <stop offset=\"0%\" stopColor={p.core[0]} />\n          <stop offset=\"100%\" stopColor={p.core[1]} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      <path d={PHOENIX.wingL} fill={`url(#kzp-l-${id})`} />\n      <path d={PHOENIX.wingR} fill={`url(#kzp-r-${id})`} />\n      <path d={PHOENIX.tailL} fill={`url(#kzp-l-${id})`} opacity=\".7\" />\n      <path d={PHOENIX.tailR} fill={`url(#kzp-r-${id})`} opacity=\".7\" />\n      <path d={PHOENIX.body} fill={p.body} stroke={p.edge} strokeOpacity=\".5\" />\n      <circle cx=\"60\" cy=\"58\" r=\"12\" fill={`url(#kzp-c-${id})`} className=\"kzp-core\" />\n      <circle cx=\"60\" cy=\"58\" r=\"3.5\" fill=\"#fff\" />\n      <path d={PHOENIX.crest} stroke={p.crest} strokeWidth=\"2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n","/** The phoenix's geometry (120 × 120), drawn by the web `Phoenix` and the native one. */\nexport const PHOENIX = {\n  wingL: \"M56 62 C40 40 22 36 8 40 C22 46 30 56 34 70 C40 64 48 62 56 62 Z\",\n  wingR: \"M64 62 C80 40 98 36 112 40 C98 46 90 56 86 70 C80 64 72 62 64 62 Z\",\n  tailL: \"M52 66 C46 82 40 94 30 104 C44 98 52 90 58 78 Z\",\n  tailR: \"M68 66 C74 82 80 94 90 104 C76 98 68 90 62 78 Z\",\n  body: \"M60 34 L68 60 L60 82 L52 60 Z\",\n  crest: \"M60 34 L56 24 M60 34 L64 24\",\n} as const;\n\nexport interface PhoenixPalette {\n  /** The left wing's gradient (top → bottom). */\n  readonly left: readonly [string, string];\n  /** The right wing's gradient. */\n  readonly right: readonly [string, string];\n  /** The core's glow: centre, edge. */\n  readonly core: readonly [string, string];\n  /** The body and its edge. */\n  readonly body: string;\n  readonly edge: string;\n  /** The crest. */\n  readonly crest: string;\n}\n\n/** The phoenix of the Krizaka story: a violet wing, a gold wing (the brand layer's own colours, like the marks). */\nexport const PHOENIX_PALETTES: { readonly own: PhoenixPalette } = {\n  own: {\n    left: [\"#c084fc\", \"#7c3aed\"],\n    right: [\"#fde68a\", \"#f59e0b\"],\n    core: [\"#fff7ed\", \"#fb923c\"],\n    body: \"#1f1530\",\n    edge: \"#e9d5ff\",\n    crest: \"#fbbf24\",\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/native.d.ts

@@ -307,6 +307,27 @@ type EmptyStateProps = Omit<ViewProps, "children"> & {
 /** What a list, a search or a screen says when it has nothing to show — every word is a prop. */
 declare function EmptyState({ icon, title, description, action, style, ...props }: EmptyStateProps): React.JSX.Element;
 
+type GoalGaugeProps = Omit<ViewProps, "children"> & {
+    /** What the gauge counts (“Backers”) — passed translated; the meter's accessible name. */
+    label: string;
+    /** The number of steps of the goal (2–24). */
+    segments: number;
+    /** The steps reached (lit), from 0 to `segments` (default `segments`). */
+    value?: number;
+    /** The value in words (“6 of 10”); default `value / segments`. */
+    valueText?: string;
+    /** `fill` (default) lights the reached steps one by one on mount; `drain` empties the spent ones. */
+    mode?: "fill" | "drain";
+    /** Shows the label and the value above the segments (default true). */
+    showLabel?: boolean;
+    /** `default`: rounded segments. `arcade`: a skewed frame, the label centred. */
+    variant?: "default" | "arcade";
+    /** The steps light (or drain) once on mount; still when the system reduces motion. */
+    animated?: boolean;
+};
+/** A goal in steps for React Native: `role="meter"`, the reached steps lit, the value in words beside the label. */
+declare function GoalGauge({ label, segments, value, valueText, mode, showLabel, variant, animated, style, ...props }: GoalGaugeProps): React.JSX.Element;
+
 interface NativeMarkProps {
     /** Width and height in points. */
     size?: number;
@@ -456,11 +477,59 @@ type PaginationProps = {
  */
 declare function Pagination({ page, pageCount, onPageChange, hasPrevious, hasNext, onPrevious, onNext, status, disabled, labels, style }: PaginationProps): React.JSX.Element;
 
+interface PhoenixProps {
+    /** `own` (default): the violet wing and the gold wing of the Krizaka story. `brand`: the theme's accent and accent-2. */
+    tone?: "own" | "brand";
+    /** Width and height in points. */
+    size?: number;
+    /** A slow float; always still when the system asks to reduce motion. */
+    animated?: boolean;
+    /** An accessible name (the phoenix becomes an image); without it, it is decorative. */
+    title?: string;
+    /** The outer view's style. */
+    style?: ViewStyle;
+}
+/** The phoenix of the Krizaka story — the comeback — for React Native: the web `Phoenix`'s geometry. */
+declare function Phoenix({ tone, size, animated, title, style }: PhoenixProps): React__default.JSX.Element;
+
 /** The mark of a Krizaka brand by id, for React Native — the counterpart of the web `ProductLogo`. */
 declare function ProductMark({ id, ...props }: NativeMarkProps & {
     id: BrandId;
 }): React__default.JSX.Element;
 
+interface ProfileStat {
+    /** What it measures (“Response rate”) — passed translated. */
+    label: string;
+    /** The value, between 0 and `max`. */
+    value: number;
+    /** The top of the range (default 100). */
+    max?: number;
+    /** The value in words (“92 %”); default: the percentage. */
+    valueText?: string;
+}
+type ProfileCardProps = Omit<ViewProps, "children"> & {
+    /** The portrait: an `Avatar`, an image, a mark. Decorative — the name carries the meaning. */
+    visual: React.ReactNode;
+    /** The name (the card's heading). */
+    name: string;
+    /** The headline gauge's label (“Profile complete”); without it, no headline gauge. */
+    statLabel?: string;
+    /** The headline gauge's value, 0–100 (default 100). */
+    value?: number;
+    /** The headline value in words; default: the percentage. */
+    valueText?: string;
+    /** More gauges under the headline one, each with its value in words. */
+    stats?: readonly ProfileStat[];
+    /** One line under the gauges. */
+    caption?: string;
+    /** Under everything: actions (a `Button`), chips. */
+    children?: React.ReactNode;
+    /** The gauges fill once on mount; still when the system reduces motion. */
+    animated?: boolean;
+};
+/** A profile at a glance for React Native: portrait, name, a headline gauge, stats in words, a line, actions. */
+declare function ProfileCard({ visual, name, statLabel, value, valueText, stats, caption, children, animated, style, ...props }: ProfileCardProps): React.JSX.Element;
+
 type ProgressProps = {
     /** `bar` (default) or `ring`. */
     variant?: "bar" | "ring";
@@ -732,9 +801,10 @@ type ToasterProps = {
 declare function Toaster({ closeLabel, position, offset, duration, max }: ToasterProps): React.JSX.Element | null;
 
 /**
- * The Yazakia mark for React Native — the geometry of the web mark (marks/yazakia-geometry.ts): the orbit and the
- * pair turn slowly around the emblem, the core where the two arms meet breathes; still when the system reduces motion.
+ * The Yazakia mark for React Native — the geometry of the web mark (marks/yazakia-geometry.ts): two voices, two
+ * speech bubbles that overlap; the orbit and the pair turn slowly around them, the lens where they overlap breathes;
+ * still when the system reduces motion.
  */
 declare function YazakiaMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Countdown, type CountdownProps, type CountdownUnits, EmptyState, type EmptyStateProps, ErrorState, IconButton, type IconButtonProps, KrizakaMark, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, type Mode, type Motion, type NativeMarkProps, OrazakaMark, OrochiaMark, Pagination, type PaginationLabels, type PaginationProps, ProductMark, Progress, type ProgressProps, type Radius, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, SuccessState, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, WelcomeState, YazakiaMark, alpha, splitDuration, textStyles, toast, useCountdown, useReducedMotion, useTheme };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Countdown, type CountdownProps, type CountdownUnits, EmptyState, type EmptyStateProps, ErrorState, GoalGauge, type GoalGaugeProps, IconButton, type IconButtonProps, KrizakaMark, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, type Mode, type Motion, type NativeMarkProps, OrazakaMark, OrochiaMark, Pagination, type PaginationLabels, type PaginationProps, Phoenix, type PhoenixProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, type Radius, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, SuccessState, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, WelcomeState, YazakiaMark, alpha, splitDuration, textStyles, toast, useCountdown, useReducedMotion, useTheme };