@salesmind-ai/design-system 0.2.1 → 0.3.0

package/dist/motion/index.js

@@ -0,0 +1,1218 @@
+"use client";
+import React3, { useRef, useState, useEffect, useCallback } from 'react';
+import { useInView, motion, useReducedMotion } from 'framer-motion';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx2 from 'clsx';
+
+// src/components/Motion/MotionContainer.tsx
+
+// src/tokens/motion.ts
+var DURATION = {
+  // 150ms
+  short: 0.25,
+  // 250ms
+  medium: 0.5};
+var EASING = {
+  standard: [0.16, 1, 0.3, 1]};
+var VARIANTS = {
+  fadeIn: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: DURATION.medium, ease: EASING.standard } }
+  },
+  staggerContainer: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.08,
+        delayChildren: 0.1
+      }
+    }
+  }};
+var MOTION = {
+  DURATION,
+  EASING};
+var MotionContainer = ({
+  children,
+  viewportMargin = "-10%",
+  once = true,
+  stagger = false,
+  delay = 0,
+  className,
+  ...props
+}) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, {
+    once,
+    margin: viewportMargin
+  });
+  const variants = stagger ? VARIANTS.staggerContainer : VARIANTS.fadeIn;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref,
+      initial: "hidden",
+      animate: isInView ? "visible" : "hidden",
+      variants,
+      transition: { delay },
+      className,
+      ...props,
+      children
+    }
+  );
+};
+var MotionText = ({
+  text,
+  type = "word",
+  highlightWords = [],
+  className,
+  ...props
+}) => {
+  const items = type === "word" ? text.split(" ") : text.split("");
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: type === "word" ? 0.05 : 0.02,
+        delayChildren: 0.1
+      }
+    }
+  };
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: MOTION.DURATION.short, ease: MOTION.EASING.standard }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      variants: containerVariants,
+      initial: "hidden",
+      whileInView: "visible",
+      viewport: { once: true, margin: "-10%" },
+      className,
+      ...props,
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: type === "word" ? "0.25em" : "0.05em",
+        ...props.style
+      },
+      children: items.map((item, i) => {
+        const isHighlighted = highlightWords.includes(item.replace(/[^a-zA-Z0-9]/g, ""));
+        return /* @__PURE__ */ jsxs(
+          motion.span,
+          {
+            variants: itemVariants,
+            style: {
+              color: isHighlighted ? "var(--brand-pink)" : "inherit",
+              fontWeight: isHighlighted ? 600 : "inherit"
+            },
+            children: [
+              item,
+              type === "word" && "\xA0"
+            ]
+          },
+          i
+        );
+      })
+    }
+  );
+};
+var CursorSpotlight = ({
+  children,
+  color = "var(--accent-rgb)",
+  size = 400,
+  opacity = 0.15,
+  borderGlow = true,
+  className,
+  disabled = false
+}) => {
+  const containerRef = useRef(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isHovering, setIsHovering] = useState(false);
+  const [reducedMotion, setReducedMotion] = useState(false);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(mediaQuery.matches);
+    const handler = (e) => setReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, []);
+  const isDisabled = disabled || reducedMotion;
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!containerRef.current || isDisabled) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setPosition({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      });
+    },
+    [isDisabled]
+  );
+  const handleMouseEnter = useCallback(() => {
+    if (!isDisabled) setIsHovering(true);
+  }, [isDisabled]);
+  const handleMouseLeave = useCallback(() => {
+    setIsHovering(false);
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || isDisabled) return;
+    container.addEventListener("mousemove", handleMouseMove);
+    container.addEventListener("mouseenter", handleMouseEnter);
+    container.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      container.removeEventListener("mousemove", handleMouseMove);
+      container.removeEventListener("mouseenter", handleMouseEnter);
+      container.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [handleMouseMove, handleMouseEnter, handleMouseLeave, isDisabled]);
+  const spotlightColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, ${opacity})` : color.includes(",") ? `rgba(${color}, ${opacity})` : color;
+  const borderColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, 0.5)` : color.includes(",") ? `rgba(${color}, 0.5)` : color;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `ds-cursor-spotlight ${className || ""}`,
+      style: {
+        "--spotlight-x": `${position.x}px`,
+        "--spotlight-y": `${position.y}px`,
+        "--spotlight-size": `${size}px`,
+        "--spotlight-color": spotlightColor,
+        "--spotlight-border-color": borderColor,
+        "--spotlight-opacity": isHovering ? 1 : 0
+      },
+      "data-hovering": isHovering,
+      "data-border-glow": borderGlow,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-cursor-spotlight__glow", "aria-hidden": "true" }),
+        borderGlow && /* @__PURE__ */ jsx("div", { className: "ds-cursor-spotlight__border", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-cursor-spotlight__content", children })
+      ]
+    }
+  );
+};
+CursorSpotlight.displayName = "CursorSpotlight";
+var SpotlightCard = ({
+  title,
+  description,
+  icon,
+  children,
+  onClick,
+  ...spotlightProps
+}) => {
+  return /* @__PURE__ */ jsx(CursorSpotlight, { ...spotlightProps, className: "ds-spotlight-card", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ds-spotlight-card__inner",
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "ds-spotlight-card__icon", children: icon }),
+        title && /* @__PURE__ */ jsx("h3", { className: "ds-spotlight-card__title", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "ds-spotlight-card__description", children: description }),
+        children
+      ]
+    }
+  ) });
+};
+SpotlightCard.displayName = "SpotlightCard";
+var steps = [
+  {
+    id: "test",
+    label: "Test Audience & Messaging",
+    icon: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    )
+  },
+  {
+    id: "execute",
+    label: "Execute Outreach",
+    icon: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22 2L11 13M22 2L15 22L11 13M11 13L2 9L22 2Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    )
+  },
+  {
+    id: "results",
+    label: "Book Meetings",
+    icon: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    )
+  }
+];
+var RevenueAutomationLoop = ({ className }) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx2("ds-revenue-loop", className), children: /* @__PURE__ */ jsxs("div", { className: "ds-revenue-loop__circle", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "ds-revenue-loop__ring",
+        viewBox: "0 0 400 400",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("linearGradient", { id: "loopGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
+              /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "var(--brand-yellow)" }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-pink)" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "marker",
+              {
+                id: "arrowhead",
+                markerWidth: "10",
+                markerHeight: "7",
+                refX: "9",
+                refY: "3.5",
+                orient: "auto",
+                children: /* @__PURE__ */ jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "url(#loopGradient)" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "200",
+              cy: "200",
+              r: "190",
+              stroke: "var(--rim-light-bottom)",
+              strokeWidth: "1",
+              strokeDasharray: "4 4",
+              className: "ds-revenue-loop__track"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.circle,
+            {
+              cx: "200",
+              cy: "200",
+              r: "190",
+              stroke: "url(#loopGradient)",
+              strokeWidth: "2",
+              fill: "none",
+              strokeLinecap: "round",
+              initial: { pathLength: 0, rotate: -90 },
+              animate: { pathLength: 1, rotate: -90 },
+              transition: {
+                duration: 4,
+                ease: "linear",
+                repeat: Infinity
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "ds-revenue-loop__hub", children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-revenue-loop__hub-glow" }),
+      /* @__PURE__ */ jsx("div", { className: "ds-revenue-loop__hub-content", children: /* @__PURE__ */ jsx("span", { className: "ds-revenue-loop__logo", children: "AI" }) })
+    ] }),
+    steps.map((step, index) => {
+      const angle = index * 360 / steps.length - 90;
+      const radius = 190;
+      const x = 200 + radius * Math.cos(angle * Math.PI / 180);
+      const y = 200 + radius * Math.sin(angle * Math.PI / 180);
+      return /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          className: "ds-revenue-loop__node",
+          style: {
+            left: `${x / 400 * 100}%`,
+            top: `${y / 400 * 100}%`
+          },
+          initial: { opacity: 0, scale: 0.8 },
+          animate: { opacity: 1, scale: 1 },
+          transition: { delay: index * 0.5 },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "ds-revenue-loop__icon", children: step.icon }),
+            /* @__PURE__ */ jsx("div", { className: "ds-revenue-loop__label", children: step.label })
+          ]
+        },
+        step.id
+      );
+    })
+  ] }) });
+};
+var EASE_PREMIUM = [0.22, 1, 0.36, 1];
+var SCENE_TIMING = {
+  init: 0,
+  funnel: 1500,
+  qualification: 3500,
+  meeting: 5500,
+  mapping: 6500,
+  scaling: 8500
+};
+var HOLD_DURATION = 1200;
+var TOTAL_DURATION = 1e4 + HOLD_DURATION;
+var LINKEDIN_STEPS = [
+  { id: "follow", label: "Profile Follow" },
+  { id: "visit", label: "Profile Visit" },
+  { id: "connect", label: "Connection Request" },
+  { id: "msg1", label: "Message 1" },
+  { id: "msg2", label: "Message 2" },
+  { id: "msg3", label: "Message 3" }
+];
+var FUNNEL_STAGES = [
+  { id: "awareness", label: "Awareness", num: 1 },
+  { id: "discovery", label: "Discovery", num: 2 },
+  { id: "evaluation", label: "Evaluation", num: 3 },
+  { id: "intent", label: "Intent", num: 4 },
+  { id: "negotiation", label: "Negotiation", num: 5 },
+  { id: "purchase", label: "Purchase", num: 6 }
+];
+var WINNING_BULLETS = [
+  "Target audience validated & segmented",
+  "Messaging sequence A/B tested",
+  "Optimal send times confirmed",
+  "Response rate > benchmark threshold",
+  "Conversion path verified end-to-end"
+];
+var SCALING_CHECKS = [
+  "Volume multiplied to 9 senders",
+  "All sequences templated & locked",
+  "Auto-qualification active",
+  "Meeting pipeline on autopilot"
+];
+var AntSVG = ({ size = 28, className }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className,
+    width: size,
+    height: size,
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "antGrad", x1: "0", y1: "0", x2: "28", y2: "28", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
+      ] }) }),
+      /* @__PURE__ */ jsx("circle", { cx: "14", cy: "6", r: "4", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "11",
+          y1: "3",
+          x2: "7",
+          y2: "0.5",
+          stroke: "rgba(255,255,255,0.1)",
+          strokeWidth: "1",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "17",
+          y1: "3",
+          x2: "21",
+          y2: "0.5",
+          stroke: "rgba(255,255,255,0.1)",
+          strokeWidth: "1",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx("ellipse", { cx: "14", cy: "13", rx: "3.5", ry: "3", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
+      /* @__PURE__ */ jsx("ellipse", { cx: "14", cy: "22", rx: "5", ry: "5", stroke: "url(#antGrad)", strokeWidth: "1.2", fill: "none" }),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "10.5",
+          y1: "11",
+          x2: "5",
+          y2: "9",
+          stroke: "rgba(255,255,255,0.1)",
+          strokeWidth: "0.8",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "17.5",
+          y1: "11",
+          x2: "23",
+          y2: "9",
+          stroke: "rgba(255,255,255,0.1)",
+          strokeWidth: "0.8",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "10.5",
+          y1: "13",
+          x2: "4",
+          y2: "14",
+          stroke: "rgba(255,255,255,0.1)",
+          strokeWidth: "0.8",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "17.5",
+          y1: "13",
+          x2: "24",
+          y2: "14",
+          stroke: "rgba(255,255,255,0.1)",
+          strokeWidth: "0.8",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "10.5",
+          y1: "15",
+          x2: "5",
+          y2: "18",
+          stroke: "rgba(255,255,255,0.1)",
+          strokeWidth: "0.8",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "17.5",
+          y1: "15",
+          x2: "23",
+          y2: "18",
+          stroke: "rgba(255,255,255,0.1)",
+          strokeWidth: "0.8",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx("circle", { cx: "12.5", cy: "5.5", r: "0.8", fill: "url(#antGrad)" }),
+      /* @__PURE__ */ jsx("circle", { cx: "15.5", cy: "5.5", r: "0.8", fill: "url(#antGrad)" })
+    ]
+  }
+);
+var SwarmAntSVG = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "3.5", r: "2.5", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" }),
+      /* @__PURE__ */ jsx("ellipse", { cx: "8", cy: "8", rx: "2", ry: "1.8", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" }),
+      /* @__PURE__ */ jsx("ellipse", { cx: "8", cy: "13", rx: "3", ry: "3", stroke: "url(#antGrad)", strokeWidth: "0.8", fill: "none" })
+    ]
+  }
+);
+var CalendarIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "4", width: "16", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "6",
+          y1: "2",
+          x2: "6",
+          y2: "6",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: "14",
+          y1: "2",
+          x2: "14",
+          y2: "6",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx("rect", { x: "5", y: "10", width: "3", height: "3", rx: "0.5", fill: "currentColor", opacity: "0.5" })
+    ]
+  }
+);
+var LockIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "8", height: "6", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4 5V3.5C4 2.4 4.9 1.5 6 1.5C7.1 1.5 8 2.4 8 3.5V5",
+          stroke: "currentColor",
+          strokeWidth: "1.2",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "ds-funnel-scaling__scaling-check",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1.2" }),
+      /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          points: "4,7 6,9.5 10,4.5",
+          stroke: "currentColor",
+          strokeWidth: "1.4",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fill: "none"
+        }
+      )
+    ]
+  }
+);
+var NodeDot = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "ds-funnel-scaling__flow-icon",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
+    ]
+  }
+);
+var containerStagger = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1 }
+  }
+};
+var cardReveal = {
+  hidden: { opacity: 0, y: 40 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: EASE_PREMIUM }
+  }
+};
+var bulletStagger = {
+  hidden: { opacity: 0, x: -8 },
+  show: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.3, ease: EASE_PREMIUM }
+  }
+};
+var stepNode = {
+  hidden: { opacity: 0, scaleY: 0.85 },
+  show: {
+    opacity: 1,
+    scaleY: 1,
+    transition: { duration: 0.35, ease: EASE_PREMIUM }
+  }
+};
+var funnelLayer = {
+  hidden: { opacity: 0, y: 20 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: EASE_PREMIUM }
+  }
+};
+var fadeSlideUp = {
+  hidden: { opacity: 0, y: 30 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: EASE_PREMIUM }
+  }
+};
+var scalePulse = {
+  hidden: { scale: 1 },
+  show: {
+    scale: [1, 1.04, 1],
+    transition: { duration: 0.6, ease: EASE_PREMIUM }
+  }
+};
+var swarmEntry = {
+  hidden: { opacity: 0, scale: 0.8 },
+  show: {
+    opacity: 1,
+    scale: 1,
+    transition: { duration: 0.35, ease: EASE_PREMIUM }
+  }
+};
+var qualBlockLeft = {
+  hidden: { opacity: 0, x: -60 },
+  show: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.5, ease: EASE_PREMIUM }
+  }
+};
+var qualBlockRight = {
+  hidden: { opacity: 0, x: 60 },
+  show: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.5, ease: EASE_PREMIUM }
+  }
+};
+function useSceneTimeline(isInView, autoPlay, loop, reducedMotion) {
+  const [scene, setScene] = useState("idle");
+  const timerRef = useRef([]);
+  const clearTimers = useCallback(() => {
+    timerRef.current.forEach(clearTimeout);
+    timerRef.current = [];
+  }, []);
+  const startTimeline = useCallback(() => {
+    clearTimers();
+    const scenes = [
+      "init",
+      "funnel",
+      "qualification",
+      "meeting",
+      "mapping",
+      "scaling"
+    ];
+    if (reducedMotion) {
+      setScene("scaling");
+      return;
+    }
+    scenes.forEach((s) => {
+      const id = setTimeout(() => setScene(s), SCENE_TIMING[s]);
+      timerRef.current.push(id);
+    });
+    if (loop) {
+      const loopId = setTimeout(() => {
+        setScene("idle");
+        const restartId = setTimeout(() => startTimeline(), 100);
+        timerRef.current.push(restartId);
+      }, TOTAL_DURATION);
+      timerRef.current.push(loopId);
+    }
+  }, [clearTimers, loop, reducedMotion]);
+  useEffect(() => {
+    if (isInView && autoPlay) {
+      startTimeline();
+    }
+    return clearTimers;
+  }, [isInView, autoPlay, startTimeline, clearTimers]);
+  return scene;
+}
+function isAtOrPast(current, target) {
+  const order = [
+    "idle",
+    "init",
+    "funnel",
+    "qualification",
+    "meeting",
+    "mapping",
+    "scaling"
+  ];
+  return order.indexOf(current) >= order.indexOf(target);
+}
+var FunnelScalingSender = ({
+  className,
+  autoPlay = true,
+  loop = true
+}) => {
+  const containerRef = useRef(null);
+  const isInView = useInView(containerRef, { once: false, amount: 0.3 });
+  const reducedMotion = useReducedMotion();
+  const scene = useSceneTimeline(isInView, autoPlay, loop, reducedMotion);
+  const isActive = scene !== "idle";
+  const showInit = isAtOrPast(scene, "init");
+  const showFunnel = isAtOrPast(scene, "funnel");
+  const showQualification = isAtOrPast(scene, "qualification");
+  const showMeeting = isAtOrPast(scene, "meeting");
+  const showMapping = isAtOrPast(scene, "mapping");
+  const showScaling = isAtOrPast(scene, "scaling");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx2("ds-funnel-scaling", className),
+      role: "img",
+      "aria-label": "Animated illustration: SalesMind scaling funnel from the sender perspective \u2014 showing how validated outreach becomes an automated pipeline machine",
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "ds-funnel-scaling__bg",
+            initial: { opacity: 0 },
+            animate: { opacity: isActive ? 1 : 0 },
+            transition: { duration: 0.4 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "ds-funnel-scaling__grid",
+            initial: { opacity: 0 },
+            animate: { opacity: isActive ? 1 : 0 },
+            transition: { duration: 0.4, delay: 0.6 }
+          }
+        ),
+        /* @__PURE__ */ jsx("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: "antGrad", x1: "0", y1: "0", x2: "28", y2: "28", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: "fscFlowGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: "fscQualGrad", x1: "0", y1: "0", x2: "1", y2: "1", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--brand-pink)" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--brand-yellow)" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ds-funnel-scaling__canvas", children: [
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              className: "ds-funnel-scaling__winning-card",
+              variants: cardReveal,
+              initial: "hidden",
+              animate: showInit ? "show" : "hidden",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "ds-funnel-scaling__winning-header", children: "Solution" }),
+                /* @__PURE__ */ jsx("div", { className: "ds-funnel-scaling__winning-title", children: "Winning Combination" }),
+                /* @__PURE__ */ jsx(
+                  motion.ul,
+                  {
+                    className: "ds-funnel-scaling__winning-bullets",
+                    variants: containerStagger,
+                    initial: "hidden",
+                    animate: showInit ? "show" : "hidden",
+                    children: WINNING_BULLETS.map((bullet) => /* @__PURE__ */ jsx(
+                      motion.li,
+                      {
+                        className: "ds-funnel-scaling__winning-bullet",
+                        variants: bulletStagger,
+                        children: bullet
+                      },
+                      bullet
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    className: "ds-funnel-scaling__winning-lock",
+                    initial: { opacity: 0 },
+                    animate: { opacity: showInit ? 1 : 0 },
+                    transition: { delay: 0.8, duration: 0.4 },
+                    children: [
+                      /* @__PURE__ */ jsx(LockIcon, {}),
+                      " Validated & Locked"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              className: "ds-funnel-scaling__flow",
+              variants: containerStagger,
+              initial: "hidden",
+              animate: showFunnel ? "show" : "hidden",
+              children: [
+                LINKEDIN_STEPS.map((step, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+                  /* @__PURE__ */ jsxs(
+                    motion.div,
+                    {
+                      className: clsx2(
+                        "ds-funnel-scaling__flow-node",
+                        showFunnel && "ds-funnel-scaling__flow-node--active"
+                      ),
+                      variants: stepNode,
+                      custom: i,
+                      children: [
+                        /* @__PURE__ */ jsx(NodeDot, {}),
+                        /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__flow-label", children: step.label })
+                      ]
+                    }
+                  ),
+                  i < LINKEDIN_STEPS.length - 1 && /* @__PURE__ */ jsx(
+                    motion.svg,
+                    {
+                      className: "ds-funnel-scaling__flow-connector",
+                      width: "2",
+                      height: "12",
+                      viewBox: "0 0 2 12",
+                      initial: { scaleY: 0, opacity: 0 },
+                      animate: showFunnel ? { scaleY: 1, opacity: 1 } : { scaleY: 0, opacity: 0 },
+                      transition: { duration: 0.3, delay: 0.1 * (i + 1), ease: EASE_PREMIUM },
+                      style: { transformOrigin: "top" },
+                      children: /* @__PURE__ */ jsx("rect", { width: "2", height: "12", fill: "url(#fscFlowGrad)", rx: "1" })
+                    }
+                  )
+                ] }, step.id)),
+                showFunnel && /* @__PURE__ */ jsx("div", { style: { position: "relative", height: 0 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: "ds-funnel-scaling__ant ds-funnel-scaling__ant--ghost",
+                    initial: { opacity: 0, x: -20 + i * 15, y: -10 },
+                    animate: showFunnel ? { opacity: 0.35, x: -10 + i * 18, y: 0 } : { opacity: 0 },
+                    transition: { delay: 1.2 + i * 0.15, duration: 0.4, ease: EASE_PREMIUM },
+                    style: { position: "absolute" },
+                    children: /* @__PURE__ */ jsx(AntSVG, { size: 20 })
+                  },
+                  `ghost-${i}`
+                )) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              className: "ds-funnel-scaling__qualification",
+              initial: { opacity: 0, scale: 0.9 },
+              animate: showQualification ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 },
+              transition: { duration: 0.6, ease: EASE_PREMIUM },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "ds-funnel-scaling__qual-ring", children: [
+                  /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 180 180", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "90", cy: "90", r: "70", stroke: "rgba(255,255,255,0.06)", strokeWidth: "1" }),
+                    /* @__PURE__ */ jsx(
+                      motion.circle,
+                      {
+                        cx: "90",
+                        cy: "90",
+                        r: "70",
+                        stroke: "url(#fscQualGrad)",
+                        strokeWidth: "2",
+                        fill: "none",
+                        strokeLinecap: "round",
+                        strokeDasharray: "440",
+                        initial: { strokeDashoffset: 440 },
+                        animate: showQualification ? { strokeDashoffset: 0 } : { strokeDashoffset: 440 },
+                        transition: { duration: 0.8, ease: EASE_PREMIUM }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      motion.polygon,
+                      {
+                        points: "155,80 165,90 155,100",
+                        fill: "var(--brand-pink)",
+                        initial: { opacity: 0 },
+                        animate: showQualification ? { opacity: 0.7 } : { opacity: 0 },
+                        transition: { delay: 0.6, duration: 0.3 }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      motion.polygon,
+                      {
+                        points: "25,100 15,90 25,80",
+                        fill: "var(--brand-yellow)",
+                        initial: { opacity: 0 },
+                        animate: showQualification ? { opacity: 0.7 } : { opacity: 0 },
+                        transition: { delay: 0.7, duration: 0.3 }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "ds-funnel-scaling__qual-center",
+                      initial: { opacity: 0 },
+                      animate: showQualification ? { opacity: 1 } : { opacity: 0 },
+                      transition: { delay: 0.8, duration: 0.4 },
+                      children: /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__qual-text", children: "Qualification happens during the conversation" })
+                    }
+                  ),
+                  showQualification && !reducedMotion && /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: showScaling ? 9 : 3 }).map((_, i) => /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "ds-funnel-scaling__swarm-ant",
+                      variants: swarmEntry,
+                      initial: "hidden",
+                      animate: "show",
+                      transition: { delay: i * 0.08 },
+                      style: {
+                        animationDelay: `${-(i * (3 / (showScaling ? 9 : 3)))}s`
+                      },
+                      children: /* @__PURE__ */ jsx(SwarmAntSVG, {})
+                    },
+                    `swarm-${i}`
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "ds-funnel-scaling__qual-blocks", children: [
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "ds-funnel-scaling__qual-block",
+                      variants: qualBlockLeft,
+                      initial: "hidden",
+                      animate: showQualification ? "show" : "hidden",
+                      children: "Reply Handling"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "ds-funnel-scaling__qual-block",
+                      variants: qualBlockRight,
+                      initial: "hidden",
+                      animate: showQualification ? "show" : "hidden",
+                      children: "Follow-up Sequence"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              className: "ds-funnel-scaling__funnel",
+              variants: containerStagger,
+              initial: "hidden",
+              animate: showMapping ? "show" : "hidden",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "ds-funnel-scaling__funnel-header", children: "Sales Funnel Stages" }),
+                FUNNEL_STAGES.map((stage) => {
+                  const isHighlight = stage.id === "evaluation" || stage.id === "intent";
+                  const isDim = showMapping && !isHighlight;
+                  return /* @__PURE__ */ jsxs(
+                    motion.div,
+                    {
+                      className: clsx2(
+                        "ds-funnel-scaling__funnel-stage",
+                        isHighlight && showMapping && "ds-funnel-scaling__funnel-stage--highlight",
+                        isDim && "ds-funnel-scaling__funnel-stage--dim"
+                      ),
+                      variants: funnelLayer,
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__funnel-num", children: stage.num }),
+                        /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__funnel-label", children: stage.label })
+                      ]
+                    },
+                    stage.id
+                  );
+                })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "ds-funnel-scaling__meeting",
+            variants: fadeSlideUp,
+            initial: "hidden",
+            animate: showMeeting ? "show" : "hidden",
+            children: /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                variants: scalePulse,
+                initial: "hidden",
+                animate: showMeeting ? "show" : "hidden",
+                style: { display: "flex", alignItems: "center", gap: "12px" },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "ds-funnel-scaling__meeting-icon", children: /* @__PURE__ */ jsx(CalendarIcon, {}) }),
+                  /* @__PURE__ */ jsx("span", { className: "ds-funnel-scaling__meeting-label", children: "Meeting Booked" })
+                ]
+              }
+            )
+          }
+        ),
+        showMeeting && showMapping && /* @__PURE__ */ jsxs(
+          motion.svg,
+          {
+            className: "ds-funnel-scaling__data-line",
+            style: { right: 240, bottom: 80, width: 120, height: 200 },
+            viewBox: "0 0 120 200",
+            initial: { opacity: 0 },
+            animate: { opacity: 0.4 },
+            transition: { delay: 0.3, duration: 0.5 },
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  d: "M 0 200 C 20 150, 80 100, 120 40",
+                  stroke: "url(#fscFlowGrad)",
+                  strokeWidth: "1.5",
+                  fill: "none",
+                  strokeLinecap: "round",
+                  initial: { pathLength: 0 },
+                  animate: { pathLength: 1 },
+                  transition: { duration: 0.8, ease: EASE_PREMIUM, delay: 0.2 }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.circle,
+                {
+                  cx: "120",
+                  cy: "40",
+                  r: "3",
+                  fill: "var(--brand-pink)",
+                  initial: { opacity: 0, scale: 0 },
+                  animate: { opacity: 1, scale: 1 },
+                  transition: { delay: 1, duration: 0.3 }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "ds-funnel-scaling__scaling-panel",
+            initial: { opacity: 0, y: 20 },
+            animate: showScaling ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 },
+            transition: { duration: 0.5, ease: EASE_PREMIUM },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "ds-funnel-scaling__scaling-header", children: [
+                /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 1L11 6L6 11L1 6Z", stroke: "currentColor", strokeWidth: "1.2" }) }),
+                "Scaling Mode"
+              ] }),
+              SCALING_CHECKS.map((item, i) => /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  className: "ds-funnel-scaling__scaling-item",
+                  initial: { opacity: 0, x: -10 },
+                  animate: showScaling ? { opacity: 1, x: 0 } : { opacity: 0, x: -10 },
+                  transition: { delay: 0.15 + i * 0.12, duration: 0.35, ease: EASE_PREMIUM },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        initial: { scale: 0 },
+                        animate: showScaling ? { scale: 1 } : { scale: 0 },
+                        transition: { delay: 0.25 + i * 0.12, duration: 0.3, ease: EASE_PREMIUM },
+                        children: /* @__PURE__ */ jsx(CheckIcon, {})
+                      }
+                    ),
+                    item
+                  ]
+                },
+                item
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "ds-funnel-scaling__ant",
+            initial: { opacity: 0, x: -40, y: 100 },
+            animate: showScaling ? { opacity: 1, x: 280, y: 60 } : showMapping ? { opacity: 1, x: 240, y: 160 } : showMeeting ? { opacity: 1, x: 400, y: 280 } : showQualification ? { opacity: 1, x: 380, y: 200 } : showFunnel ? { opacity: 1, x: 320, y: 40 } : showInit ? { opacity: 1, x: 220, y: 30 } : { opacity: 0, x: -40, y: 100 },
+            transition: {
+              duration: 0.8,
+              ease: EASE_PREMIUM,
+              opacity: { duration: 0.4 }
+            },
+            children: /* @__PURE__ */ jsx(AntSVG, {})
+          }
+        )
+      ]
+    }
+  );
+};
+FunnelScalingSender.displayName = "FunnelScalingSender";
+
+export { CursorSpotlight, FunnelScalingSender, MotionContainer, MotionText, RevenueAutomationLoop, SpotlightCard };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map