@krizaka/ui 2.8.0 → 2.9.0

package/dist/landscape.js

@@ -0,0 +1,836 @@
+"use client";
+import {
+  cn
+} from "./chunk-5AXLA4LK.js";
+
+// src/landscape/landscape.tsx
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TONES = {
+  own: {
+    "--kzl-sun": "#f59e0b",
+    "--kzl-sun-2": "#ec4899",
+    "--kzl-sun-3": "#6366f1",
+    "--kzl-far": "#6366f1",
+    "--kzl-far-2": "#4f46e5",
+    "--kzl-far-line": "#818cf8",
+    "--kzl-mid": "#06b6d4",
+    "--kzl-mid-2": "#0891b2",
+    "--kzl-mid-line": "#22d3ee",
+    "--kzl-near": "#d946ef",
+    "--kzl-near-2": "#a855f7",
+    "--kzl-near-line": "#e879f9",
+    "--kzl-aurora-l": "#00f2fe",
+    "--kzl-aurora-r": "#ec4899"
+  },
+  brand: {
+    "--kzl-sun": "var(--kz-accent-2, var(--kz-accent))",
+    "--kzl-sun-2": "var(--kz-accent)",
+    "--kzl-sun-3": "var(--kz-accent)",
+    "--kzl-far": "var(--kz-accent-2, var(--kz-accent))",
+    "--kzl-far-2": "var(--kz-accent-2, var(--kz-accent))",
+    "--kzl-far-line": "var(--kz-accent-2, var(--kz-accent))",
+    "--kzl-mid": "color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))",
+    "--kzl-mid-2": "color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))",
+    "--kzl-mid-line": "color-mix(in srgb, var(--kz-accent) 55%, var(--kz-accent-2, var(--kz-accent)))",
+    "--kzl-near": "var(--kz-accent)",
+    "--kzl-near-2": "var(--kz-accent)",
+    "--kzl-near-line": "var(--kz-accent)",
+    "--kzl-aurora-l": "var(--kz-accent-2, var(--kz-accent))",
+    "--kzl-aurora-r": "var(--kz-accent)"
+  }
+};
+var CSS = `
+.kzl { pointer-events: none; overflow: hidden; }
+.kzl-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; pointer-events: none; z-index: 3;
+  background: linear-gradient(to top, var(--kz-surface-0) 0%, transparent 100%); }
+        /* --- Cyber Phoenix & Flame Flow animations --- */
+        @keyframes kzl-phoenix-flow-purple {
+          from { stroke-dashoffset: 350; }
+          to   { stroke-dashoffset: 0; }
+        }
+        @keyframes kzl-phoenix-flow-gold {
+          from { stroke-dashoffset: 0; }
+          to   { stroke-dashoffset: 350; }
+        }
+        @keyframes kzl-phoenix-bob {
+          0%, 100% { transform: translateY(0) scale(1); }
+          50%      { transform: translateY(-8px) scale(1.02); }
+        }
+        @keyframes kzl-wing-flap-l-phoenix {
+          0%, 100% { transform: rotate(0deg); }
+          50%      { transform: rotate(-10deg) translateY(-2px); }
+        }
+        @keyframes kzl-wing-flap-r-phoenix {
+          0%, 100% { transform: rotate(0deg); }
+          50%      { transform: rotate(10deg) translateY(-2px); }
+        }
+        @keyframes kzl-core-glow {
+          0%, 100% { fill: #ffef5c; filter: drop-shadow(0 0 1px #ffef5c); }
+          50%      { fill: #ffffff; filter: drop-shadow(0 0 5px #ff3c00); }
+        }
+
+        .kzl-cyber-phoenix {
+          animation: kzl-phoenix-bob 4s ease-in-out infinite;
+          transform-origin: 600px 325px;
+          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .kzl-cyber-phoenix:hover {
+          transform: translateY(-4px) scale(1.08);
+        }
+        .kzl-phoenix-wing-l {
+          animation: kzl-wing-flap-l-phoenix 2.5s ease-in-out infinite;
+        }
+        .kzl-phoenix-wing-r {
+          animation: kzl-wing-flap-r-phoenix 2.5s ease-in-out infinite;
+        }
+        .kzl-cyber-phoenix:hover .kzl-phoenix-wing-l {
+          animation: kzl-wing-flap-l-phoenix 0.6s linear infinite;
+        }
+        .kzl-cyber-phoenix:hover .kzl-phoenix-wing-r {
+          animation: kzl-wing-flap-r-phoenix 0.6s linear infinite;
+        }
+        .kzl-phoenix-core {
+          animation: kzl-core-glow 1.5s ease-in-out infinite;
+        }
+
+        /* --- Pulse Animations --- */
+        @keyframes kzl-opacity-pulse {
+          0%, 100% { opacity: 0.35; }
+          50%      { opacity: 0.95; }
+        }
+        .kzl-pulse-slow {
+          animation: kzl-opacity-pulse 4s ease-in-out infinite;
+        }
+        @keyframes kzl-sun-pulse {
+          0%, 100% { opacity: 0.16; transform: scale(0.96); }
+          50%      { opacity: 0.32; transform: scale(1.04); }
+        }
+        .kzl-sun-pulsing {
+          animation: kzl-sun-pulse 6s ease-in-out infinite;
+          transform-origin: 600px 200px;
+        }
+
+        /* --- Rising local data pulses --- */
+        @keyframes kzl-rise-fade-1 {
+          0%   { transform: translateY(80px) scale(0.5); opacity: 0; }
+          40%  { opacity: 0.8; }
+          100% { transform: translateY(-30px) scale(1.3); opacity: 0; }
+        }
+        @keyframes kzl-rise-fade-2 {
+          0%   { transform: translateY(60px) scale(0.4); opacity: 0; }
+          50%  { opacity: 0.9; }
+          100% { transform: translateY(-50px) scale(1.2); opacity: 0; }
+        }
+        .kzl-rising-pulse-1 {
+          animation: kzl-rise-fade-1 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
+          transform-origin: center;
+        }
+        .kzl-rising-pulse-2 {
+          animation: kzl-rise-fade-2 5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 1.5s;
+          transform-origin: center;
+        }
+
+        /* --- Mascot Hover Animations (Stable Hitboxes) --- */
+        .kzl-bird-graphics {
+          transform-box: fill-box;
+          transform-origin: center;
+          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .kzl-bird-hitbox:hover .kzl-bird-graphics {
+          transform: scale(1.08) translateY(-4px);
+        }
+
+        /* --- Bird Eye Blinking/Glowing Animations --- */
+        .kzl-falcon-eye {
+          animation: kzl-falcon-eye-pulse 2.5s ease-in-out infinite;
+        }
+        .kzl-duck-eye {
+          transform-box: fill-box;
+          transform-origin: center;
+          animation: kzl-eye-blink 5s ease-in-out infinite 1s;
+        }
+        .kzl-flamingo-eye {
+          transform-box: fill-box;
+          transform-origin: center;
+          animation: kzl-eye-blink 6s ease-in-out infinite 2.5s;
+        }
+        .kzl-owl-eye {
+          transform-box: fill-box;
+          transform-origin: center;
+          animation: kzl-eye-blink 4s ease-in-out infinite 0.5s;
+        }
+
+        @keyframes kzl-eye-blink {
+          0%, 90%, 100% {
+            transform: scaleY(1);
+          }
+          95% {
+            transform: scaleY(0.15);
+          }
+        }
+
+        @keyframes kzl-falcon-eye-pulse {
+          0%, 100% { fill: #00f2fe; filter: drop-shadow(0 0 2px #00f2fe); }
+          50%      { fill: #00ff66; filter: drop-shadow(0 0 5px #00ff66); }
+        }
+
+        /* FalconBot constant loop animations */
+        .kzl-falcon-bot .kzl-head-group {
+          animation: kzl-head-bob 4s ease-in-out infinite;
+        }
+        .kzl-falcon-bot .kzl-wing-left {
+          animation: kzl-wing-flap-left 3s ease-in-out infinite;
+        }
+        .kzl-falcon-bot .kzl-wing-right {
+          animation: kzl-wing-flap-right 3s ease-in-out infinite;
+        }
+        .kzl-falcon-bot .kzl-sentry-laser {
+          animation: kzl-scan-flicker 5s ease-in-out infinite;
+        }
+
+        @keyframes kzl-scan-flicker {
+          0%, 100% { opacity: 0; }
+          10%, 90% { opacity: 0.15; }
+          50%      { opacity: 0.5; }
+        }
+        @keyframes kzl-head-bob {
+          0%, 100% { transform: translateY(0) rotate(0deg); }
+          50%      { transform: translateY(-2px) rotate(2deg); }
+        }
+        @keyframes kzl-wing-flap-left {
+          0%, 100% { transform: rotate(0deg); }
+          50%      { transform: rotate(-8deg) scaleX(1.05); }
+        }
+        @keyframes kzl-wing-flap-right {
+          0%, 100% { transform: rotate(0deg); }
+          50%      { transform: rotate(8deg) scaleX(1.05); }
+        }
+
+        /* Developer Duck constant loop animations */
+        .kzl-developer-duck .kzl-head-group {
+          animation: kzl-duck-look 6s ease-in-out infinite;
+        }
+        .kzl-developer-duck .kzl-wing-left-type {
+          animation: kzl-wing-type-l 0.5s ease-in-out infinite;
+        }
+        .kzl-developer-duck .kzl-wing-right-type {
+          animation: kzl-wing-type-r 0.5s ease-in-out infinite 0.25s;
+        }
+        .kzl-developer-duck .kzl-laptop-screen {
+          animation: kzl-screen-flicker-idle 3s ease-in-out infinite;
+        }
+        .kzl-developer-duck .kzl-holo-projection {
+          animation: kzl-holo-flicker 6s ease-in-out infinite;
+        }
+        .kzl-developer-duck .kzl-holo-elements {
+          animation: kzl-holo-elements-rise 6s ease-in-out infinite;
+        }
+
+        @keyframes kzl-screen-flicker-idle {
+          0%, 100% { opacity: 0.7; }
+          50%      { opacity: 0.95; filter: drop-shadow(0 0 3px var(--kz-accent)); }
+        }
+        @keyframes kzl-holo-flicker {
+          0%, 100% { opacity: 0; }
+          20%, 80% { opacity: 0.35; }
+          50%      { opacity: 0.65; }
+        }
+        @keyframes kzl-holo-elements-rise {
+          0%   { transform: translateY(10px); opacity: 0; }
+          50%  { opacity: 0.8; }
+          100% { transform: translateY(-15px); opacity: 0; }
+        }
+        @keyframes kzl-duck-look {
+          0%, 100% { transform: rotate(0deg); }
+          30%      { transform: rotate(-5deg); }
+          70%      { transform: rotate(5deg); }
+        }
+        @keyframes kzl-wing-type-l {
+          0%, 100% { transform: translateY(0) rotate(0deg); }
+          50%      { transform: translateY(-3px) rotate(-4deg); }
+        }
+        @keyframes kzl-wing-type-r {
+          0%, 100% { transform: translateY(0) rotate(0deg); }
+          50%      { transform: translateY(-3px) rotate(4deg); }
+        }
+
+        /* Flamingo Bot constant loop animations */
+        .kzl-flamingo-bot .kzl-head-group {
+          animation: kzl-flamingo-head-bob 5s ease-in-out infinite;
+        }
+        .kzl-flamingo-bot .kzl-flamingo-neck {
+          animation: kzl-flamingo-neck-sway 7s ease-in-out infinite;
+          transform-origin: 20px 74px;
+        }
+        .kzl-flamingo-bot .kzl-flamingo-wing {
+          animation: kzl-flamingo-wing-flap 4s ease-in-out infinite;
+        }
+
+        @keyframes kzl-flamingo-neck-sway {
+          0%, 100% { transform: rotate(0deg); }
+          50%      { transform: rotate(-3deg) scaleY(1.02); }
+        }
+        @keyframes kzl-flamingo-head-bob {
+          0%, 100% { transform: translate(8px, 12px) translateY(0) rotate(0deg); }
+          50%      { transform: translate(8px, 12px) translateY(-5px) rotate(-3deg); }
+        }
+        @keyframes kzl-flamingo-wing-flap {
+          0%, 100% { transform: translateY(0) rotate(0deg); }
+          50%      { transform: translateY(-2px) rotate(-6deg); }
+        }
+
+        /* Owl Bot constant loop animations */
+        .kzl-owl-bot {
+          animation: kzl-owl-sway 5s ease-in-out infinite;
+          transform-origin: center;
+        }
+        @keyframes kzl-owl-sway {
+          0%, 100% { transform: rotate(0deg) translateY(0); }
+          50%      { transform: rotate(-3deg) translateY(-2px); }
+        }
+
+        /* Treehouse hover glow */
+        .kzl-cyber-treehouse:hover .kzl-window-glow {
+          fill: #f59e0b;
+          filter: drop-shadow(0 0 10px #f59e0b);
+        }
+
+        /* Floating tech particles */
+        @keyframes kzl-float-up-down {
+          0%, 100% { transform: translateY(0); opacity: 0.4; }
+          50%      { transform: translateY(-24px); opacity: 0.95; }
+        }
+        .kzl-float-particle-1 { animation: kzl-float-up-down 4.2s ease-in-out infinite; }
+        .kzl-float-particle-2 { animation: kzl-float-up-down 5.2s ease-in-out infinite 1.2s; }
+        .kzl-float-particle-3 { animation: kzl-float-up-down 4.7s ease-in-out infinite 0.6s; }
+        .kzl-float-particle-4 { animation: kzl-float-up-down 6.2s ease-in-out infinite 2.2s; }
+
+        @media (max-width: 1024px) {
+          .kzl-mobile-hide {
+            display: none !important;
+          }
+        }
+/* Still: with animated={false}, off screen, and under reduced motion \u2014 every loop holds its first frame. */
+.kzl[data-still] *, .kzl[data-offscreen] * { animation-play-state: paused !important; }
+@media (prefers-reduced-motion: reduce) {
+  .kzl * { animation-play-state: paused !important; transition: none !important; }
+}
+`;
+function Landscape({ tone = "own", flock = true, phoenix = true, animated = true, position = "absolute", fade = true, className, style, ...props }) {
+  const u = "kzl" + useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const box = position === "absolute" ? { position: "absolute", inset: "auto 0 0 0", height: "100%", width: "100%" } : { position: "relative", width: "100%", height: 440 };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      "data-motion-scope": "",
+      "data-still": animated ? void 0 : "",
+      className: cn("kzl", className),
+      style: { ...box, ...TONES[tone], ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: CSS }),
+        /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 50 1200 520", preserveAspectRatio: "xMidYMax slice", fill: "none", style: { display: "block", pointerEvents: "none" }, children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("radialGradient", { id: `${u}-sun-glow`, cx: "50%", cy: "50%", r: "50%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--kzl-sun)", stopOpacity: "0.45" }),
+              /* @__PURE__ */ jsx("stop", { offset: "30%", stopColor: "var(--kzl-sun-2)", stopOpacity: "0.28" }),
+              /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: "var(--kzl-sun-3)", stopOpacity: "0.16" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-mtn-back`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--kzl-far)", stopOpacity: "0.75" }),
+              " ",
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "var(--kzl-far-2)", stopOpacity: "0.45" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--kz-surface-0)" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-mtn-mid`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--kzl-mid)", stopOpacity: "0.7" }),
+              " ",
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "var(--kzl-mid-2)", stopOpacity: "0.4" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--kz-surface-0)" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-mtn-front`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--kzl-near)", stopOpacity: "0.8" }),
+              " ",
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "var(--kzl-near-2)", stopOpacity: "0.5" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--kz-surface-0)" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-falcon-grad`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ff9f00" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#ff2a00" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-duck-grad`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#f43f5e" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#be123c" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-flamingo-grad`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#3b82f6" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#1d4ed8" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-owl-grad`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#a78bfa" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#6d28d9" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-holo-grad`, x1: "0%", y1: "100%", x2: "0%", y2: "0%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#10b981", stopOpacity: "0.5" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#10b981", stopOpacity: "0" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-phoenix-gold-grad`, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ffb000" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#ff3c00" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-phoenix-purple-grad`, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#c084fc" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#db2777" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-phoenix-body-grad`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--kz-surface-3)" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--kz-surface-2)" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-gold-glow`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ff3c00", stopOpacity: "0.95" }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#ffb000", stopOpacity: "0.75" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--kz-surface-0)" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-purple-glow`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#db2777", stopOpacity: "0.95" }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#a78bfa", stopOpacity: "0.75" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--kz-surface-0)" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-river-mask-grad`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "85%", stopColor: "white" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "black" })
+            ] }),
+            /* @__PURE__ */ jsx("mask", { id: `${u}-river-fade-mask`, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "1200", height: "1000", fill: `url(#${u}-river-mask-grad)` }) }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-tree-grad`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--kz-accent)", stopOpacity: "0.35" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "transparent" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${u}-bench-grad`, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--kz-surface-3)" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--kz-surface-2)" })
+            ] }),
+            /* @__PURE__ */ jsxs("radialGradient", { id: `${u}-aurora-left`, cx: "20%", cy: "30%", r: "50%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--kzl-aurora-l)", stopOpacity: "0.22" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
+            ] }),
+            /* @__PURE__ */ jsxs("radialGradient", { id: `${u}-aurora-right`, cx: "80%", cy: "25%", r: "50%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--kzl-aurora-r)", stopOpacity: "0.22" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("g", { transform: "translate(0, 60)", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "200", cy: "180", r: "600", fill: `url(#${u}-aurora-left)` }),
+            /* @__PURE__ */ jsx("circle", { cx: "1000", cy: "150", r: "600", fill: `url(#${u}-aurora-right)` }),
+            /* @__PURE__ */ jsx("circle", { cx: "600", cy: "200", r: "380", fill: `url(#${u}-sun-glow)` }),
+            /* @__PURE__ */ jsx("circle", { cx: "600", cy: "200", r: "64", fill: "var(--kzl-sun)", opacity: "0.16", className: "kzl-sun-pulsing" }),
+            /* @__PURE__ */ jsxs("g", { opacity: "0.3", stroke: "var(--kz-accent)", strokeWidth: "1", children: [
+              /* @__PURE__ */ jsx("line", { x1: "300", y1: "120", x2: "380", y2: "80" }),
+              /* @__PURE__ */ jsx("line", { x1: "380", y1: "80", x2: "450", y2: "110" }),
+              /* @__PURE__ */ jsx("line", { x1: "450", y1: "110", x2: "300", y2: "120" }),
+              /* @__PURE__ */ jsx("line", { x1: "450", y1: "110", x2: "520", y2: "60" }),
+              /* @__PURE__ */ jsx("line", { x1: "750", y1: "80", x2: "840", y2: "130" }),
+              /* @__PURE__ */ jsx("line", { x1: "840", y1: "130", x2: "900", y2: "70" }),
+              /* @__PURE__ */ jsx("line", { x1: "900", y1: "70", x2: "750", y2: "80" })
+            ] }),
+            /* @__PURE__ */ jsxs("g", { fill: "var(--kz-accent)", opacity: "0.65", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "300", cy: "120", r: "3.5" }),
+              /* @__PURE__ */ jsx("circle", { cx: "380", cy: "80", r: "5", className: "kzl-pulse-slow" }),
+              /* @__PURE__ */ jsx("circle", { cx: "450", cy: "110", r: "3" }),
+              /* @__PURE__ */ jsx("circle", { cx: "520", cy: "60", r: "4.5" }),
+              /* @__PURE__ */ jsx("circle", { cx: "750", cy: "80", r: "4.5" }),
+              /* @__PURE__ */ jsx("circle", { cx: "840", cy: "130", r: "3.5" }),
+              /* @__PURE__ */ jsx("circle", { cx: "900", cy: "70", r: "6", className: "kzl-pulse-slow" })
+            ] }),
+            /* @__PURE__ */ jsx("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" }),
+            /* @__PURE__ */ jsx("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" }),
+            /* @__PURE__ */ jsx("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" }),
+            /* @__PURE__ */ jsx("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" }),
+            /* @__PURE__ */ jsxs("g", { stroke: "var(--kz-accent)", strokeWidth: "1.2", opacity: "0.18", children: [
+              /* @__PURE__ */ jsx("line", { x1: "30", y1: "440", x2: "410", y2: "440" }),
+              /* @__PURE__ */ jsx("line", { x1: "85", y1: "400", x2: "355", y2: "400" }),
+              /* @__PURE__ */ jsx("line", { x1: "140", y1: "360", x2: "300", y2: "360" }),
+              /* @__PURE__ */ jsx("line", { x1: "770", y1: "450", x2: "1180", y2: "450" }),
+              /* @__PURE__ */ jsx("line", { x1: "825", y1: "410", x2: "1125", y2: "410" }),
+              /* @__PURE__ */ jsx("line", { x1: "880", y1: "370", x2: "1070", y2: "370" })
+            ] }),
+            /* @__PURE__ */ jsx("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" }),
+            /* @__PURE__ */ jsx("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" }),
+            phoenix && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  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",
+                  fill: "none",
+                  stroke: `url(#${u}-purple-glow)`,
+                  strokeWidth: "6",
+                  strokeLinecap: "round",
+                  opacity: "0.6",
+                  mask: `url(#${u}-river-fade-mask)`,
+                  style: {
+                    filter: "drop-shadow(0 0 6px rgba(219, 39, 119, 0.4))"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  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",
+                  fill: "none",
+                  stroke: "#db2777",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  opacity: "0.9",
+                  mask: `url(#${u}-river-fade-mask)`,
+                  style: {
+                    strokeDasharray: "25, 20",
+                    animation: "kzl-phoenix-flow-purple 8s linear infinite",
+                    pointerEvents: "none",
+                    filter: "drop-shadow(0 0 3px #db2777)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  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",
+                  fill: "none",
+                  stroke: `url(#${u}-gold-glow)`,
+                  strokeWidth: "6",
+                  strokeLinecap: "round",
+                  opacity: "0.6",
+                  mask: `url(#${u}-river-fade-mask)`,
+                  style: {
+                    filter: "drop-shadow(0 0 6px rgba(251, 191, 36, 0.4))"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  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",
+                  fill: "none",
+                  stroke: "#fbbf24",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  opacity: "0.9",
+                  mask: `url(#${u}-river-fade-mask)`,
+                  style: {
+                    strokeDasharray: "35, 15",
+                    animation: "kzl-phoenix-flow-gold 6s linear infinite",
+                    pointerEvents: "none",
+                    filter: "drop-shadow(0 0 3px #fbbf24)"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("g", { className: "kzl-cyber-phoenix", style: { cursor: "pointer", pointerEvents: "auto" }, children: [
+                /* @__PURE__ */ jsx(
+                  "polygon",
+                  {
+                    points: "600,310 608,325 600,345 592,325",
+                    fill: `url(#${u}-phoenix-body-grad)`,
+                    stroke: "var(--kz-border-strong)",
+                    strokeWidth: "1.2"
+                  }
+                ),
+                /* @__PURE__ */ jsx("circle", { cx: "600", cy: "325", r: "3", fill: "#ffef5c", className: "kzl-phoenix-core" }),
+                /* @__PURE__ */ jsx("circle", { cx: "600", cy: "302", r: "6", fill: `url(#${u}-phoenix-body-grad)`, stroke: "var(--kz-border-strong)", strokeWidth: "1.2" }),
+                /* @__PURE__ */ jsx("rect", { x: "598", y: "300", width: "4", height: "2", rx: "0.5", fill: "#00f2fe" }),
+                /* @__PURE__ */ jsx("polygon", { points: "600,296 603,290 600,293 597,290", fill: "#ff3c00" }),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    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",
+                    fill: `url(#${u}-phoenix-purple-grad)`,
+                    stroke: "var(--kz-border-strong)",
+                    strokeWidth: "1",
+                    className: "kzl-phoenix-wing-l",
+                    style: { transformOrigin: "592px 322px" }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    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",
+                    fill: `url(#${u}-phoenix-gold-grad)`,
+                    stroke: "var(--kz-border-strong)",
+                    strokeWidth: "1",
+                    className: "kzl-phoenix-wing-r",
+                    style: { transformOrigin: "608px 322px" }
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("g", { transform: "translate(180, 360)", children: [
+              /* @__PURE__ */ jsx("line", { x1: "0", y1: "120", x2: "0", y2: "40", stroke: "var(--kz-border-strong)", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx("rect", { x: "-8", y: "50", width: "16", height: "28", rx: "2", fill: "var(--kz-surface-2)", stroke: "var(--kz-border-subtle)" }),
+              /* @__PURE__ */ jsx("circle", { cx: "0", cy: "58", r: "1.5", fill: "var(--kz-accent)" }),
+              /* @__PURE__ */ jsx("circle", { cx: "0", cy: "66", r: "1.5", fill: "var(--kz-accent)", opacity: "0.6" }),
+              /* @__PURE__ */ jsx("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" }),
+              /* @__PURE__ */ jsx("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" })
+            ] }),
+            /* @__PURE__ */ jsxs("g", { transform: "translate(420, 320)", children: [
+              /* @__PURE__ */ jsx("line", { x1: "0", y1: "180", x2: "0", y2: "60", stroke: "var(--kz-border-strong)", strokeWidth: "5" }),
+              /* @__PURE__ */ jsx("line", { x1: "0", y1: "110", x2: "35", y2: "90", stroke: "var(--kz-border-strong)", strokeWidth: "3.5" }),
+              /* @__PURE__ */ jsx("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" }),
+              /* @__PURE__ */ jsx("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" }),
+              /* @__PURE__ */ jsxs("g", { transform: "translate(0, 50)", style: { pointerEvents: "auto", cursor: "pointer" }, className: "kzl-cyber-treehouse", children: [
+                /* @__PURE__ */ jsx("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" }),
+                /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: "8", fill: "var(--kz-surface-1)", stroke: "var(--kz-border-strong)" }),
+                /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: "4", fill: "var(--kz-accent)", className: "kzl-window-glow" }),
+                /* @__PURE__ */ jsx("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" }),
+                /* @__PURE__ */ jsx("circle", { cx: "0", cy: "-45", r: "3", fill: "#10b981", className: "kzl-rising-pulse-1" }),
+                /* @__PURE__ */ jsx("circle", { cx: "15", cy: "-35", r: "2", fill: "#10b981", className: "kzl-rising-pulse-2" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("g", { transform: "translate(1000, 340)", children: [
+              /* @__PURE__ */ jsx("line", { x1: "0", y1: "160", x2: "0", y2: "60", stroke: "var(--kz-border-strong)", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx("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" }),
+              /* @__PURE__ */ jsx("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" })
+            ] }),
+            /* @__PURE__ */ jsxs("g", { transform: "translate(740, 480)", children: [
+              /* @__PURE__ */ jsx("line", { x1: "20", y1: "35", x2: "20", y2: "60", stroke: "var(--kz-border-strong)", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx("line", { x1: "140", y1: "35", x2: "140", y2: "60", stroke: "var(--kz-border-strong)", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx("rect", { x: "0", y: "22", width: "160", height: "12", rx: "4", fill: `url(#${u}-bench-grad)`, stroke: "var(--kz-border-default)", strokeWidth: "1.2" }),
+              /* @__PURE__ */ jsx("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)" }),
+              /* @__PURE__ */ jsx("line", { x1: "15", y1: "10", x2: "15", y2: "24", stroke: "var(--kz-border-strong)", strokeWidth: "3" }),
+              /* @__PURE__ */ jsx("line", { x1: "145", y1: "10", x2: "145", y2: "24", stroke: "var(--kz-border-strong)", strokeWidth: "3" })
+            ] }),
+            flock && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("g", { transform: "translate(180, 275) scale(1.4)", className: "kzl-bird-hitbox kzl-mobile-hide", children: [
+                /* @__PURE__ */ jsx("rect", { x: "-20", y: "-15", width: "40", height: "70", fill: "transparent", style: { cursor: "pointer", pointerEvents: "all" } }),
+                /* @__PURE__ */ jsxs("g", { className: "kzl-bird-graphics kzl-owl-bot", children: [
+                  /* @__PURE__ */ jsx("ellipse", { cx: "0", cy: "50", rx: "16", ry: "4", fill: "rgba(0,0,0,0.15)" }),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      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",
+                      fill: `url(#${u}-owl-grad)`,
+                      stroke: "var(--kz-border-strong)",
+                      strokeWidth: "1.2"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      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",
+                      fill: "#00f2fe",
+                      opacity: "0.35"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("circle", { cx: "-6", cy: "2", r: "5", fill: "var(--kz-surface-0)", stroke: "var(--kz-border-strong)", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "6", cy: "2", r: "5", fill: "var(--kz-surface-0)", stroke: "var(--kz-border-strong)", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "-6", cy: "2", r: "2", fill: "#00ff66", className: "kzl-owl-eye" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "6", cy: "2", r: "2", fill: "#00ff66", className: "kzl-owl-eye" }),
+                  /* @__PURE__ */ jsx("polygon", { points: "-2,4 2,4 0,10", fill: "#fbbf24", stroke: "var(--kz-border-strong)", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsx("polygon", { points: "-12,-8 -6,-4 -14,2", fill: "#7c3aed", stroke: "var(--kz-border-strong)", strokeWidth: "1" }),
+                  /* @__PURE__ */ jsx("polygon", { points: "12,-8 6,-4 14,2", fill: "#7c3aed", stroke: "var(--kz-border-strong)", strokeWidth: "1" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("g", { transform: "translate(120, 360) scale(1.65)", className: "kzl-bird-hitbox kzl-mobile-hide", children: [
+                /* @__PURE__ */ jsx("rect", { x: "-10", y: "0", width: "70", height: "90", fill: "transparent", style: { cursor: "pointer", pointerEvents: "all" } }),
+                /* @__PURE__ */ jsxs("g", { className: "kzl-bird-graphics kzl-falcon-bot", children: [
+                  /* @__PURE__ */ jsx("ellipse", { cx: "25", cy: "85", rx: "30", ry: "6", fill: "rgba(0,0,0,0.15)" }),
+                  /* @__PURE__ */ jsx("line", { x1: "16", y1: "65", x2: "12", y2: "85", stroke: "#f97316", strokeWidth: "3", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsx("line", { x1: "34", y1: "65", x2: "38", y2: "85", stroke: "#f97316", strokeWidth: "3", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsx("path", { d: "M 6 85 L 14 85 M 34 85 L 44 85", stroke: "#f97316", strokeWidth: "3", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      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",
+                      fill: `url(#${u}-falcon-grad)`,
+                      stroke: "var(--kz-border-strong)",
+                      strokeWidth: "1.5"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      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",
+                      fill: "#ff9800",
+                      opacity: "0.85"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 2 30 C -8 40, -4 60, 10 58 C 5 50, 4 38, 2 30 Z",
+                      fill: "#d84315",
+                      stroke: "var(--kz-border-strong)",
+                      strokeWidth: "1.2",
+                      className: "kzl-wing-left",
+                      style: { transformOrigin: "2px 30px" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 48 30 C 58 40, 54 60, 40 58 C 45 50, 46 38, 48 30 Z",
+                      fill: "#d84315",
+                      stroke: "var(--kz-border-strong)",
+                      strokeWidth: "1.2",
+                      className: "kzl-wing-right",
+                      style: { transformOrigin: "48px 30px" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("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" }),
+                  /* @__PURE__ */ jsxs("g", { className: "kzl-head-group", style: { transformOrigin: "25px 28px" }, children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "25", cy: "22", r: "18", fill: `url(#${u}-falcon-grad)`, stroke: "var(--kz-border-strong)", strokeWidth: "1.5" }),
+                    /* @__PURE__ */ jsx("polygon", { points: "21,24 29,24 25,36", fill: "#ffb300", stroke: "var(--kz-border-strong)", strokeWidth: "1.2" }),
+                    /* @__PURE__ */ jsx("rect", { x: "9", y: "10", width: "32", height: "10", rx: "3", fill: "var(--kz-surface-0)", stroke: "var(--kz-border-strong)", strokeWidth: "1.2" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "17", cy: "15", r: "2.5", fill: "#00f2fe", className: "kzl-falcon-eye" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "33", cy: "15", r: "2.5", fill: "#00f2fe", className: "kzl-falcon-eye" }),
+                    /* @__PURE__ */ jsx("path", { d: "M 41 15 C 44 15, 43 25, 41 28", stroke: "var(--kz-border-strong)", strokeWidth: "1", fill: "none" })
+                  ] }),
+                  /* @__PURE__ */ jsx("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" } })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("g", { transform: "translate(750, 355) scale(1.75)", className: "kzl-bird-hitbox kzl-mobile-hide", children: [
+                /* @__PURE__ */ jsx("rect", { x: "-10", y: "5", width: "70", height: "75", fill: "transparent", style: { cursor: "pointer", pointerEvents: "all" } }),
+                /* @__PURE__ */ jsxs("g", { className: "kzl-bird-graphics kzl-developer-duck", children: [
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      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",
+                      fill: `url(#${u}-duck-grad)`,
+                      stroke: "var(--kz-border-strong)",
+                      strokeWidth: "1.5"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      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",
+                      fill: "#f472b6",
+                      opacity: "0.85"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M -2 40 C -8 46, -4 55, 10 52",
+                      fill: "none",
+                      stroke: "#db2777",
+                      strokeWidth: "8",
+                      strokeLinecap: "round",
+                      className: "kzl-wing-left-type"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 52 40 C 58 46, 54 55, 40 52",
+                      fill: "none",
+                      stroke: "#db2777",
+                      strokeWidth: "8",
+                      strokeLinecap: "round",
+                      className: "kzl-wing-right-type"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("g", { className: "kzl-head-group", style: { transformOrigin: "25px 32px" }, children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "25", cy: "24", r: "16", fill: `url(#${u}-duck-grad)`, stroke: "var(--kz-border-strong)", strokeWidth: "1.5" }),
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        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",
+                        fill: "#fbbf24",
+                        stroke: "var(--kz-border-strong)",
+                        strokeWidth: "1.2"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "16", r: "2", fill: "var(--kz-text-primary)", className: "kzl-duck-eye" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "31", cy: "16", r: "2", fill: "var(--kz-text-primary)", className: "kzl-duck-eye" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "16", r: "4.5", fill: "none", stroke: "var(--kz-border-strong)", strokeWidth: "1.2" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "31", cy: "16", r: "4.5", fill: "none", stroke: "var(--kz-border-strong)", strokeWidth: "1.2" }),
+                    /* @__PURE__ */ jsx("line", { x1: "23.5", y1: "16", x2: "26.5", y2: "16", stroke: "var(--kz-border-strong)", strokeWidth: "1.2" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("g", { transform: "translate(10, 52)", children: [
+                    /* @__PURE__ */ jsx("polygon", { points: "-8,16 38,16 30,22 -14,22", fill: "var(--kz-surface-3)", stroke: "var(--kz-border-strong)", strokeWidth: "1" }),
+                    /* @__PURE__ */ jsx(
+                      "polygon",
+                      {
+                        points: "-4,14 34,14 30,-2 -8,-2",
+                        fill: "var(--kz-accent-soft)",
+                        stroke: "var(--kz-accent)",
+                        strokeWidth: "1",
+                        opacity: "0.8",
+                        className: "kzl-laptop-screen"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("line", { x1: "-2", y1: "4", x2: "24", y2: "4", stroke: "var(--kz-accent)", strokeWidth: "1.5", opacity: "0.9" }),
+                    /* @__PURE__ */ jsx("line", { x1: "-2", y1: "8", x2: "16", y2: "8", stroke: "var(--kz-accent)", strokeWidth: "1.5", opacity: "0.6" }),
+                    /* @__PURE__ */ jsx("polygon", { points: "12,-2 -40,-80 70,-80", fill: `url(#${u}-holo-grad)`, opacity: "0", className: "kzl-holo-projection", style: { pointerEvents: "none" } }),
+                    /* @__PURE__ */ jsxs("g", { className: "kzl-holo-elements", opacity: "0", children: [
+                      /* @__PURE__ */ jsx("rect", { x: "-10", y: "-45", width: "22", height: "6", rx: "2", fill: "var(--kz-surface-3)", stroke: "#10b981", strokeWidth: "0.5" }),
+                      /* @__PURE__ */ jsx("rect", { x: "18", y: "-35", width: "18", height: "6", rx: "2", fill: "var(--kz-surface-3)", stroke: "#10b981", strokeWidth: "0.5" })
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("g", { transform: "translate(1000, 270) scale(1.75)", className: "kzl-bird-hitbox kzl-mobile-hide", children: [
+                /* @__PURE__ */ jsx("rect", { x: "-15", y: "0", width: "65", height: "165", fill: "transparent", style: { cursor: "pointer", pointerEvents: "all" } }),
+                /* @__PURE__ */ jsxs("g", { className: "kzl-bird-graphics kzl-flamingo-bot", children: [
+                  /* @__PURE__ */ jsx("ellipse", { cx: "20", cy: "160", rx: "22", ry: "5", fill: "rgba(0,0,0,0.15)" }),
+                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "105", x2: "12", y2: "160", stroke: "var(--kz-border-strong)", strokeWidth: "2.5" }),
+                  /* @__PURE__ */ jsx("line", { x1: "26", y1: "105", x2: "28", y2: "160", stroke: "var(--kz-border-strong)", strokeWidth: "2.5" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "130", r: "2.5", fill: "#3b82f6" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "27", cy: "130", r: "2.5", fill: "#3b82f6" }),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      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",
+                      fill: `url(#${u}-flamingo-grad)`,
+                      stroke: "var(--kz-border-strong)",
+                      strokeWidth: "1.5"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 8 82 L 20 74 L 32 82 L 32 94 L 20 102 L 8 94 Z",
+                      fill: "#ec4899",
+                      stroke: "var(--kz-border-strong)",
+                      strokeWidth: "1",
+                      opacity: "0.95",
+                      className: "kzl-flamingo-wing"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M 20 74 C 20 60, -2 40, 8 18",
+                      fill: "none",
+                      stroke: `url(#${u}-flamingo-grad)`,
+                      strokeWidth: "6",
+                      strokeLinecap: "round",
+                      className: "kzl-flamingo-neck"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("g", { className: "kzl-head-group", transform: "translate(8, 12)", style: { transformOrigin: "0px 0px" }, children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: "10", fill: `url(#${u}-flamingo-grad)`, stroke: "var(--kz-border-strong)", strokeWidth: "1.2" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "-3", cy: "-2", r: "1.5", fill: "var(--kz-surface-0)" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "-3", cy: "-2", r: "0.6", fill: "#f43f5e", className: "kzl-flamingo-eye" }),
+                    /* @__PURE__ */ jsx("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" }),
+                    /* @__PURE__ */ jsx("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" }),
+                    /* @__PURE__ */ jsx("ellipse", { cx: "0", cy: "-8", rx: "10", ry: "1.5", fill: "var(--kz-surface-3)", stroke: "var(--kz-border-strong)", strokeWidth: "1" })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("circle", { cx: "340", cy: "300", r: "6", fill: "#00f2fe", opacity: "0.75", className: "kzl-float-particle-1" }),
+            /* @__PURE__ */ jsx("circle", { cx: "520", cy: "220", r: "5", fill: "#a855f7", opacity: "0.65", className: "kzl-float-particle-2" }),
+            /* @__PURE__ */ jsx("circle", { cx: "710", cy: "310", r: "6.5", fill: "#3b82f6", opacity: "0.7", className: "kzl-float-particle-3" }),
+            /* @__PURE__ */ jsx("circle", { cx: "920", cy: "250", r: "5", fill: "#00f2fe", opacity: "0.8", className: "kzl-float-particle-4" })
+          ] })
+        ] }),
+        fade && /* @__PURE__ */ jsx("div", { className: "kzl-fade" })
+      ]
+    }
+  );
+}
+export {
+  Landscape
+};
+//# sourceMappingURL=landscape.js.map