@dreamtree-org/twreact-ui 2.1.2 → 2.2.1

package/dist/motion/index.js

@@ -0,0 +1,1813 @@
+'use strict';
+
+var cn = require('../_shared/cn-TMJ-_w1a.js');
+var React = require('react');
+var useLatestRef = require('../_shared/useLatestRef-CdtlnPUz.js');
+var jsxRuntime = require('react/jsx-runtime');
+var useReducedMotion = require('../_shared/useReducedMotion-B_PMM5ER.js');
+require('clsx');
+require('tailwind-merge');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// Internal motion engine: ONE requestAnimationFrame loop shared by every motion
+// component. Each frame runs every subscriber's `measure()` (DOM reads) first,
+// then every `write(measured, now)` (DOM writes), so reads and writes never
+// interleave and the browser lays out at most once per frame.
+//
+// The loop is idle unless something asks for a frame: a scroll or resize event
+// (passive listeners), a new subscriber, or a subscriber with `loop: true`
+// (time-based work such as CountUp or Lenis). Scenes subscribe only while they
+// are near the viewport (see inView.js), so off-screen sections cost nothing.
+var subscribers = new Set();
+var frameId = 0;
+var listening = false;
+function hasWindow() {
+  return typeof window !== "undefined" && typeof window.requestAnimationFrame === "function";
+}
+function runFrame(now) {
+  frameId = 0;
+  var list = Array.from(subscribers);
+  var measured = list.map(function (s) {
+    return s.measure ? s.measure() : undefined;
+  });
+  var again = false;
+  list.forEach(function (s, i) {
+    if (!subscribers.has(s)) return; // unsubscribed by an earlier write this frame
+    if (s.write) s.write(measured[i], now);
+    if (s.loop && subscribers.has(s)) again = true;
+  });
+  if (again) requestFrame();
+}
+/** Ask for one frame (coalesced: many calls before the frame run it once). */
+function requestFrame() {
+  if (frameId || !hasWindow()) return;
+  frameId = requestAnimationFrame(runFrame);
+}
+var onScrollOrResize = function onScrollOrResize() {
+  return requestFrame();
+};
+function listen(on) {
+  if (on === listening || typeof window === "undefined") return;
+  listening = on;
+  var method = on ? "addEventListener" : "removeEventListener";
+  window[method]("scroll", onScrollOrResize, {
+    passive: true
+  });
+  window[method]("resize", onScrollOrResize, {
+    passive: true
+  });
+}
+/**
+ * Register `{ measure?, write?, loop? }`. Returns the unsubscribe function.
+ * The subscriber gets a frame right away, so it can paint its first state.
+ */
+function subscribe(subscriber) {
+  subscribers.add(subscriber);
+  listen(true);
+  requestFrame();
+  return function () {
+    subscribers["delete"](subscriber);
+    if (subscribers.size === 0) {
+      listen(false);
+      if (frameId && hasWindow()) cancelAnimationFrame(frameId);
+      frameId = 0;
+    }
+  };
+}
+
+// Internal: one shared IntersectionObserver per (rootMargin, threshold) pair.
+// `observe(el, cb)` calls `cb(isIntersecting, entry)` on every change and
+// returns a function that stops observing. Without IntersectionObserver (old
+// browsers, some test environments) the element counts as always in view.
+var observers = new Map();
+function getObserver(rootMargin, threshold) {
+  var key = "".concat(rootMargin, "|").concat(threshold);
+  var record = observers.get(key);
+  if (!record) {
+    var callbacks = new Map();
+    var io = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var cb = callbacks.get(entry.target);
+        if (cb) cb(entry.isIntersecting, entry);
+      });
+    }, {
+      rootMargin: rootMargin,
+      threshold: threshold
+    });
+    record = {
+      io: io,
+      callbacks: callbacks,
+      key: key
+    };
+    observers.set(key, record);
+  }
+  return record;
+}
+function observe(el, callback) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$rootMargin = _ref.rootMargin,
+    rootMargin = _ref$rootMargin === void 0 ? "0px" : _ref$rootMargin,
+    _ref$threshold = _ref.threshold,
+    threshold = _ref$threshold === void 0 ? 0 : _ref$threshold;
+  if (!el) return function () {};
+  if (typeof IntersectionObserver === "undefined") {
+    callback(true, null);
+    return function () {};
+  }
+  var record = getObserver(rootMargin, threshold);
+  record.callbacks.set(el, callback);
+  record.io.observe(el);
+  return function () {
+    if (!record.callbacks.has(el)) return;
+    record.callbacks["delete"](el);
+    record.io.unobserve(el);
+    if (record.callbacks.size === 0) {
+      record.io.disconnect();
+      observers["delete"](record.key);
+    }
+  };
+}
+
+// Internal: pure scroll-progress maths (unit-tested, no DOM).
+var clamp01 = function clamp01(v) {
+  return v > 0 ? v < 1 ? v : 1 : 0;
+};
+var lerp = function lerp(a, b, t) {
+  return a + (b - a) * t;
+};
+/** Ease-out cubic: fast start, gentle stop. */
+var easeOut = function easeOut(t) {
+  return 1 - Math.pow(1 - t, 3);
+};
+/** Ease-in-out cubic. */
+var easeInOut = function easeInOut(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+};
+/** Re-map `t` from the window [from, to] to 0–1 (clamped). */
+var segment = function segment(t, from, to) {
+  return clamp01((t - from) / (to - from || 1));
+};
+/**
+ * Scroll progress of an element.
+ *  - "view": 0 when its top meets the viewport bottom, 1 when its bottom leaves the viewport top.
+ *  - "pin":  0 when its top meets the viewport top, 1 when its bottom meets the viewport bottom
+ *            (the span a `position: sticky` child stays pinned).
+ * `start` / `end` narrow the range: progress is re-mapped from [start, end] to 0–1.
+ */
+function computeProgress(top, height, viewport) {
+  var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "view" : _ref$mode,
+    _ref$start = _ref.start,
+    start = _ref$start === void 0 ? 0 : _ref$start,
+    _ref$end = _ref.end,
+    end = _ref$end === void 0 ? 1 : _ref$end;
+  var raw;
+  if (mode === "pin") {
+    var span = height - viewport;
+    raw = span > 0 ? -top / span : top <= 0 ? 1 : 0;
+  } else {
+    raw = (viewport - top) / (viewport + height || 1);
+  }
+  return segment(clamp01(raw), start, end);
+}
+
+function createStore(initial) {
+  var value = initial;
+  var listeners = new Set();
+  return {
+    get: function get() {
+      return value;
+    },
+    set: function set(next) {
+      if (next === value) return;
+      value = next;
+      listeners.forEach(function (fn) {
+        return fn(next);
+      });
+    },
+    subscribe: function subscribe(fn) {
+      listeners.add(fn);
+      return function () {
+        listeners["delete"](fn);
+      };
+    }
+  };
+}
+/**
+ * Scroll progress (0–1) of `ref`'s element, without re-rendering React on every frame.
+ *
+ * Returns a subscription (`get()` / `subscribe(fn)`), writes the value to the element as a
+ * CSS custom property (`--dt-p` by default) so CSS can map it to transforms, and calls
+ * `onChange`. Work runs on the shared motion frame loop, and only while the element is
+ * near the viewport.
+ *
+ * The value starts at 1 (the final state) and the CSS variable is unset on the server, under
+ * reduced motion (pass `enabled: false`) and after unmount, so write CSS with a final-state
+ * fallback: `opacity: var(--dt-p, 1)`.
+ */
+function useScrollProgress(ref) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$mode = options.mode,
+    mode = _options$mode === void 0 ? "view" : _options$mode,
+    _options$start = options.start,
+    start = _options$start === void 0 ? 0 : _options$start,
+    _options$end = options.end,
+    end = _options$end === void 0 ? 1 : _options$end,
+    _options$cssVar = options.cssVar,
+    cssVar = _options$cssVar === void 0 ? "--dt-p" : _options$cssVar,
+    _options$enabled = options.enabled,
+    enabled = _options$enabled === void 0 ? true : _options$enabled;
+  var _useState = React.useState(function () {
+      return createStore(1);
+    }),
+    _useState2 = cn._slicedToArray(_useState, 1),
+    store = _useState2[0];
+  var onChangeRef = useLatestRef.useLatestRef(options.onChange);
+  React.useEffect(function () {
+    var el = ref.current;
+    if (!el || !enabled) return undefined;
+    var measure = function measure() {
+      var rect = el.getBoundingClientRect();
+      return computeProgress(rect.top, rect.height, innerHeight, {
+        mode: mode,
+        start: start,
+        end: end
+      });
+    };
+    var _write = function write(p) {
+      if (cssVar) el.style.setProperty(cssVar, p.toFixed(4));
+      if (p !== store.get()) {
+        var _onChangeRef$current;
+        store.set(p);
+        (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, p);
+      }
+    };
+    var unsubscribe = null;
+    var stopObserving = observe(el, function (inView) {
+      if (inView && !unsubscribe) {
+        unsubscribe = subscribe({
+          measure: measure,
+          write: function write(p) {
+            return _write(p);
+          }
+        });
+      } else if (!inView && unsubscribe) {
+        _write(measure()); // settle at 0 or 1 even after a fast fling
+        unsubscribe();
+        unsubscribe = null;
+      }
+    }, {
+      rootMargin: "25% 0px"
+    });
+    return function () {
+      stopObserving();
+      if (unsubscribe) unsubscribe();
+      if (cssVar) el.style.removeProperty(cssVar);
+      store.set(1);
+    };
+  }, [ref, enabled, mode, start, end, cssVar, store, onChangeRef]);
+  return store;
+}
+
+/** Assigns one DOM node to several refs (callback or object). */
+function setRefs(node) {
+  for (var _len = arguments.length, refs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    refs[_key - 1] = arguments[_key];
+  }
+  refs.forEach(function (ref) {
+    if (!ref) return;
+    if (typeof ref === "function") ref(node);else ref.current = node;
+  });
+}
+
+// Internal: one callback ref that feeds a forwarded ref and a local ref.
+function useMergedRef(forwardedRef, localRef) {
+  return React.useCallback(function (node) {
+    return setRefs(node, localRef, forwardedRef);
+  }, [forwardedRef, localRef]);
+}
+
+// Defaults from the `scroll` group of tokens/tokens.json (kept in sync by
+// src/motion/engine/__tests__/tokens.test.js). Plain numbers so the motion
+// entry does not bundle the token file.
+var SCROLL_STICKY_TOP = 80; // px — scroll.stickyTop
+var SCENE_LENGTH = 300; // vh — scroll.sceneLength
+var SCENE_LENGTH_MOBILE = 150; // vh — scroll.sceneLengthMobile
+/** Below Tailwind's `md` breakpoint. */
+var MOBILE_QUERY = "(max-width: 767px)";
+
+var _excluded$c = ["length", "mobileLength", "pin", "children", "onProgress", "className", "contentClassName", "style", "as"];
+/**
+ * A pinned scroll scene: a tall section whose content sticks to the viewport while the
+ * user scrolls through `length` vh. Progress (0–1) is written to `--dt-p` on the root, so
+ * children animate with CSS (`opacity: var(--dt-p, 1)`), and passed to `children(progress)`
+ * and `onProgress`. Under reduced motion, or with `pin={false}`, it renders in normal flow
+ * at its final state.
+ */
+var ScrollStage = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var _ref$length = _ref.length,
+    length = _ref$length === void 0 ? SCENE_LENGTH : _ref$length,
+    _ref$mobileLength = _ref.mobileLength,
+    mobileLength = _ref$mobileLength === void 0 ? SCENE_LENGTH_MOBILE : _ref$mobileLength,
+    _ref$pin = _ref.pin,
+    pin = _ref$pin === void 0 ? true : _ref$pin,
+    children = _ref.children,
+    onProgress = _ref.onProgress,
+    className = _ref.className,
+    contentClassName = _ref.contentClassName,
+    style = _ref.style,
+    _ref$as = _ref.as,
+    Tag = _ref$as === void 0 ? "section" : _ref$as,
+    rest = cn._objectWithoutProperties(_ref, _excluded$c);
+  var local = React.useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion.useReducedMotion();
+  var mobile = useReducedMotion.useMediaQuery(MOBILE_QUERY);
+  var pinned = pin && !reduced;
+  var progress = useScrollProgress(local, {
+    mode: "pin",
+    enabled: pinned,
+    onChange: onProgress
+  });
+  var vh = mobile ? mobileLength : length;
+  return jsxRuntime.jsx(Tag, cn._objectSpread2(cn._objectSpread2({
+    ref: setRef,
+    "data-dt-stage": pinned ? "pinned" : "static",
+    className: cn.cn("relative", className),
+    style: pinned ? cn._objectSpread2({
+      height: "".concat(Math.max(vh, 100), "vh")
+    }, style) : style
+  }, rest), {}, {
+    children: jsxRuntime.jsx("div", {
+      className: cn.cn(pinned && "sticky top-0 h-screen overflow-hidden", contentClassName),
+      children: typeof children === "function" ? children(progress) : children
+    })
+  }));
+});
+ScrollStage.displayName = "ScrollStage";
+
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+
+var _excluded$b = ["effect", "delay", "stagger", "once", "as", "className", "style", "children"];
+var BASE = "transition-[opacity,transform,clip-path] duration-700 ease-emphasized motion-reduce:transition-none";
+// Classes for the hidden state of each effect (the shown state is the element's natural style).
+var HIDDEN = {
+  "fade-up": "opacity-0 translate-y-6",
+  fade: "opacity-0",
+  scale: "opacity-0 scale-95",
+  clip: "[clip-path:inset(0_0_100%_0)]",
+  "split-words": ""
+};
+var WORD_HIDDEN = "opacity-0 translate-y-[0.6em]";
+/**
+ * Plays an entrance when the element scrolls into view. The server, no-JS readers and
+ * reduced-motion users get the content as-is; elements already on screen at load are not
+ * hidden (no flash, no LCP delay). Only content below the fold animates.
+ */
+var Reveal = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var _ref$effect = _ref.effect,
+    effect = _ref$effect === void 0 ? "fade-up" : _ref$effect,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    _ref$stagger = _ref.stagger,
+    stagger = _ref$stagger === void 0 ? 40 : _ref$stagger,
+    _ref$once = _ref.once,
+    once = _ref$once === void 0 ? true : _ref$once,
+    _ref$as = _ref.as,
+    Tag = _ref$as === void 0 ? "div" : _ref$as,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    rest = cn._objectWithoutProperties(_ref, _excluded$b);
+  var local = React.useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion.useReducedMotion();
+  // "static": final state (server, reduced motion, above the fold) · "hidden" · "shown"
+  var _useState = React.useState("static"),
+    _useState2 = cn._slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useIsomorphicLayoutEffect(function () {
+    var el = local.current;
+    if (reduced || !el) {
+      setState("static");
+      return undefined;
+    }
+    var belowFold = el.getBoundingClientRect().top > innerHeight;
+    if (!belowFold && once) return undefined;
+    if (belowFold) setState("hidden");
+    var stop = function stop() {};
+    stop = observe(el, function (inView) {
+      if (inView) {
+        setState("shown");
+        if (once) stop();
+      } else if (!once) {
+        setState("hidden");
+      }
+    }, {
+      threshold: 0.15
+    });
+    return function () {
+      return stop();
+    };
+  }, [reduced, once]);
+  var hidden = state === "hidden";
+  var animated = state !== "static";
+  if (effect === "split-words" && typeof children === "string") {
+    var words = children.split(/\s+/).filter(Boolean);
+    return jsxRuntime.jsxs(Tag, cn._objectSpread2(cn._objectSpread2({
+      ref: setRef,
+      className: className,
+      style: style
+    }, rest), {}, {
+      children: [jsxRuntime.jsx("span", {
+        className: "sr-only",
+        children: children
+      }), jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        children: words.map(function (word, i) {
+          return jsxRuntime.jsxs(React__default.default.Fragment, {
+            children: [jsxRuntime.jsx("span", {
+              className: cn.cn("inline-block", animated && BASE, hidden && WORD_HIDDEN),
+              style: animated ? {
+                transitionDelay: "".concat(delay + i * stagger, "ms")
+              } : undefined,
+              children: word
+            }), i < words.length - 1 ? " " : null]
+          }, i);
+        })
+      })]
+    }));
+  }
+  return jsxRuntime.jsx(Tag, cn._objectSpread2(cn._objectSpread2({
+    ref: setRef,
+    "data-reveal": state,
+    className: cn.cn(animated && BASE, hidden && (HIDDEN[effect] || HIDDEN["fade-up"]), className),
+    style: animated && delay ? cn._objectSpread2({
+      transitionDelay: "".concat(delay, "ms")
+    }, style) : style
+  }, rest), {}, {
+    children: children
+  }));
+});
+Reveal.displayName = "Reveal";
+
+var _excluded$a = ["effect", "delay", "stagger", "once", "as", "itemAs", "children"];
+/** Reveals each child in turn: child `i` waits `delay + i * stagger` ms. */
+var RevealGroup = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var _ref$effect = _ref.effect,
+    effect = _ref$effect === void 0 ? "fade-up" : _ref$effect,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 0 : _ref$delay,
+    _ref$stagger = _ref.stagger,
+    stagger = _ref$stagger === void 0 ? 80 : _ref$stagger,
+    _ref$once = _ref.once,
+    once = _ref$once === void 0 ? true : _ref$once,
+    _ref$as = _ref.as,
+    Tag = _ref$as === void 0 ? "div" : _ref$as,
+    _ref$itemAs = _ref.itemAs,
+    itemAs = _ref$itemAs === void 0 ? "div" : _ref$itemAs,
+    children = _ref.children,
+    rest = cn._objectWithoutProperties(_ref, _excluded$a);
+  var index = 0;
+  return jsxRuntime.jsx(Tag, cn._objectSpread2(cn._objectSpread2({
+    ref: ref
+  }, rest), {}, {
+    children: React__default.default.Children.map(children, function (child) {
+      if (child == null || child === false) return child;
+      var i = index++;
+      return jsxRuntime.jsx(Reveal, {
+        as: itemAs,
+        effect: effect === "split-words" ? "fade-up" : effect,
+        delay: delay + i * stagger,
+        once: once,
+        children: child
+      });
+    })
+  }));
+});
+RevealGroup.displayName = "RevealGroup";
+
+function nativeScrollTo(target) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    _ref$immediate = _ref.immediate,
+    immediate = _ref$immediate === void 0 ? false : _ref$immediate;
+  if (typeof window === "undefined") return;
+  var el = typeof target === "string" ? document.querySelector(target) : target;
+  var top = typeof el === "number" ? el : el ? el.getBoundingClientRect().top + window.scrollY : null;
+  if (top == null) return;
+  window.scrollTo({
+    top: top + offset,
+    behavior: immediate ? "auto" : "smooth"
+  });
+}
+/** Native scrolling: the value outside a SmoothScrollProvider (or while Lenis is off). */
+var NATIVE_SCROLL = {
+  lenis: null,
+  scrollTo: nativeScrollTo
+};
+var SmoothScrollContext = /*#__PURE__*/React.createContext(NATIVE_SCROLL);
+/**
+ * `{ lenis, scrollTo }` from the nearest SmoothScrollProvider. Outside one, or while smooth
+ * scroll is off, `lenis` is `null` and `scrollTo` uses native `window.scrollTo`.
+ */
+function useSmoothScroll() {
+  return React.useContext(SmoothScrollContext);
+}
+
+/**
+ * Opt-in smooth (inertial) scrolling with Lenis. Lenis is an optional peer dependency
+ * and is never imported by this package: install it and pass the class —
+ * `<SmoothScrollProvider lenis={Lenis}>`. Without `lenis`, with `enabled={false}` or when
+ * the user prefers reduced motion, the page keeps native scrolling. Lenis runs on the same
+ * frame loop as the other motion components.
+ */
+function SmoothScrollProvider(_ref) {
+  var LenisClass = _ref.lenis,
+    options = _ref.options,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    children = _ref.children;
+  var reduced = useReducedMotion.useReducedMotion();
+  var _useState = React.useState(null),
+    _useState2 = cn._slicedToArray(_useState, 2),
+    instance = _useState2[0],
+    setInstance = _useState2[1];
+  React.useEffect(function () {
+    if (!enabled || reduced || typeof LenisClass !== "function") return undefined;
+    var lenis = new LenisClass(cn._objectSpread2({
+      autoRaf: false
+    }, options));
+    var unsubscribe = subscribe({
+      loop: true,
+      write: function write(_, now) {
+        return lenis.raf(now);
+      }
+    });
+    setInstance(lenis);
+    return function () {
+      unsubscribe();
+      lenis.destroy();
+      setInstance(null);
+    };
+    // `options` is read once per Lenis instance; change `enabled` or `lenis` to rebuild it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [LenisClass, enabled, reduced]);
+  var value = React.useMemo(function () {
+    return instance ? {
+      lenis: instance,
+      scrollTo: function scrollTo(target) {
+        var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        return instance.scrollTo(target, opts);
+      }
+    } : NATIVE_SCROLL;
+  }, [instance]);
+  return jsxRuntime.jsx(SmoothScrollContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+SmoothScrollProvider.displayName = "SmoothScrollProvider";
+
+var _excluded$9 = ["device", "url", "screenClassName", "screenRef", "className", "children"];
+// Bezel parts read `--dt-chrome` (opacity, default 1) so DeviceMorphHero can fade them in.
+var CHROME = "opacity-[var(--dt-chrome,1)]";
+// Bezels are borders (not filled boxes) so the screen area stays see-through: DeviceMorphHero
+// slides its full-bleed media layer under a transparent screen.
+var FRAMES = {
+  phone: {
+    root: "w-[220px] md:w-[262px] aspect-[262/562]",
+    bezel: "inset-0 rounded-[2.75rem] md:rounded-[3.25rem] border-[10px] border-shell shadow-2xl",
+    screen: "inset-[10px] rounded-[2.1rem] md:rounded-[2.6rem]",
+    extras: jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        className: cn.cn("absolute left-1/2 top-[18px] h-[22px] w-[30%] -translate-x-1/2 rounded-pill bg-shell", CHROME)
+      }), jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        className: cn.cn("absolute bottom-[16px] left-1/2 h-[4px] w-[34%] -translate-x-1/2 rounded-pill bg-shell-foreground/70", CHROME)
+      }), jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        className: cn.cn("absolute -left-[3px] top-[22%] h-[9%] w-[3px] rounded-l bg-shell-active", CHROME)
+      }), jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        className: cn.cn("absolute -right-[3px] top-[28%] h-[14%] w-[3px] rounded-r bg-shell-active", CHROME)
+      })]
+    })
+  },
+  tablet: {
+    root: "w-[320px] md:w-[440px] aspect-[3/4]",
+    bezel: "inset-0 rounded-[2rem] border-[14px] border-shell shadow-2xl",
+    screen: "inset-[14px] rounded-[1rem]",
+    extras: jsxRuntime.jsx("span", {
+      "aria-hidden": "true",
+      className: cn.cn("absolute left-1/2 top-[5px] h-[4px] w-[4px] -translate-x-1/2 rounded-full bg-shell-active", CHROME)
+    })
+  },
+  laptop: {
+    root: "w-[340px] md:w-[640px] aspect-[16/10.6]",
+    bezel: "inset-x-0 top-0 bottom-[4%] rounded-t-[1.25rem] border-[10px] border-b-[22px] border-shell shadow-2xl",
+    screen: "left-[10px] right-[10px] top-[10px] bottom-[calc(4%+22px)] rounded-[0.25rem]",
+    extras: jsxRuntime.jsx("span", {
+      "aria-hidden": "true",
+      className: cn.cn("absolute -inset-x-[6%] bottom-0 h-[4%] rounded-b-[1rem] bg-line shadow-lg", CHROME)
+    })
+  },
+  browser: {
+    root: "w-[340px] md:w-[720px] aspect-[16/10.5]",
+    bezel: "inset-0 rounded-card border border-t-[36px] border-line border-t-gray-100 shadow-2xl dark:border-t-gray-800",
+    screen: "inset-x-px bottom-px top-[36px] rounded-b-card",
+    extras: null
+  }
+};
+/**
+ * A CSS-only device mock-up (phone, tablet, laptop or browser window) around any
+ * screen content. Purely presentational: no motion, works anywhere.
+ */
+var DeviceFrame = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var _ref$device = _ref.device,
+    device = _ref$device === void 0 ? "phone" : _ref$device,
+    url = _ref.url,
+    screenClassName = _ref.screenClassName,
+    screenRef = _ref.screenRef,
+    className = _ref.className,
+    children = _ref.children,
+    rest = cn._objectWithoutProperties(_ref, _excluded$9);
+  var f = FRAMES[device] || FRAMES.phone;
+  return jsxRuntime.jsxs("div", cn._objectSpread2(cn._objectSpread2({
+    ref: ref,
+    "data-device": device,
+    className: cn.cn("relative shrink-0", f.root, className)
+  }, rest), {}, {
+    children: [jsxRuntime.jsx("div", {
+      "aria-hidden": "true",
+      className: cn.cn("pointer-events-none absolute", f.bezel, CHROME)
+    }), device === "browser" ? jsxRuntime.jsxs("div", {
+      "aria-hidden": "true",
+      className: cn.cn("absolute inset-x-0 top-0 flex h-[36px] items-center gap-1.5 px-3", CHROME),
+      children: [jsxRuntime.jsx("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-error-400"
+      }), jsxRuntime.jsx("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-warning-400"
+      }), jsxRuntime.jsx("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-success-400"
+      }), url ? jsxRuntime.jsx("span", {
+        className: "ml-3 flex-1 truncate rounded-pill bg-surface px-3 py-0.5 text-micro text-muted dark:bg-background",
+        children: url
+      }) : null]
+    }) : null, jsxRuntime.jsx("div", {
+      ref: screenRef,
+      className: cn.cn("absolute overflow-hidden bg-surface dark:bg-background", f.screen, screenClassName),
+      children: children
+    }), f.extras]
+  }));
+});
+DeviceFrame.displayName = "DeviceFrame";
+
+var _excluded$8 = ["items", "speed", "direction", "pauseOnHover", "fadeEdges", "rows", "label", "className"];
+var isLogo = function isLogo(item) {
+  return item && cn._typeof(item) === "object" && ! /*#__PURE__*/React__default.default.isValidElement(item) && "src" in item;
+};
+function MarqueeItem(_ref) {
+  var item = _ref.item;
+  if (isLogo(item)) {
+    var img = jsxRuntime.jsx("img", {
+      src: item.src,
+      alt: item.alt,
+      loading: "lazy",
+      className: "h-8 w-auto max-w-[10rem] object-contain"
+    });
+    return item.href ? jsxRuntime.jsx("a", {
+      href: item.href,
+      className: "rounded-control focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+      children: img
+    }) : img;
+  }
+  if (typeof item === "string") {
+    return jsxRuntime.jsx("span", {
+      className: "whitespace-nowrap text-lg font-semibold tracking-tight text-muted",
+      children: item
+    });
+  }
+  return item;
+}
+function List(_ref2) {
+  var items = _ref2.items,
+    clone = _ref2.clone;
+  return jsxRuntime.jsx("ul", {
+    role: clone ? undefined : "list",
+    "aria-hidden": clone ? "true" : undefined,
+    className: cn.cn("flex shrink-0 items-center gap-x-12 pr-12", clone && "motion-reduce:hidden", "motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-6 motion-reduce:pr-0"),
+    children: items.map(function (item, i) {
+      return jsxRuntime.jsx("li", {
+        className: "flex shrink-0 items-center",
+        children: clone && isLogo(item) && item.href ? jsxRuntime.jsx(MarqueeItem, {
+          item: {
+            src: item.src,
+            alt: item.alt
+          }
+        }) : jsxRuntime.jsx(MarqueeItem, {
+          item: item
+        })
+      }, i);
+    })
+  });
+}
+/**
+ * An endless strip of logos or names. The second copy of the list (needed for a seamless
+ * loop) is `aria-hidden`, so screen readers read each item once. Pauses on hover, while
+ * focus is inside and while off screen; under reduced motion it is a static, wrapped row.
+ */
+var LogoMarquee = /*#__PURE__*/React__default.default.forwardRef(function (_ref3, ref) {
+  var _ref3$items = _ref3.items,
+    items = _ref3$items === void 0 ? [] : _ref3$items,
+    _ref3$speed = _ref3.speed,
+    speed = _ref3$speed === void 0 ? 40 : _ref3$speed,
+    _ref3$direction = _ref3.direction,
+    direction = _ref3$direction === void 0 ? "left" : _ref3$direction,
+    _ref3$pauseOnHover = _ref3.pauseOnHover,
+    pauseOnHover = _ref3$pauseOnHover === void 0 ? true : _ref3$pauseOnHover,
+    _ref3$fadeEdges = _ref3.fadeEdges,
+    fadeEdges = _ref3$fadeEdges === void 0 ? true : _ref3$fadeEdges,
+    _ref3$rows = _ref3.rows,
+    rows = _ref3$rows === void 0 ? 1 : _ref3$rows,
+    _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? "Clients" : _ref3$label,
+    className = _ref3.className,
+    rest = cn._objectWithoutProperties(_ref3, _excluded$8);
+  var local = React.useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var _useState = React.useState(true),
+    _useState2 = cn._slicedToArray(_useState, 2),
+    inView = _useState2[0],
+    setInView = _useState2[1];
+  // Seconds per loop. A rough guess for the server render; measured on the client.
+  var _useState3 = React.useState(Math.max(items.length, 4) * 3),
+    _useState4 = cn._slicedToArray(_useState3, 2),
+    seconds = _useState4[0],
+    setSeconds = _useState4[1];
+  React.useEffect(function () {
+    return observe(local.current, function (v) {
+      return setInView(v);
+    });
+  }, []);
+  React.useEffect(function () {
+    var list = local.current && local.current.querySelector("ul");
+    if (!list) return undefined;
+    var measure = function measure() {
+      var width = list.getBoundingClientRect().width;
+      if (width > 0 && speed > 0) setSeconds(width / speed);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    var ro = new ResizeObserver(measure);
+    ro.observe(list);
+    return function () {
+      return ro.disconnect();
+    };
+  }, [speed, items]);
+  var rowCount = rows === 2 ? 2 : 1;
+  return jsxRuntime.jsx("div", cn._objectSpread2(cn._objectSpread2({
+    ref: setRef,
+    role: "region",
+    "aria-label": label,
+    className: cn.cn("group relative overflow-hidden py-2", fadeEdges && "[mask-image:linear-gradient(to_right,transparent,rgb(0_0_0)_8%,rgb(0_0_0)_92%,transparent)] motion-reduce:[mask-image:none]", className)
+  }, rest), {}, {
+    children: jsxRuntime.jsx("div", {
+      className: "flex flex-col gap-y-6",
+      children: Array.from({
+        length: rowCount
+      }, function (_, row) {
+        var reverse = direction === "right" !== (row === 1);
+        return jsxRuntime.jsxs("div", {
+          "data-marquee-track": "",
+          className: cn.cn("flex w-max animate-dt-marquee motion-reduce:w-full motion-reduce:animate-none motion-reduce:justify-center", pauseOnHover && "group-hover:[animation-play-state:paused]", "group-focus-within:[animation-play-state:paused]", !inView && "[animation-play-state:paused]"),
+          style: {
+            animationDuration: "".concat(seconds, "s"),
+            animationDirection: reverse ? "reverse" : "normal"
+          },
+          children: [jsxRuntime.jsx(List, {
+            items: items
+          }), jsxRuntime.jsx(List, {
+            items: items,
+            clone: true
+          })]
+        }, row);
+      })
+    })
+  }));
+});
+LogoMarquee.displayName = "LogoMarquee";
+
+var _excluded$7 = ["value", "from", "prefix", "suffix", "duration", "decimals", "locale", "format", "className"];
+var decimalsOf = function decimalsOf(n) {
+  var s = String(n);
+  var dot = s.indexOf(".");
+  return dot === -1 ? 0 : s.length - dot - 1;
+};
+/**
+ * A number that counts up when it scrolls into view. The server (and reduced motion)
+ * renders the real final value, so crawlers and no-JS readers never see "0". Screen readers
+ * read the final value once from a visually hidden copy; the animating digits are hidden.
+ */
+var CountUp = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var value = _ref.value,
+    _ref$from = _ref.from,
+    from = _ref$from === void 0 ? 0 : _ref$from,
+    prefix = _ref.prefix,
+    suffix = _ref.suffix,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 1600 : _ref$duration,
+    decimals = _ref.decimals,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? "en-IN" : _ref$locale,
+    format = _ref.format,
+    className = _ref.className,
+    rest = cn._objectWithoutProperties(_ref, _excluded$7);
+  var live = React.useRef(null);
+  var reduced = useReducedMotion.useReducedMotion();
+  var digits = decimals !== null && decimals !== void 0 ? decimals : decimalsOf(value);
+  var fmt = React.useMemo(function () {
+    if (format) return format;
+    var nf = new Intl.NumberFormat(locale, {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits
+    });
+    return function (n) {
+      return nf.format(n);
+    };
+  }, [format, locale, digits]);
+  var finalText = fmt(value);
+  React.useEffect(function () {
+    var el = live.current;
+    if (!el || reduced || duration <= 0) return undefined;
+    // Below the fold: show the start value until it scrolls in. On screen: count right away.
+    if (el.getBoundingClientRect().top > innerHeight) el.textContent = fmt(from);
+    var unsubscribe = null;
+    var stop = function stop() {};
+    stop = observe(el, function (inView) {
+      if (!inView || unsubscribe) return;
+      stop();
+      var t0 = null;
+      unsubscribe = subscribe({
+        loop: true,
+        write: function write(_, now) {
+          if (t0 === null) t0 = now;
+          var t = Math.min(1, (now - t0) / duration);
+          el.textContent = t < 1 ? fmt(from + (value - from) * easeOut(t)) : fmt(value);
+          if (t >= 1) unsubscribe();
+        }
+      });
+    }, {
+      threshold: 0.4
+    });
+    return function () {
+      stop();
+      if (unsubscribe) unsubscribe();
+      el.textContent = fmt(value);
+    };
+  }, [value, from, duration, fmt, reduced]);
+  return jsxRuntime.jsxs("span", cn._objectSpread2(cn._objectSpread2({
+    ref: ref,
+    className: cn.cn("tabular-nums", className)
+  }, rest), {}, {
+    children: [jsxRuntime.jsxs("span", {
+      "aria-hidden": "true",
+      children: [prefix, jsxRuntime.jsx("span", {
+        ref: live,
+        children: finalText
+      }), suffix]
+    }), jsxRuntime.jsxs("span", {
+      className: "sr-only",
+      children: [prefix, finalText, suffix]
+    })]
+  }));
+});
+CountUp.displayName = "CountUp";
+
+var _excluded$6 = ["items", "variant", "duration", "locale", "className"];
+var COLS = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4"
+};
+/**
+ * A row of headline numbers that count up on view — as bordered cards or one band with
+ * dividers. A description list: each label is a `<dt>`, each number its `<dd>`.
+ */
+var StatStrip = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "cards" : _ref$variant,
+    duration = _ref.duration,
+    locale = _ref.locale,
+    className = _ref.className,
+    rest = cn._objectWithoutProperties(_ref, _excluded$6);
+  var cards = variant !== "band";
+  var cols = COLS[Math.min(items.length, 4)] || COLS[4];
+  return jsxRuntime.jsx("dl", cn._objectSpread2(cn._objectSpread2({
+    ref: ref,
+    className: cn.cn("grid grid-cols-2", cols, cards ? "gap-4" : "gap-y-6 rounded-card border border-line bg-surface py-6 dark:bg-background sm:divide-x sm:divide-line", className)
+  }, rest), {}, {
+    children: items.map(function (item, i) {
+      return jsxRuntime.jsxs("div", {
+        className: cn.cn("flex flex-col-reverse gap-1", cards ? "rounded-card border border-line bg-surface p-6 shadow-xs dark:bg-background" : "px-6 text-center"),
+        children: [jsxRuntime.jsx("dt", {
+          className: "text-caption text-muted",
+          children: item.label
+        }), jsxRuntime.jsx("dd", {
+          className: "text-kpi font-semibold tracking-tight text-foreground",
+          children: jsxRuntime.jsx(CountUp, {
+            value: item.value,
+            prefix: item.prefix,
+            suffix: item.suffix,
+            decimals: item.decimals,
+            format: item.format,
+            duration: duration,
+            locale: locale
+          })
+        })]
+      }, i);
+    })
+  }));
+});
+StatStrip.displayName = "StatStrip";
+
+var _excluded$5 = ["items", "stickyTop", "tilt", "scaleBack", "dimBack", "mediaSide", "renderItem", "className", "style"];
+var isImage$2 = function isImage(media) {
+  return media && cn._typeof(media) === "object" && ! /*#__PURE__*/React__default.default.isValidElement(media) && "src" in media;
+};
+function CardBody(_ref) {
+  var item = _ref.item,
+    flip = _ref.flip;
+  return jsxRuntime.jsxs("div", {
+    className: "grid gap-8 md:grid-cols-2 md:items-center",
+    children: [jsxRuntime.jsxs("div", {
+      className: cn.cn("flex flex-col gap-4", flip && "md:order-2"),
+      children: [item.kicker ? jsxRuntime.jsx("p", {
+        className: "text-micro uppercase tracking-widest text-primary-600 dark:text-primary-400",
+        children: item.kicker
+      }) : null, jsxRuntime.jsx("h3", {
+        className: "text-section-title font-semibold tracking-tight text-foreground",
+        children: item.title
+      }), item.body ? jsxRuntime.jsx("div", {
+        className: "text-body text-muted",
+        children: item.body
+      }) : null, item.bullets && item.bullets.length ? jsxRuntime.jsx("ul", {
+        className: "grid gap-2 sm:grid-cols-2",
+        children: item.bullets.map(function (b, i) {
+          return jsxRuntime.jsxs("li", {
+            className: "flex items-start gap-2 text-caption text-foreground",
+            children: [jsxRuntime.jsx("span", {
+              "aria-hidden": "true",
+              className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary-500"
+            }), b]
+          }, i);
+        })
+      }) : null, item.metric || item.cta ? jsxRuntime.jsxs("div", {
+        className: "mt-2 flex flex-wrap items-end justify-between gap-4",
+        children: [item.metric ? jsxRuntime.jsxs("p", {
+          className: "flex flex-col",
+          children: [jsxRuntime.jsx("span", {
+            className: "text-kpi font-semibold text-foreground",
+            children: item.metric.value
+          }), jsxRuntime.jsx("span", {
+            className: "text-caption text-muted",
+            children: item.metric.label
+          })]
+        }) : null, item.cta]
+      }) : null]
+    }), item.media ? jsxRuntime.jsx("div", {
+      className: cn.cn("overflow-hidden rounded-card", flip && "md:order-1"),
+      children: isImage$2(item.media) ? jsxRuntime.jsx("img", {
+        src: item.media.src,
+        alt: item.media.alt,
+        loading: "lazy",
+        className: "aspect-[4/3] h-full w-full object-cover"
+      }) : item.media
+    }) : null]
+  });
+}
+/**
+ * Cards that stick one over another as the page scrolls (sticky stacking). Cards
+ * underneath shrink and dim as the next one covers them, and each has a slight
+ * alternating tilt so the stack looks hand-placed. Tilt is off below `md` and under
+ * reduced motion; the scale/dim effect is off under reduced motion.
+ */
+var StackedCards = /*#__PURE__*/React__default.default.forwardRef(function (_ref2, ref) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$stickyTop = _ref2.stickyTop,
+    stickyTop = _ref2$stickyTop === void 0 ? SCROLL_STICKY_TOP : _ref2$stickyTop,
+    _ref2$tilt = _ref2.tilt,
+    tilt = _ref2$tilt === void 0 ? 1 : _ref2$tilt,
+    _ref2$scaleBack = _ref2.scaleBack,
+    scaleBack = _ref2$scaleBack === void 0 ? 0.94 : _ref2$scaleBack,
+    _ref2$dimBack = _ref2.dimBack,
+    dimBack = _ref2$dimBack === void 0 ? 0.15 : _ref2$dimBack,
+    _ref2$mediaSide = _ref2.mediaSide,
+    mediaSide = _ref2$mediaSide === void 0 ? "alternate" : _ref2$mediaSide,
+    renderItem = _ref2.renderItem,
+    className = _ref2.className,
+    style = _ref2.style,
+    rest = cn._objectWithoutProperties(_ref2, _excluded$5);
+  var local = React.useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion.useReducedMotion();
+  React.useEffect(function () {
+    var list = local.current;
+    if (!list || reduced || scaleBack >= 1 && dimBack <= 0) return undefined;
+    var slots = Array.from(list.children);
+    var cards = slots.map(function (li) {
+      return li.firstElementChild;
+    });
+    var measure = function measure() {
+      return slots.map(function (li) {
+        return li.getBoundingClientRect();
+      });
+    };
+    var write = function write(rects) {
+      cards.forEach(function (card, i) {
+        var next = rects[i + 1];
+        // 0 while the next card is a full card-height away, 1 once it has reached the sticky line.
+        var cover = next ? clamp01(1 - (next.top - stickyTop) / Math.max(rects[i].height, 1)) : 0;
+        card.style.setProperty("--dt-scale", String(1 - (1 - scaleBack) * cover));
+        card.style.setProperty("--dt-dim", String(1 - dimBack * cover));
+      });
+    };
+    var unsubscribe = null;
+    var stop = observe(list, function (inView) {
+      if (inView && !unsubscribe) unsubscribe = subscribe({
+        measure: measure,
+        write: write
+      });else if (!inView && unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+    });
+    return function () {
+      stop();
+      if (unsubscribe) unsubscribe();
+      cards.forEach(function (card) {
+        card.style.removeProperty("--dt-scale");
+        card.style.removeProperty("--dt-dim");
+      });
+    };
+  }, [items, stickyTop, scaleBack, dimBack, reduced]);
+  return jsxRuntime.jsx("ol", cn._objectSpread2(cn._objectSpread2({
+    ref: setRef,
+    className: cn.cn("relative flex flex-col gap-8", className),
+    style: style
+  }, rest), {}, {
+    children: items.map(function (item, i) {
+      var _item$id;
+      var deg = tilt ? (i % 2 === 0 ? -1 : 1) * tilt * (1 + i % 3 * 0.5) : 0;
+      var flip = mediaSide === "alternate" && i % 2 === 1;
+      return jsxRuntime.jsx("li", {
+        className: "sticky",
+        style: {
+          top: "".concat(stickyTop, "px")
+        },
+        children: jsxRuntime.jsx("article", {
+          className: cn.cn("origin-top rounded-card border border-line bg-surface p-6 shadow-lg dark:bg-background md:p-10",
+          // motion-safe: none of this applies when the OS asks for reduced motion (even before hydration).
+          "motion-safe:[filter:brightness(var(--dt-dim,1))] motion-safe:[transform:scale(var(--dt-scale,1))]", "motion-safe:md:[transform:rotate(var(--dt-tilt,0deg))_scale(var(--dt-scale,1))]"),
+          style: deg ? {
+            "--dt-tilt": "".concat(deg, "deg")
+          } : undefined,
+          children: renderItem ? renderItem(item, i) : jsxRuntime.jsx(CardBody, {
+            item: item,
+            flip: flip
+          })
+        })
+      }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : i);
+    })
+  }));
+});
+StackedCards.displayName = "StackedCards";
+
+var subscribeNever = function subscribeNever() {
+  return function () {};
+};
+// Internal: false on the server and while hydrating, true after — without a
+// setState-in-effect. Lets a component render its static final state first.
+function useHydrated() {
+  return React.useSyncExternalStore(subscribeNever, function () {
+    return true;
+  }, function () {
+    return false;
+  });
+}
+
+var _excluded$4 = ["media", "device", "length", "mobileLength", "side", "content", "scrollHint", "className"];
+var MAX_LENGTH = 400;
+var COVER = "h-full w-full object-cover";
+function Media(_ref) {
+  var media = _ref.media,
+    videoRef = _ref.videoRef;
+  var decorative = !media.alt;
+  if (media.video) {
+    return jsxRuntime.jsx("video", {
+      ref: videoRef,
+      className: COVER,
+      src: media.video,
+      poster: media.poster,
+      muted: true,
+      loop: true,
+      autoPlay: true,
+      playsInline: true,
+      preload: "metadata",
+      "aria-label": decorative ? undefined : media.alt,
+      "aria-hidden": decorative ? "true" : undefined
+    });
+  }
+  return jsxRuntime.jsx("img", {
+    className: COVER,
+    src: media.image || media.poster,
+    alt: media.alt || ""
+  });
+}
+/**
+ * The signature scroll hero: full-bleed media shrinks into a device frame, the bezel fades
+ * in, then the device slides aside while the copy (`content`) fades in beside it. The
+ * timeline maps the scene's scroll progress: 0–45 % morph, 40–60 % bezel, 60–90 % slide.
+ * The server, no-JS readers and reduced-motion users get the final layout (copy beside the
+ * device) with no pinning. Below `md` the device rises and shrinks and the copy appears under it.
+ */
+var DeviceMorphHero = /*#__PURE__*/React__default.default.forwardRef(function (_ref2, ref) {
+  var media = _ref2.media,
+    _ref2$device = _ref2.device,
+    device = _ref2$device === void 0 ? "phone" : _ref2$device,
+    _ref2$length = _ref2.length,
+    length = _ref2$length === void 0 ? SCENE_LENGTH : _ref2$length,
+    _ref2$mobileLength = _ref2.mobileLength,
+    mobileLength = _ref2$mobileLength === void 0 ? SCENE_LENGTH_MOBILE : _ref2$mobileLength,
+    _ref2$side = _ref2.side,
+    side = _ref2$side === void 0 ? "right" : _ref2$side,
+    content = _ref2.content,
+    _ref2$scrollHint = _ref2.scrollHint,
+    scrollHint = _ref2$scrollHint === void 0 ? "Scroll to explore" : _ref2$scrollHint,
+    className = _ref2.className,
+    rest = cn._objectWithoutProperties(_ref2, _excluded$4);
+  var reduced = useReducedMotion.useReducedMotion();
+  var mobile = useReducedMotion.useMediaQuery(MOBILE_QUERY);
+  var armed = useHydrated() && !reduced;
+  var stageRef = React.useRef(null);
+  var setRef = useMergedRef(ref, stageRef);
+  var layerRef = React.useRef(null);
+  var frameRef = React.useRef(null);
+  var screenRef = React.useRef(null);
+  var contentRef = React.useRef(null);
+  var hintRef = React.useRef(null);
+  var videoRef = React.useRef(null);
+  var geo = React.useRef(null);
+  var _useSmoothScroll = useSmoothScroll(),
+    scrollTo = _useSmoothScroll.scrollTo;
+  // Re-measure the frame geometry after a resize or a layout change.
+  React.useEffect(function () {
+    var reset = function reset() {
+      geo.current = null;
+    };
+    reset();
+    window.addEventListener("resize", reset);
+    return function () {
+      return window.removeEventListener("resize", reset);
+    };
+  }, [mobile, device, armed]);
+  // Play the video only while the hero is on screen.
+  React.useEffect(function () {
+    return observe(stageRef.current, function (inView) {
+      var v = videoRef.current;
+      if (!v) return;
+      if (inView && !reduced) {
+        var played = v.play && v.play();
+        if (played && played["catch"]) played["catch"](function () {});
+      } else if (v.pause) v.pause();
+    });
+  }, [armed, reduced]);
+  var onProgress = React.useCallback(function (p) {
+    var layer = layerRef.current;
+    var frame = frameRef.current;
+    var screen = screenRef.current;
+    var stage = stageRef.current && stageRef.current.firstElementChild;
+    if (!layer || !frame || !screen || !stage) return;
+    if (!geo.current) {
+      geo.current = {
+        vw: stage.clientWidth,
+        vh: stage.clientHeight,
+        sx: frame.offsetLeft + screen.offsetLeft,
+        sy: frame.offsetTop + screen.offsetTop,
+        sw: screen.offsetWidth,
+        sh: screen.offsetHeight,
+        r: parseFloat(getComputedStyle(screen).borderTopLeftRadius) || 0
+      };
+    }
+    var g = geo.current;
+    if (!g.sw || !g.sh || !g.vw || !g.vh) return;
+    var q = easeInOut(segment(p, 0, 0.45)); // full-bleed → screen
+    var chrome = segment(p, 0.4, 0.6); // bezel fades in
+    var c = easeOut(segment(p, 0.6, 0.9)); // slide aside + copy in
+    var fit = Math.max(g.sw / g.vw, g.sh / g.vh);
+    var insetX = (g.vw - g.sw / fit) / 2 * q;
+    var insetY = (g.vh - g.sh / fit) / 2 * q;
+    var dx = (g.sx + g.sw / 2 - g.vw / 2) * q;
+    var dy = (g.sy + g.sh / 2 - g.vh / 2) * q;
+    var tx = mobile ? 0 : (side === "left" ? -1 : 1) * g.vw * 0.22 * c;
+    var ty = mobile ? -g.vh * 0.2 * c : 0;
+    var k = mobile ? lerp(1, 0.62, c) : 1;
+    layer.style.transform = "translate3d(".concat(dx + tx, "px,").concat(dy + ty, "px,0) scale(").concat(lerp(1, fit, q) * k, ")");
+    layer.style.clipPath = "inset(".concat(insetY, "px ").concat(insetX, "px round ").concat(g.r / fit * q, "px)");
+    frame.style.transform = "translate3d(".concat(tx, "px,").concat(ty, "px,0) scale(").concat(k, ")");
+    frame.style.setProperty("--dt-chrome", chrome.toFixed(3));
+    if (contentRef.current) {
+      contentRef.current.style.opacity = c.toFixed(3);
+      contentRef.current.style.transform = "translateY(".concat((1 - c) * 24, "px)");
+      contentRef.current.style.pointerEvents = c > 0.5 ? "auto" : "none";
+    }
+    if (hintRef.current) hintRef.current.style.opacity = (1 - segment(p, 0, 0.12)).toFixed(3);
+  }, [mobile, side]);
+  var skip = function skip() {
+    var stage = stageRef.current;
+    if (!stage) return;
+    var end = window.scrollY + stage.getBoundingClientRect().bottom - innerHeight;
+    scrollTo(end, {
+      immediate: reduced
+    });
+  };
+  var deviceLeft = side === "left";
+  if (!armed) {
+    return jsxRuntime.jsx("section", cn._objectSpread2(cn._objectSpread2({
+      ref: setRef,
+      "data-dt-hero": "static",
+      className: cn.cn("relative", className)
+    }, rest), {}, {
+      children: jsxRuntime.jsxs("div", {
+        className: "mx-auto grid max-w-7xl items-center gap-12 px-4 py-16 md:grid-cols-2 md:px-8",
+        children: [jsxRuntime.jsx("div", {
+          className: cn.cn(deviceLeft && "md:order-2"),
+          children: content
+        }), jsxRuntime.jsx("div", {
+          className: cn.cn("flex justify-center", deviceLeft && "md:order-1"),
+          children: jsxRuntime.jsx(DeviceFrame, {
+            device: device,
+            children: jsxRuntime.jsx(Media, {
+              media: media,
+              videoRef: videoRef
+            })
+          })
+        })]
+      })
+    }));
+  }
+  return jsxRuntime.jsxs(ScrollStage, cn._objectSpread2(cn._objectSpread2({
+    ref: setRef,
+    "data-dt-hero": "morph",
+    length: Math.min(length, MAX_LENGTH),
+    mobileLength: Math.min(mobileLength, MAX_LENGTH),
+    onProgress: onProgress,
+    className: className
+  }, rest), {}, {
+    children: [jsxRuntime.jsx("div", {
+      ref: layerRef,
+      className: "absolute inset-0 origin-center will-change-transform",
+      children: jsxRuntime.jsx(Media, {
+        media: media,
+        videoRef: videoRef
+      })
+    }), jsxRuntime.jsx("div", {
+      className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+      children: jsxRuntime.jsx(DeviceFrame, {
+        ref: frameRef,
+        screenRef: screenRef,
+        device: device,
+        screenClassName: "bg-transparent dark:bg-transparent",
+        className: "will-change-transform [--dt-chrome:0]"
+      })
+    }), content ? jsxRuntime.jsx("div", {
+      ref: contentRef,
+      // The copy stays in the accessibility tree while faded out. Tabbing into it jumps the
+      // scene to its end, so a focused link is never invisible.
+      onFocus: function onFocus() {
+        if (contentRef.current && parseFloat(contentRef.current.style.opacity || "0") < 1) skip();
+      },
+      className: cn.cn("pointer-events-none absolute opacity-0", "inset-x-0 bottom-0 max-h-[45%] overflow-y-auto px-4 pb-8", "md:inset-y-0 md:bottom-auto md:flex md:max-h-none md:w-1/2 md:items-center md:px-12 md:pb-0", deviceLeft ? "md:left-auto md:right-0" : "md:left-0 md:right-auto"),
+      children: jsxRuntime.jsx("div", {
+        className: "w-full",
+        children: content
+      })
+    }) : null, scrollHint !== false ? jsxRuntime.jsxs("button", {
+      ref: hintRef,
+      type: "button",
+      onClick: skip,
+      className: "absolute bottom-6 left-1/2 -translate-x-1/2 rounded-pill bg-shell/70 px-4 py-2 text-caption font-medium text-shell-foreground backdrop-blur focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400",
+      children: [scrollHint, jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        className: "ml-2 inline-block motion-safe:animate-bounce",
+        children: "\u2193"
+      })]
+    }) : null]
+  }));
+});
+DeviceMorphHero.displayName = "DeviceMorphHero";
+
+var _excluded$3 = ["items", "cols", "expand", "trigger", "label", "className", "style", "onMouseLeave"];
+var isImage$1 = function isImage(media) {
+  return media && cn._typeof(media) === "object" && ! /*#__PURE__*/React__default.default.isValidElement(media) && "src" in media;
+};
+var tracks = function tracks(count, active, expand) {
+  return Array.from({
+    length: count
+  }, function (_, i) {
+    return i === active ? "".concat(expand, "fr") : "1fr";
+  }).join(" ");
+};
+/**
+ * A photo grid whose active tile grows (its row and column tracks widen) while the
+ * neighbours shrink. Hover, keyboard focus and — with `trigger="click"` — tap expand a
+ * tile, and arrow keys move between tiles, so it never depends on a mouse. Below `md` it
+ * becomes a horizontal snap scroller. Under reduced motion the resize is instant.
+ */
+var BentoExpandGrid = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? 3 : _ref$cols,
+    _ref$expand = _ref.expand,
+    expand = _ref$expand === void 0 ? 2 : _ref$expand,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
+    label = _ref.label,
+    className = _ref.className,
+    style = _ref.style,
+    _onMouseLeave = _ref.onMouseLeave,
+    rest = cn._objectWithoutProperties(_ref, _excluded$3);
+  var local = React.useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var _useState = React.useState(null),
+    _useState2 = cn._slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var rows = Math.max(1, Math.ceil(items.length / cols));
+  var activeCol = active == null ? -1 : active % cols;
+  var activeRow = active == null ? -1 : Math.floor(active / cols);
+  var focusTile = function focusTile(index) {
+    var tiles = local.current ? local.current.querySelectorAll("[data-bento-tile]") : [];
+    if (tiles[index]) tiles[index].focus();
+  };
+  var _onKeyDown = function onKeyDown(event, index) {
+    var step = {
+      ArrowRight: 1,
+      ArrowLeft: -1,
+      ArrowDown: cols,
+      ArrowUp: -cols
+    }[event.key];
+    if (step === undefined) {
+      if (event.key === "Home") focusTile(0);else if (event.key === "End") focusTile(items.length - 1);else return;
+      event.preventDefault();
+      return;
+    }
+    var next = index + step;
+    if (next >= 0 && next < items.length) {
+      event.preventDefault();
+      focusTile(next);
+    }
+  };
+  return jsxRuntime.jsx("ul", cn._objectSpread2(cn._objectSpread2({
+    ref: setRef,
+    "aria-label": label,
+    className: cn.cn("flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2", "md:grid md:h-[min(80vh,720px)] md:snap-none md:overflow-visible md:pb-0", "md:transition-[grid-template-columns,grid-template-rows] md:duration-500 md:ease-emphasized motion-reduce:transition-none", className),
+    style: cn._objectSpread2({
+      gridTemplateColumns: tracks(cols, activeCol, expand),
+      gridTemplateRows: tracks(rows, activeRow, expand)
+    }, style),
+    onMouseLeave: function onMouseLeave(e) {
+      if (trigger === "hover") setActive(null);
+      if (_onMouseLeave) _onMouseLeave(e);
+    }
+  }, rest), {}, {
+    children: items.map(function (item, i) {
+      var _item$id;
+      var Tag = item.href ? "a" : trigger === "click" ? "button" : "div";
+      var expanded = active === i;
+      var interactive = {
+        "data-bento-tile": "",
+        onKeyDown: function onKeyDown(e) {
+          return _onKeyDown(e, i);
+        },
+        onFocus: trigger !== "click" ? function () {
+          return setActive(i);
+        } : undefined,
+        onMouseEnter: trigger === "hover" ? function () {
+          return setActive(i);
+        } : undefined,
+        onClick: trigger === "click" ? function () {
+          return setActive(expanded ? null : i);
+        } : undefined
+      };
+      if (Tag === "a") interactive.href = item.href;
+      if (Tag === "button") {
+        interactive.type = "button";
+        interactive["aria-pressed"] = expanded;
+      }
+      if (Tag === "div") interactive.tabIndex = 0;
+      return jsxRuntime.jsx("li", {
+        className: "w-[80%] shrink-0 snap-start sm:w-[45%] md:w-auto md:min-h-0 md:min-w-0",
+        children: jsxRuntime.jsxs(Tag, cn._objectSpread2(cn._objectSpread2({}, interactive), {}, {
+          "data-active": expanded ? "" : undefined,
+          className: "group relative block h-72 w-full overflow-hidden rounded-card text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 md:h-full",
+          children: [isImage$1(item.media) ? jsxRuntime.jsx("img", {
+            src: item.media.src,
+            alt: item.media.alt,
+            loading: "lazy",
+            className: "absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-emphasized group-hover:scale-105 group-data-[active]:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
+          }) : jsxRuntime.jsx("span", {
+            className: "absolute inset-0",
+            children: item.media
+          }), jsxRuntime.jsx("span", {
+            "aria-hidden": "true",
+            className: "absolute inset-0 bg-gradient-to-t from-gray-950/80 via-gray-950/20 to-transparent"
+          }), jsxRuntime.jsxs("span", {
+            className: "absolute inset-x-0 bottom-0 flex flex-col gap-1 p-4 text-primary-foreground",
+            children: [item.tag ? jsxRuntime.jsx("span", {
+              className: "w-max rounded-pill bg-primary-foreground/20 px-2.5 py-0.5 text-micro uppercase tracking-wider backdrop-blur",
+              children: item.tag
+            }) : null, item.client ? jsxRuntime.jsx("span", {
+              className: "text-caption text-primary-foreground/80",
+              children: item.client
+            }) : null, jsxRuntime.jsx("span", {
+              className: "text-body font-semibold",
+              children: item.title
+            })]
+          })]
+        }))
+      }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : i);
+    })
+  }));
+});
+BentoExpandGrid.displayName = "BentoExpandGrid";
+
+var _excluded$2 = ["items", "autoplay", "grid", "label", "className"];
+var isImage = function isImage(logo) {
+  return logo && cn._typeof(logo) === "object" && ! /*#__PURE__*/React__default.default.isValidElement(logo) && "src" in logo;
+};
+function Logo(_ref) {
+  var logo = _ref.logo,
+    decorative = _ref.decorative;
+  if (!logo) return null;
+  if (isImage(logo)) {
+    return jsxRuntime.jsx("img", {
+      src: logo.src,
+      alt: decorative ? "" : logo.alt,
+      className: "max-h-10 max-w-[70%] object-contain"
+    });
+  }
+  return decorative ? jsxRuntime.jsx("span", {
+    "aria-hidden": "true",
+    children: logo
+  }) : logo;
+}
+/**
+ * Client quotes with a 3×3 tile grid of logos: the active client's logo sits in the centre
+ * tile and the quote beside it. Dots are a tab list (arrow keys, Home/End). Autoplay pauses
+ * on hover, while focus is inside, while off screen and under reduced motion, and has a
+ * visible pause button (WCAG 2.2.2).
+ */
+var TestimonialSpotlight = /*#__PURE__*/React__default.default.forwardRef(function (_ref2, ref) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$autoplay = _ref2.autoplay,
+    autoplay = _ref2$autoplay === void 0 ? 6000 : _ref2$autoplay,
+    _ref2$grid = _ref2.grid,
+    grid = _ref2$grid === void 0 ? true : _ref2$grid,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? "Testimonials" : _ref2$label,
+    className = _ref2.className,
+    rest = cn._objectWithoutProperties(_ref2, _excluded$2);
+  var local = React.useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion.useReducedMotion();
+  var id = React.useId();
+  var _useState = React.useState(0),
+    _useState2 = cn._slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = cn._slicedToArray(_useState3, 2),
+    paused = _useState4[0],
+    setPaused = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = cn._slicedToArray(_useState5, 2),
+    hovered = _useState6[0],
+    setHovered = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = cn._slicedToArray(_useState7, 2),
+    focused = _useState8[0],
+    setFocused = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState0 = cn._slicedToArray(_useState9, 2),
+    inView = _useState0[0],
+    setInView = _useState0[1];
+  var count = items.length;
+  var playing = autoplay > 0 && count > 1 && !reduced && !paused && !hovered && !focused && inView;
+  React.useEffect(function () {
+    return observe(local.current, setInView);
+  }, []);
+  React.useEffect(function () {
+    if (!playing) return undefined;
+    var timer = setTimeout(function () {
+      return setIndex(function (i) {
+        return (i + 1) % count;
+      });
+    }, autoplay);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [playing, index, autoplay, count]);
+  if (!count) return null;
+  var current = items[Math.min(index, count - 1)];
+  var tabs = items.map(function (_, i) {
+    return "".concat(id, "-tab-").concat(i);
+  });
+  var onTabKey = function onTabKey(event) {
+    var map = {
+      ArrowRight: index + 1,
+      ArrowDown: index + 1,
+      ArrowLeft: index - 1,
+      ArrowUp: index - 1,
+      Home: 0,
+      End: count - 1
+    };
+    if (!(event.key in map)) return;
+    event.preventDefault();
+    var next = (map[event.key] + count) % count;
+    setIndex(next);
+    var el = document.getElementById(tabs[next]);
+    if (el) el.focus();
+  };
+  return jsxRuntime.jsxs("section", cn._objectSpread2(cn._objectSpread2({
+    ref: setRef,
+    "aria-roledescription": "carousel",
+    "aria-label": label,
+    className: cn.cn("grid items-center gap-10 md:grid-cols-2", className),
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    },
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur(e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+    }
+  }, rest), {}, {
+    children: [grid ? jsxRuntime.jsx("div", {
+      className: "grid aspect-square grid-cols-3 gap-3",
+      children: Array.from({
+        length: 9
+      }, function (_, tile) {
+        var centre = tile === 4;
+        var other = items[(index + tile + 1) % count];
+        return jsxRuntime.jsx("div", {
+          className: cn.cn("flex items-center justify-center rounded-card border border-line", centre ? "bg-surface shadow-md dark:bg-background" : "bg-background"),
+          children: centre ? jsxRuntime.jsx("span", {
+            className: "flex w-full justify-center animate-fade-in motion-reduce:animate-none",
+            children: jsxRuntime.jsx(Logo, {
+              logo: current.logo
+            })
+          }, index) : tile % 2 === 0 ? jsxRuntime.jsx("span", {
+            className: "flex w-full justify-center opacity-30 grayscale",
+            "aria-hidden": "true",
+            children: jsxRuntime.jsx(Logo, {
+              logo: other.logo,
+              decorative: true
+            })
+          }) : null
+        }, tile);
+      })
+    }) : null, jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-6",
+      children: [jsxRuntime.jsxs("figure", {
+        id: "".concat(id, "-panel"),
+        role: "tabpanel",
+        "aria-labelledby": tabs[index],
+        "aria-live": playing ? "off" : "polite",
+        className: "flex flex-col gap-4 animate-fade-in motion-reduce:animate-none",
+        children: [jsxRuntime.jsx("blockquote", {
+          className: "text-section-title font-medium leading-snug text-foreground",
+          children: current.quote
+        }), jsxRuntime.jsxs("figcaption", {
+          className: "text-body text-muted",
+          children: [jsxRuntime.jsx("span", {
+            className: "font-semibold text-foreground",
+            children: current.name
+          }), current.role ? jsxRuntime.jsxs("span", {
+            children: [", ", current.role]
+          }) : null]
+        })]
+      }, index), count > 1 ? jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-4",
+        children: [jsxRuntime.jsx("div", {
+          role: "tablist",
+          "aria-label": "".concat(label, ": choose a quote"),
+          className: "flex gap-2",
+          onKeyDown: onTabKey,
+          children: items.map(function (item, i) {
+            var _item$id;
+            return jsxRuntime.jsx("button", {
+              id: tabs[i],
+              type: "button",
+              role: "tab",
+              "aria-selected": i === index,
+              "aria-controls": "".concat(id, "-panel"),
+              tabIndex: i === index ? 0 : -1,
+              "aria-label": "Quote ".concat(i + 1, " of ").concat(count),
+              onClick: function onClick() {
+                return setIndex(i);
+              },
+              className: cn.cn("h-2.5 rounded-pill transition-[width,background-color] duration-base motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2", i === index ? "w-6 bg-primary-600" : "w-2.5 bg-line hover:bg-muted/60")
+            }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : i);
+          })
+        }), autoplay > 0 && !reduced ? jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setPaused(function (p) {
+              return !p;
+            });
+          },
+          className: "rounded-pill px-2 py-1 text-caption text-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+          children: paused ? "Play" : "Pause"
+        }) : null]
+      }) : null]
+    })]
+  }));
+});
+TestimonialSpotlight.displayName = "TestimonialSpotlight";
+
+var _excluded$1 = ["images", "chips", "parallax", "badge", "className", "style"];
+// Placement and parallax depth (sign = direction) for up to four photos.
+var SLOTS = [{
+  className: "left-0 top-0 w-[64%] aspect-[3/4]",
+  depth: 1
+}, {
+  className: "right-0 bottom-0 w-[52%] aspect-square",
+  depth: -0.7
+}, {
+  className: "right-[4%] top-[6%] w-[32%] aspect-[4/5]",
+  depth: 0.5
+}, {
+  className: "left-[10%] bottom-[2%] w-[28%] aspect-square",
+  depth: -0.4
+}];
+// Paint order (back to front) by slot index: later positioned siblings stack on top, so no
+// z-index is needed. Chips and the badge render after the photos and sit above them all.
+var PAINT_ORDER = [2, 0, 1, 3];
+var CHIP_SLOTS = ["left-[48%] top-[38%]", "left-[2%] bottom-[30%]"];
+/**
+ * Overlapping, offset photos with floating stat chips and an optional badge. On scroll the
+ * photos drift at different depths (parallax), driven by a CSS variable — no re-renders.
+ * Under reduced motion (or `parallax={0}`) they stay put.
+ */
+var PhotoCollage = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$chips = _ref.chips,
+    chips = _ref$chips === void 0 ? [] : _ref$chips,
+    _ref$parallax = _ref.parallax,
+    parallax = _ref$parallax === void 0 ? 0.15 : _ref$parallax,
+    badge = _ref.badge,
+    className = _ref.className,
+    style = _ref.style,
+    rest = cn._objectWithoutProperties(_ref, _excluded$1);
+  var local = React.useRef(null);
+  var setRef = useMergedRef(ref, local);
+  var reduced = useReducedMotion.useReducedMotion();
+  useScrollProgress(local, {
+    enabled: parallax > 0 && !reduced
+  });
+  return jsxRuntime.jsxs("div", cn._objectSpread2(cn._objectSpread2({
+    ref: setRef,
+    className: cn.cn("relative isolate mx-auto aspect-[5/6] w-full max-w-xl", className),
+    style: cn._objectSpread2({
+      "--dt-parallax": parallax * 240
+    }, style)
+  }, rest), {}, {
+    children: [PAINT_ORDER.filter(function (i) {
+      return i < images.length;
+    }).map(function (i) {
+      return jsxRuntime.jsx("figure", {
+        className: cn.cn("absolute overflow-hidden rounded-card shadow-xl ring-4 ring-surface dark:ring-background", "motion-safe:[transform:translate3d(0,calc((var(--dt-p,0.5)_-_0.5)_*_var(--dt-parallax)_*_var(--dt-depth)_*_1px),0)]", SLOTS[i].className),
+        style: {
+          "--dt-depth": SLOTS[i].depth
+        },
+        children: jsxRuntime.jsx("img", {
+          src: images[i].src,
+          alt: images[i].alt,
+          loading: "lazy",
+          className: "h-full w-full object-cover"
+        })
+      }, i);
+    }), chips.slice(0, CHIP_SLOTS.length).map(function (chip, i) {
+      return jsxRuntime.jsxs("div", {
+        className: cn.cn("absolute flex flex-col rounded-card border border-line bg-surface/90 px-4 py-3 shadow-lg backdrop-blur dark:bg-background/90", CHIP_SLOTS[i]),
+        children: [jsxRuntime.jsx("span", {
+          className: "text-section-title font-semibold leading-none text-foreground",
+          children: chip.value
+        }), jsxRuntime.jsx("span", {
+          className: "mt-1 text-micro uppercase tracking-wider text-muted",
+          children: chip.label
+        })]
+      }, i);
+    }), badge ? jsxRuntime.jsx("div", {
+      className: "absolute -right-2 -top-4 md:-right-6",
+      children: badge
+    }) : null]
+  }));
+});
+PhotoCollage.displayName = "PhotoCollage";
+
+var _excluded = ["text", "speed", "size", "icon", "className", "style"];
+var RADIUS = 38;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+/**
+ * A circular badge with text set around its edge, slowly turning (SVG `textPath`). The
+ * text is spread to fill the circle exactly. Exposed as one image named by `text`
+ * (override with `aria-label`); it stops turning under reduced motion.
+ */
+var RotatingBadge = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
+  var text = _ref.text,
+    _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? 14 : _ref$speed,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 120 : _ref$size,
+    icon = _ref.icon,
+    className = _ref.className,
+    style = _ref.style,
+    rest = cn._objectWithoutProperties(_ref, _excluded);
+  var pathId = "dt-badge-".concat(React.useId().replace(/:/g, ""));
+  return jsxRuntime.jsxs("div", cn._objectSpread2(cn._objectSpread2({
+    ref: ref,
+    role: "img",
+    "aria-label": text,
+    className: cn.cn("relative inline-flex shrink-0 items-center justify-center rounded-full text-foreground", className),
+    style: cn._objectSpread2({
+      width: size,
+      height: size
+    }, style)
+  }, rest), {}, {
+    children: [jsxRuntime.jsxs("svg", {
+      viewBox: "0 0 100 100",
+      "aria-hidden": "true",
+      className: "absolute inset-0 h-full w-full animate-spin motion-reduce:animate-none",
+      style: {
+        animationDuration: "".concat(speed, "s")
+      },
+      children: [jsxRuntime.jsx("defs", {
+        children: jsxRuntime.jsx("path", {
+          id: pathId,
+          d: "M 50,50 m -".concat(RADIUS, ",0 a ").concat(RADIUS, ",").concat(RADIUS, " 0 1,1 ").concat(RADIUS * 2, ",0 a ").concat(RADIUS, ",").concat(RADIUS, " 0 1,1 -").concat(RADIUS * 2, ",0")
+        })
+      }), jsxRuntime.jsx("text", {
+        className: "fill-current text-[8.5px] font-semibold uppercase",
+        children: jsxRuntime.jsx("textPath", {
+          href: "#".concat(pathId),
+          textLength: CIRCUMFERENCE - 2,
+          lengthAdjust: "spacing",
+          children: text
+        })
+      })]
+    }), icon ? jsxRuntime.jsx("span", {
+      "aria-hidden": "true",
+      className: "relative",
+      children: icon
+    }) : null]
+  }));
+});
+RotatingBadge.displayName = "RotatingBadge";
+
+exports.BentoExpandGrid = BentoExpandGrid;
+exports.CountUp = CountUp;
+exports.DeviceFrame = DeviceFrame;
+exports.DeviceMorphHero = DeviceMorphHero;
+exports.LogoMarquee = LogoMarquee;
+exports.PhotoCollage = PhotoCollage;
+exports.Reveal = Reveal;
+exports.RevealGroup = RevealGroup;
+exports.RotatingBadge = RotatingBadge;
+exports.ScrollStage = ScrollStage;
+exports.SmoothScrollProvider = SmoothScrollProvider;
+exports.StackedCards = StackedCards;
+exports.StatStrip = StatStrip;
+exports.TestimonialSpotlight = TestimonialSpotlight;
+exports.useScrollProgress = useScrollProgress;
+exports.useSmoothScroll = useSmoothScroll;