@ssgoi/core 6.0.0 → 6.2.0

package/dist/index.js

@@ -1,15 +1,15 @@
-var ht = Object.defineProperty;
-var mt = (e, t, n) => t in e ? ht(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var S = (e, t, n) => mt(e, typeof t != "symbol" ? t + "" : t, n);
-import { P as B, V as nt, W as w, M as $, S as ut } from "./multi-animation-CST6aZ8y.js";
-import { A as Xe } from "./multi-animation-CST6aZ8y.js";
-function P(e, t) {
+var Mt = Object.defineProperty;
+var Ut = (e, t, n) => t in e ? Mt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var $ = (e, t, n) => Ut(e, typeof t != "symbol" ? t + "" : t, n);
+import { P as ct, V as At, W as b, M as C, S as zt } from "./multi-animation-CnxqLEka.js";
+import { A as Es } from "./multi-animation-CnxqLEka.js";
+function _(e, t) {
   const n = [];
   for (let s = 0; s < e.length; s++)
     for (let o = s + 1; o < e.length; o++) {
-      const a = e[s], i = e[o];
-      !a || !i || n.push({
-        from: a,
+      const r = e[s], i = e[o];
+      !r || !i || n.push({
+        from: r,
         to: i,
         transition: t(),
         symmetric: !0
@@ -17,7 +17,7 @@ function P(e, t) {
     }
   return n;
 }
-function st(e, t) {
+function Dt(e, t) {
   return [
     {
       from: e.exit,
@@ -31,19 +31,19 @@ function st(e, t) {
     }
   ];
 }
-function ot(e, t, n) {
+function pt(e, t, n) {
   const s = [];
   for (let o = 0; o < e.length; o++)
-    for (let a = o + 1; a < e.length; a++) {
-      const i = e[o], l = e[a];
-      !i || !l || s.push(
+    for (let r = o + 1; r < e.length; r++) {
+      const i = e[o], c = e[r];
+      !i || !c || s.push(
         {
           from: i,
-          to: l,
+          to: c,
           transition: n(t.forward)
         },
         {
-          from: l,
+          from: c,
           to: i,
           transition: n(t.backward)
         }
@@ -51,22 +51,22 @@ function ot(e, t, n) {
     }
   return s;
 }
-class v {
+class B {
   constructor(t) {
-    S(this, "omega");
+    $(this, "omega");
     // Angular frequency
-    S(this, "zeta");
+    $(this, "zeta");
     // Damping ratio
-    S(this, "restDelta");
-    S(this, "restSpeed");
+    $(this, "restDelta");
+    $(this, "restSpeed");
     const { stiffness: n, damping: s } = t, o = 1;
-    this.omega = Math.sqrt(n / o), this.zeta = s / (2 * Math.sqrt(n * o)), this.restDelta = t.restDelta ?? B, this.restSpeed = t.restSpeed ?? nt;
+    this.omega = Math.sqrt(n / o), this.zeta = s / (2 * Math.sqrt(n * o)), this.restDelta = t.restDelta ?? ct, this.restSpeed = t.restSpeed ?? At;
   }
   step(t, n, s) {
-    const o = Math.min(s, 0.033), { omega: a, zeta: i } = this, { position: l, velocity: c } = t, r = -2 * o * i * a * c, p = o * a * a * (n - l), d = c + r + p;
+    const o = Math.min(s, 0.033), { omega: r, zeta: i } = this, { position: c, velocity: l } = t, a = -2 * o * i * r * l, p = o * r * r * (n - c), f = l + a + p;
     return {
-      position: l + o * d,
-      velocity: d
+      position: c + o * f,
+      velocity: f
     };
   }
   isSettled(t, n) {
@@ -74,38 +74,38 @@ class v {
     return s < this.restDelta && o < this.restSpeed;
   }
 }
-class yt {
+class Xt {
   constructor(t) {
-    S(this, "leader");
-    S(this, "follower");
-    S(this, "restDelta");
-    S(this, "restSpeed");
-    this.restDelta = t.restDelta ?? B, this.restSpeed = t.restSpeed ?? nt, this.leader = new v({
+    $(this, "leader");
+    $(this, "follower");
+    $(this, "restDelta");
+    $(this, "restSpeed");
+    this.restDelta = t.restDelta ?? ct, this.restSpeed = t.restSpeed ?? At, this.leader = new B({
       stiffness: t.stiffness,
       damping: t.damping,
       restDelta: this.restDelta,
       restSpeed: this.restSpeed
     });
-    let n, s, o, a;
-    typeof t.follower == "number" ? (n = t.stiffness * t.follower, s = t.damping) : t.follower ? (n = t.follower.stiffness, s = t.follower.damping, o = t.follower.restDelta, a = t.follower.restSpeed) : (n = t.stiffness, s = t.damping), this.follower = new v({
+    let n, s, o, r;
+    typeof t.follower == "number" ? (n = t.stiffness * t.follower, s = t.damping) : t.follower ? (n = t.follower.stiffness, s = t.follower.damping, o = t.follower.restDelta, r = t.follower.restSpeed) : (n = t.stiffness, s = t.damping), this.follower = new B({
       stiffness: n,
       damping: s,
       restDelta: o ?? this.restDelta,
-      restSpeed: a ?? this.restSpeed
+      restSpeed: r ?? this.restSpeed
     });
   }
   step(t, n, s) {
-    const a = t._leader ?? {
+    const r = t._leader ?? {
       position: t.position,
       velocity: t.velocity
-    }, i = this.leader.step(a, n, s), l = this.follower.step(
+    }, i = this.leader.step(r, n, s), c = this.follower.step(
       t,
       i.position,
       s
     );
     return {
-      position: l.position,
-      velocity: l.velocity,
+      position: c.position,
+      velocity: c.velocity,
       _leader: i
     };
   }
@@ -114,39 +114,39 @@ class yt {
     return s._leader ? Math.abs(n - s._leader.position) < this.restDelta && Math.abs(s._leader.velocity) < this.restSpeed && o : o;
   }
 }
-const gt = 0.01, wt = 500, bt = 10;
-class St {
+const Nt = 0.01, Vt = 500, Bt = 10;
+class Wt {
   constructor(t) {
-    S(this, "acceleration");
-    S(this, "resistance");
-    S(this, "resistanceType");
-    S(this, "min");
-    S(this, "max");
-    S(this, "bounceStiffness");
-    S(this, "bounceDamping");
-    S(this, "restDelta");
-    this.acceleration = t.acceleration, this.resistance = t.resistance, this.resistanceType = t.resistanceType ?? "quadratic", this.min = t.min, this.max = t.max, this.bounceStiffness = t.bounceStiffness ?? wt, this.bounceDamping = t.bounceDamping ?? bt, this.restDelta = t.restDelta ?? gt;
+    $(this, "acceleration");
+    $(this, "resistance");
+    $(this, "resistanceType");
+    $(this, "min");
+    $(this, "max");
+    $(this, "bounceStiffness");
+    $(this, "bounceDamping");
+    $(this, "restDelta");
+    this.acceleration = t.acceleration, this.resistance = t.resistance, this.resistanceType = t.resistanceType ?? "quadratic", this.min = t.min, this.max = t.max, this.bounceStiffness = t.bounceStiffness ?? Vt, this.bounceDamping = t.bounceDamping ?? Bt, this.restDelta = t.restDelta ?? Nt;
   }
   step(t, n, s) {
-    const o = Math.min(s, 0.033), { acceleration: a, resistance: i, resistanceType: l, min: c, max: r } = this, { position: p, velocity: d } = t, h = c !== void 0 && p < c, u = r !== void 0 && p > r;
-    let f;
-    if (h || u) {
-      const b = p - (h ? c : r), C = -this.bounceStiffness * b, E = -this.bounceDamping * d;
-      f = C + E;
+    const o = Math.min(s, 0.033), { acceleration: r, resistance: i, resistanceType: c, min: l, max: a } = this, { position: p, velocity: f } = t, h = l !== void 0 && p < l, m = a !== void 0 && p > a;
+    let d;
+    if (h || m) {
+      const w = p - (h ? l : a), E = -this.bounceStiffness * w, P = -this.bounceDamping * f;
+      d = E + P;
     } else {
-      const x = n > p ? 1 : -1;
-      let b;
-      l === "linear" ? b = i * d : b = i * d * Math.abs(d), f = x * a - b;
+      const S = n > p ? 1 : -1;
+      let w;
+      c === "linear" ? w = i * f : w = i * f * Math.abs(f), d = S * r - w;
     }
-    const m = d + f * o;
-    let y = p + m * o;
-    if (!h && !u) {
-      const x = n > p ? 1 : -1;
-      (x > 0 && y > n || x < 0 && y < n) && (y = n);
+    const y = f + d * o;
+    let u = p + y * o;
+    if (!h && !m) {
+      const S = n > p ? 1 : -1;
+      (S > 0 && u > n || S < 0 && u < n) && (u = n);
     }
     return {
-      position: y,
-      velocity: y === n ? 0 : m
+      position: u,
+      velocity: u === n ? 0 : y
     };
   }
   isSettled(t, n) {
@@ -167,7 +167,7 @@ class g {
         "Cannot use both 'spring' and 'inertia' together. Choose one physics type."
       );
     if (t.inertia)
-      return new St({
+      return new Wt({
         acceleration: t.inertia.acceleration,
         resistance: t.inertia.resistance,
         resistanceType: t.inertia.resistanceType,
@@ -184,7 +184,7 @@ class g {
       return typeof s == "number" ? o = s : typeof s == "object" && (o = {
         stiffness: s.stiffness,
         damping: s.damping
-      }), new yt({
+      }), new Xt({
         stiffness: n.stiffness,
         damping: n.damping,
         follower: o,
@@ -192,7 +192,7 @@ class g {
         restSpeed: n.restSpeed
       });
     }
-    return new v({
+    return new B({
       stiffness: n.stiffness,
       damping: n.damping,
       restDelta: n.restDelta,
@@ -207,28 +207,282 @@ class g {
     return g.from({ spring: t });
   }
 }
-class $t {
+class Rt {
   constructor(t) {
-    S(this, "durationSec");
+    $(this, "durationSec");
     this.durationSec = Math.max(1 / 60, t.durationSec);
   }
   step(t, n, s) {
     const o = n - t.position;
     if (o === 0) return t;
-    const a = Math.sign(o), i = Math.abs(o) / this.durationSec, l = a * i * s, c = t.position + l;
-    return (a > 0 ? c >= n : c <= n) ? { position: n, velocity: 0 } : { position: c, velocity: a * i };
+    const r = Math.sign(o), i = Math.abs(o) / this.durationSec, c = r * i * s, l = t.position + c;
+    return (r > 0 ? l >= n : l <= n) ? { position: n, velocity: 0 } : { position: l, velocity: r * i };
   }
   isSettled(t, n) {
-    return Math.abs(t.position - n) < B;
+    return Math.abs(t.position - n) < ct;
   }
 }
-const xt = {
+const ft = 8, dt = {
+  spring: { stiffness: 1e3, damping: 40, doubleSpring: 1.2 }
+};
+function Zt({
+  direction: e
+}) {
+  const t = e === "forward" ? ft : -ft;
+  return {
+    out: {
+      willChange: "transform, opacity",
+      startStyle: {},
+      animate: (n) => ({
+        opacity: `${1 - n}`
+      })
+    },
+    in: {
+      willChange: "transform, opacity",
+      startStyle: {
+        transform: `translate3d(${t}px, 0, 0)`,
+        opacity: "0"
+      },
+      animate: (n) => ({
+        transform: `translate3d(${t * (1 - n)}px, 0, 0)`,
+        opacity: `${n}`
+      })
+    }
+  };
+}
+function qt() {
+  return {
+    outPhysics: dt,
+    inPhysics: dt,
+    // Both sides run together — the cross-fade is the whole point of the
+    // snappy feel. (fluid's sibling uses staggered fade-through.)
+    composition: { mode: "parallel", startAt: [0, 0] },
+    build: Zt
+  };
+}
+const ht = 30, jt = {
+  inertia: { acceleration: 150, resistance: 1.5 }
+}, Kt = {
+  spring: { stiffness: 180, damping: 34 }
+};
+function Gt({
+  direction: e
+}) {
+  const t = e === "forward" ? 1 : -1, n = -ht * t, s = ht * t;
+  return {
+    out: {
+      willChange: "transform, opacity",
+      startStyle: {},
+      animate: (o) => ({
+        transform: `translate3d(${n * o}px, 0, 0)`,
+        opacity: `${1 - o}`
+      })
+    },
+    in: {
+      willChange: "transform, opacity",
+      startStyle: {
+        transform: `translate3d(${s}px, 0, 0)`,
+        opacity: "0"
+      },
+      animate: (o) => ({
+        transform: `translate3d(${s * (1 - o)}px, 0, 0)`,
+        opacity: `${o}`
+      })
+    }
+  };
+}
+function Jt() {
+  return {
+    outPhysics: jt,
+    inPhysics: Kt,
+    // Phased motion: outgoing falls away first under inertia, then incoming
+    // springs in. The fade-through shape comes from the integrator curves
+    // plus the sequence handoff, not from FADE_SPLIT inside animate(t).
+    composition: { mode: "sequence" },
+    build: Gt
+  };
+}
+const Qt = {
+  snappy: qt(),
+  fluid: Jt()
+}, yt = 8, te = {
+  inertia: { acceleration: 150, resistance: 1.5 }
+}, ee = {
+  spring: { stiffness: 180, damping: 34 }
+};
+function ne({
+  direction: e
+}) {
+  const t = e === "forward" ? 1 : -1, n = -yt * t, s = yt * t;
+  return {
+    out: {
+      willChange: "transform, opacity",
+      startStyle: {},
+      animate: (o) => ({
+        transform: `translate3d(0, ${n * o}px, 0)`,
+        opacity: `${1 - o}`
+      })
+    },
+    in: {
+      willChange: "transform, opacity",
+      startStyle: {
+        transform: `translate3d(0, ${s}px, 0)`,
+        opacity: "0"
+      },
+      animate: (o) => ({
+        transform: `translate3d(0, ${s * (1 - o)}px, 0)`,
+        opacity: `${o}`
+      })
+    }
+  };
+}
+function se() {
+  return {
+    outPhysics: te,
+    inPhysics: ee,
+    composition: { mode: "sequence" },
+    build: ne
+  };
+}
+const oe = 8, re = {
+  inertia: { acceleration: 150, resistance: 1.5 }
+}, ie = {
+  spring: { stiffness: 180, damping: 34 }
+};
+function ae(e) {
+  const t = oe;
+  return {
+    out: {
+      willChange: "opacity",
+      startStyle: {},
+      animate: (n) => ({
+        opacity: `${1 - n}`
+      })
+    },
+    in: {
+      willChange: "transform, opacity",
+      startStyle: {
+        transform: `translate3d(0, ${t}px, 0)`,
+        opacity: "0"
+      },
+      animate: (n) => ({
+        transform: `translate3d(0, ${t * (1 - n)}px, 0)`,
+        opacity: `${n}`
+      })
+    }
+  };
+}
+function le() {
+  return {
+    outPhysics: re,
+    inPhysics: ie,
+    composition: { mode: "sequence" },
+    build: ae
+  };
+}
+const mt = se(), ce = {
+  snappy: mt,
+  directional: mt,
+  "non-directional": le()
+}, ut = {
+  spring: { stiffness: 280, damping: 30 }
+}, X = 0.05;
+function pe() {
+  return {
+    // Outgoing scales up slightly (1 → 1+s) while fading — recedes toward
+    // viewer feel, complementing the incoming page rising from below.
+    out: {
+      willChange: "transform, opacity",
+      startStyle: {},
+      animate: (e) => ({
+        transform: `scale(${1 + e * X})`,
+        opacity: `${1 - e}`
+      })
+    },
+    // Incoming rises from below (1-s → 1) with fade in.
+    in: {
+      willChange: "transform, opacity",
+      startStyle: {
+        transform: `scale(${1 - X})`,
+        opacity: "0"
+      },
+      animate: (e) => ({
+        transform: `scale(${1 - X + e * X})`,
+        opacity: `${e}`
+      })
+    }
+  };
+}
+function fe() {
+  return {
+    outPhysics: ut,
+    inPhysics: ut,
+    // Both pages share the canvas (in-place scale+fade), so a strict
+    // fade-through-with-offset would feel disjointed. Run them together
+    // for a cleaner cross-fade.
+    composition: { mode: "parallel" },
+    build: pe
+  };
+}
+const de = fe(), he = {
+  x: Qt,
+  y: ce,
+  z: { snappy: de }
+};
+function ye(e, t) {
+  const n = he[e];
+  return n[t] ?? n.snappy;
+}
+const me = "x", ue = "snappy";
+function gt(e, t) {
+  e.style.willChange = t.willChange, e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint";
+  for (const [n, s] of Object.entries(t.startStyle))
+    e.style[n] = s;
+}
+function ge(e) {
+  e.style.willChange = "auto", e.style.backfaceVisibility = "", e.style.contain = "", e.style.transform = "", e.style.opacity = "";
+}
+const be = (e = {}) => {
+  const t = e.direction ?? "forward", n = e.type ?? me, s = e.feel ?? ue, o = ye(n, s), r = o.build({ direction: t });
+  return {
+    prepare: ({ from: i, to: c }) => (i.then((l) => {
+      gt(l, r.out), l.style.pointerEvents = "none";
+    }), c.then((l) => {
+      gt(l, r.in);
+    }), {}),
+    animation: ({ from: i, to: c }) => {
+      const l = new b({
+        element: i,
+        integrator: g.from(o.outPhysics),
+        style: (p) => r.out.animate(p)
+      }), a = new b({
+        element: c,
+        integrator: g.from(o.inPhysics),
+        style: (p) => r.in.animate(p),
+        onComplete: () => ge(c)
+      });
+      return new C([l, a], o.composition);
+    }
+  };
+};
+function we(e, t, n) {
+  return e === "y" ? t === "non-directional" ? "non-directional" : "directional" : e !== "x" || t === "snappy" || n === "snappy" ? "snappy" : "fluid";
+}
+function as(e) {
+  const { paths: t } = e, n = e.type ?? "x", s = e.variant, o = e.feel, r = we(n, s, o);
+  return pt(
+    t,
+    { forward: "forward", backward: "backward" },
+    (i) => be({ type: n, direction: i, feel: r })
+  );
+}
+const Se = {
   spring: { stiffness: 200, damping: 22 }
-}, Ct = 10, Et = "horizontal", Pt = "#000000";
-function N(e, t, n, s, o, a) {
+}, xe = 10, $e = "horizontal", Ee = "#000000";
+function bt(e, t, n, s, o, r) {
   window.getComputedStyle(e).position === "static" && (e.style.position = "relative");
-  const l = document.createElement("div");
-  l.style.cssText = `
+  const c = document.createElement("div");
+  c.style.cssText = `
     position: absolute;
     top: 0;
     left: 0;
@@ -238,57 +492,57 @@ function N(e, t, n, s, o, a) {
     z-index: 9999;
     overflow: hidden;
   `;
-  const c = [];
-  for (let r = 0; r < t; r++) {
+  const l = [];
+  for (let a = 0; a < t; a++) {
     const p = document.createElement("div");
     if (n === "horizontal") {
-      const d = 100 / t;
+      const f = 100 / t;
       p.style.cssText = `
         position: absolute;
-        top: ${d * r}%;
+        top: ${f * a}%;
         left: 0;
         width: 100%;
-        height: calc(${d}% + 1px);
+        height: calc(${f}% + 1px);
         background: ${s};
         transform: scaleX(${o === "hidden" ? 0 : 1});
-        transform-origin: ${a} center;
+        transform-origin: ${r} center;
         will-change: transform;
       `;
     } else {
-      const d = 100 / t;
+      const f = 100 / t;
       p.style.cssText = `
         position: absolute;
         top: 0;
-        left: ${d * r}%;
-        width: calc(${d}% + 1px);
+        left: ${f * a}%;
+        width: calc(${f}% + 1px);
         height: 100%;
         background: ${s};
         transform: scaleY(${o === "hidden" ? 0 : 1});
-        transform-origin: ${a === "left" ? "top" : "bottom"} center;
+        transform-origin: ${r === "left" ? "top" : "bottom"} center;
         will-change: transform;
       `;
     }
-    c.push(p), l.appendChild(p);
+    l.push(p), c.appendChild(p);
   }
-  return e.appendChild(l), { container: l, blinds: c };
+  return e.appendChild(c), { container: c, blinds: l };
 }
-const Dt = (e = {}) => {
-  const t = e.blindCount ?? Ct, n = e.direction ?? Et, s = e.blindColor ?? Pt, o = e.physics ?? xt;
+const Ce = (e = {}) => {
+  const t = e.blindCount ?? xe, n = e.direction ?? $e, s = e.blindColor ?? Ee, o = e.physics ?? Se;
   return {
-    prepare: async ({ from: a, to: i }) => {
-      const l = await a, c = await i;
-      l.style.zIndex = "1000";
-      const r = N(
-        l,
+    prepare: async ({ from: r, to: i }) => {
+      const c = await r, l = await i;
+      c.style.zIndex = "1000";
+      const a = bt(
+        c,
         t,
         n,
         s,
         "hidden",
         "left"
       );
-      c.style.position = "relative", c.style.zIndex = "0";
-      const p = N(
-        c,
+      l.style.position = "relative", l.style.zIndex = "0";
+      const p = bt(
+        l,
         t,
         n,
         s,
@@ -296,44 +550,48 @@ const Dt = (e = {}) => {
         "right"
       );
       return {
-        fromBlinds: r.blinds,
-        fromContainer: r.container,
+        fromBlinds: a.blinds,
+        fromContainer: a.container,
         toBlinds: p.blinds,
         toContainer: p.container
       };
     },
-    animation: ({ fromBlinds: a, fromContainer: i, toBlinds: l, toContainer: c }) => {
-      const r = a.map(
-        (u) => new w({
-          element: u,
+    animation: ({ fromBlinds: r, fromContainer: i, toBlinds: c, toContainer: l }) => {
+      const a = r.map(
+        (m) => new b({
+          element: m,
           integrator: g.from(o),
-          style: (f) => ({
-            transform: n === "horizontal" ? `scaleX(${f})` : `scaleY(${f})`
+          style: (d) => ({
+            transform: n === "horizontal" ? `scaleX(${d})` : `scaleY(${d})`
           })
         })
-      ), p = l.map(
-        (u, f) => new w({
-          element: u,
+      ), p = c.map(
+        (m, d) => new b({
+          element: m,
           integrator: g.from(o),
-          style: (m, y) => ({
-            transform: n === "horizontal" ? `scaleX(${y})` : `scaleY(${y})`
+          style: (y, u) => ({
+            transform: n === "horizontal" ? `scaleX(${u})` : `scaleY(${u})`
           }),
-          onComplete: f === l.length - 1 ? () => {
-            c.remove(), i.remove();
+          onComplete: d === c.length - 1 ? () => {
+            l.remove(), i.remove();
           } : void 0
         })
-      ), d = new $(r, { mode: "parallel" }), h = new $(p, { mode: "parallel" });
-      return new $([d, h], { mode: "sequence" });
+      ), f = new C(a, { mode: "parallel" }), h = new C(p, { mode: "parallel" });
+      return new C([f, h], { mode: "sequence" });
     }
   };
 };
-function Ie({ paths: e }) {
-  return P(e, () => Dt());
+function ls(e) {
+  const { paths: t, type: n = "horizontal" } = e;
+  return _(
+    t,
+    () => Ce({ direction: n })
+  );
 }
-const Ot = {
+const Pe = {
   spring: { stiffness: 200, damping: 20, doubleSpring: 0.7 }
-}, I = 0.5;
-function It(e) {
+}, Y = 0.5;
+function ve(e) {
   const t = e === "enter" ? -100 : 100, n = e === "enter" ? 100 : -100;
   return {
     out: {
@@ -341,32 +599,32 @@ function It(e) {
       startStyle: {},
       animate: (s) => ({
         transform: `translate3d(${t * s}%, 0, 0)`,
-        opacity: `${I + (1 - I) * (1 - s)}`
+        opacity: `${Y + (1 - Y) * (1 - s)}`
       })
     },
     in: {
       willChange: "transform, opacity",
       startStyle: {
         transform: `translate3d(${n}%, 0, 0)`,
-        opacity: `${I}`
+        opacity: `${Y}`
       },
       animate: (s) => ({
         transform: `translate3d(${n * (1 - s)}%, 0, 0)`,
-        opacity: `${I + (1 - I) * s}`
+        opacity: `${Y + (1 - Y) * s}`
       })
     }
   };
 }
-function Tt() {
+function Te() {
   return {
-    physics: Ot,
-    build: It
+    physics: Pe,
+    build: ve
   };
 }
-const At = {
+const _e = {
   spring: { stiffness: 170, damping: 22 }
 };
-function _t(e) {
+function Ie(e) {
   const t = e === "enter" ? -20 : 100, n = e === "enter" ? 100 : -20;
   return {
     out: {
@@ -387,95 +645,100 @@ function _t(e) {
     }
   };
 }
-function kt() {
+function Oe() {
   return {
-    physics: At,
-    build: _t
+    physics: _e,
+    build: Ie
   };
 }
-const vt = {
-  parallax: kt(),
-  crossfade: Tt()
-}, Lt = "parallax";
-function Z(e, t) {
+const Ae = {
+  parallax: Oe(),
+  crossfade: Te()
+}, De = "parallax";
+function wt(e, t) {
   e.style.willChange = t.willChange, e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint";
   for (const [n, s] of Object.entries(t.startStyle))
     e.style[n] = s;
 }
-const Yt = (e = {}) => {
-  const t = e.direction ?? "enter", n = vt[e.type ?? Lt], s = n.physics, o = n.build(t);
+const Fe = (e = {}) => {
+  const t = e.direction ?? "enter", n = Ae[e.type ?? De], s = n.physics, o = n.build(t);
   return {
-    prepare: ({ from: a, to: i }) => (a.then((l) => {
-      Z(l, o.out), l.style.pointerEvents = "none", l.style.zIndex = t === "enter" ? "-1" : "100";
-    }), i.then((l) => {
-      Z(l, o.in);
+    prepare: ({ from: r, to: i }) => (r.then((c) => {
+      wt(c, o.out), c.style.pointerEvents = "none", c.style.zIndex = t === "enter" ? "-1" : "100";
+    }), i.then((c) => {
+      wt(c, o.in);
     }), {}),
-    animation: ({ from: a, to: i }) => {
-      const l = new w({
-        element: a,
+    animation: ({ from: r, to: i }) => {
+      const c = new b({
+        element: r,
         integrator: g.from(s),
-        style: (r) => o.out.animate(r)
-      }), c = new w({
+        style: (a) => o.out.animate(a)
+      }), l = new b({
         element: i,
         integrator: g.from(s),
-        style: (r) => o.in.animate(r),
+        style: (a) => o.in.animate(a),
         onComplete: () => {
           i.style.willChange = "auto", i.style.backfaceVisibility = "", i.style.contain = "", i.style.transform = "", i.style.opacity = "";
         }
       });
-      return new $([l, c], { mode: "parallel" });
+      return new C([c, l], { mode: "parallel" });
     }
   };
 };
-function Te({ type: e, ...t }) {
-  return st(
-    t,
-    (n) => Yt({ direction: n, type: e })
+function Le(e) {
+  return e === "slide" || e === "crossfade" ? "crossfade" : "parallax";
+}
+function cs(e) {
+  const { enter: t, exit: n } = e, s = e.type, o = Le(s);
+  return Dt(
+    { enter: t, exit: n },
+    (r) => Fe({ direction: r, type: o })
   );
 }
-const Ft = {
+const Ye = {
   spring: { stiffness: 180, damping: 20, doubleSpring: !0 }
-}, Mt = {
+}, ke = {
   spring: { stiffness: 170, damping: 20, doubleSpring: !0 }
-}, Ht = (e = {}) => {
-  const t = e.physics ?? Mt, n = e.physics ?? Ft;
+}, He = (e = {}) => {
+  const t = e.physics ?? ke, n = e.physics ?? Ye;
   return {
     prepare: ({ to: s }) => (s.then((o) => {
       o.style.opacity = "0", o.style.willChange = "opacity";
     }), {}),
     animation: ({ from: s, to: o }) => {
-      const a = new w({
+      const r = new b({
         element: s,
         integrator: g.from(n),
         // Default bounds (0, 1). `u` runs 1→0 as the animation moves
         // forward, mapping opacity from fully visible to invisible.
-        style: (l, c) => ({ opacity: c }),
+        style: (c, l) => ({ opacity: l }),
         onComplete: () => {
           s.style.willChange = "auto";
         }
-      }), i = new w({
+      }), i = new b({
         element: o,
         integrator: g.from(t),
-        style: (l) => ({ opacity: l }),
+        style: (c) => ({ opacity: c }),
         onComplete: () => {
           o.style.willChange = "auto", o.style.opacity = "";
         }
       });
-      return new $([a, i], { mode: "sequence" });
+      return new C([r, i], { mode: "sequence" });
     }
   };
 };
-function Ae({ paths: e }) {
-  return P(e, () => Ht());
-}
-function O(e, t) {
-  function n(a) {
-    let i = 0, l = 0;
-    const c = a.offsetWidth, r = a.offsetHeight;
-    let p = a;
+function ps(e) {
+  const { paths: t } = e;
+  return _(t, () => He());
+}
+function k(e, t) {
+  function n(r) {
+    let i = 0, c = 0;
+    const l = r.offsetWidth, a = r.offsetHeight;
+    let p = r;
     for (; p; )
-      i += p.offsetTop, l += p.offsetLeft, p = p.offsetParent;
-    return i -= window.scrollY, l -= window.scrollX, { top: i, left: l, width: c, height: r };
+      i += p.offsetTop, c += p.offsetLeft, p = p.offsetParent;
+    return i -= window.scrollY, c -= window.scrollX, { top: i, left: c, width: l, height: a };
   }
   const s = n(e), o = n(t);
   return new DOMRect(
@@ -485,8 +748,8 @@ function O(e, t) {
     o.height
   );
 }
-function T(e, t) {
-  const { scrollingElement: n, positionedParent: s } = e, o = n !== s && n.contains(s) ? O(n, s).top : 0;
+function H(e, t) {
+  const { scrollingElement: n, positionedParent: s } = e, o = n !== s && n.contains(s) ? k(n, s).top : 0;
   return {
     top: e[t].scroll.y,
     left: 0,
@@ -494,150 +757,150 @@ function T(e, t) {
     height: n.clientHeight - o
   };
 }
-const M = {
+const et = {
   scaleDown: { stiffness: 20, damping: 7 },
   translate: { stiffness: 15, damping: 7 },
   scaleUp: { stiffness: 20, damping: 7 }
-}, D = {
+}, A = {
   scaleDown: 0,
   translate: 0.2,
   scaleUp: 0.8
-}, Ut = 0.8, zt = "white", q = 1e3 / 60, Vt = 600;
-function Xt(e) {
-  const { items: t, from: n, to: s, recordFrame: o } = e, a = q / 1e3, i = Math.abs(s - n), l = t.map((r) => ({
-    item: r,
-    integrator: new v({
-      stiffness: r.spring.stiffness,
-      damping: r.spring.damping
+}, Me = 0.8, Ue = "white", St = 1e3 / 60, ze = 600;
+function Xe(e) {
+  const { items: t, from: n, to: s, recordFrame: o } = e, r = St / 1e3, i = Math.abs(s - n), c = t.map((a) => ({
+    item: a,
+    integrator: new B({
+      stiffness: a.spring.stiffness,
+      damping: a.spring.damping
     }),
     state: { position: n, velocity: 0 },
     started: !1,
     settled: !1,
     settleTime: 0
   }));
-  for (let r = 0; r < l.length; r++)
-    (r === 0 || l[r].item.offset === 0) && (l[r].started = !0);
+  for (let a = 0; a < c.length; a++)
+    (a === 0 || c[a].item.offset === 0) && (c[a].started = !0);
   o(0);
-  let c = 0;
-  for (let r = 1; r <= Vt; r++) {
-    const p = r * q;
-    c = p;
-    for (const d of l)
-      !d.started || d.settled || (d.state = d.integrator.step(d.state, s, a), d.integrator.isSettled(d.state, s) ? (d.settleTime += a, d.settleTime >= ut && (d.state = { position: s, velocity: 0 }, d.settled = !0)) : d.settleTime = 0, d.item.tick(d.state.position));
-    for (let d = 1; d < l.length; d++) {
-      const h = l[d];
+  let l = 0;
+  for (let a = 1; a <= ze; a++) {
+    const p = a * St;
+    l = p;
+    for (const f of c)
+      !f.started || f.settled || (f.state = f.integrator.step(f.state, s, r), f.integrator.isSettled(f.state, s) ? (f.settleTime += r, f.settleTime >= zt && (f.state = { position: s, velocity: 0 }, f.settled = !0)) : f.settleTime = 0, f.item.tick(f.state.position));
+    for (let f = 1; f < c.length; f++) {
+      const h = c[f];
       if (h.started) continue;
-      const u = l[d - 1];
-      if (!u.started) continue;
-      (i === 0 ? 1 : Math.abs(u.state.position - n) / i) >= h.item.offset && (h.started = !0);
+      const m = c[f - 1];
+      if (!m.started) continue;
+      (i === 0 ? 1 : Math.abs(m.state.position - n) / i) >= h.item.offset && (h.started = !0);
     }
-    if (o(p), l.every((d) => d.settled)) return p;
+    if (o(p), c.every((f) => f.settled)) return p;
   }
-  return c;
+  return l;
 }
-function H(e, t) {
+function nt(e, t) {
   return e != null && e.spring ? {
     stiffness: e.spring.stiffness,
     damping: e.spring.damping
   } : t;
 }
-function j(e) {
-  const { rect: t, scale: n, direction: s, override: o } = e, a = s === "out" ? { scale: 1, translateY: -t.top } : { scale: n, translateY: -t.top + t.height }, i = H(o, M.scaleDown), l = H(o, M.translate), c = H(o, M.scaleUp), r = s === "out" ? 1 : 0, p = s === "out" ? 0 : 1, d = s === "out" ? [
+function xt(e) {
+  const { rect: t, scale: n, direction: s, override: o } = e, r = s === "out" ? { scale: 1, translateY: -t.top } : { scale: n, translateY: -t.top + t.height }, i = nt(o, et.scaleDown), c = nt(o, et.translate), l = nt(o, et.scaleUp), a = s === "out" ? 1 : 0, p = s === "out" ? 0 : 1, f = s === "out" ? [
     {
       spring: i,
-      offset: D.scaleDown,
-      tick: (f) => {
-        const m = 1 - f;
-        a.scale = 1 - (1 - n) * m;
+      offset: A.scaleDown,
+      tick: (d) => {
+        const y = 1 - d;
+        r.scale = 1 - (1 - n) * y;
       }
     },
     {
-      spring: l,
-      offset: D.translate,
-      tick: (f) => {
-        const m = 1 - f;
-        a.translateY = -t.top - t.height * m;
+      spring: c,
+      offset: A.translate,
+      tick: (d) => {
+        const y = 1 - d;
+        r.translateY = -t.top - t.height * y;
       }
     },
     {
-      spring: c,
-      offset: D.scaleUp,
-      tick: (f) => {
-        const m = 1 - f;
-        a.scale = n + (1 - n) * m;
+      spring: l,
+      offset: A.scaleUp,
+      tick: (d) => {
+        const y = 1 - d;
+        r.scale = n + (1 - n) * y;
       }
     }
   ] : [
     {
       spring: i,
-      offset: D.scaleDown,
-      tick: (f) => {
-        a.scale = 1 - (1 - n) * f;
+      offset: A.scaleDown,
+      tick: (d) => {
+        r.scale = 1 - (1 - n) * d;
       }
     },
     {
-      spring: l,
-      offset: D.translate,
-      tick: (f) => {
-        a.translateY = -t.top + t.height * (1 - f);
+      spring: c,
+      offset: A.translate,
+      tick: (d) => {
+        r.translateY = -t.top + t.height * (1 - d);
       }
     },
     {
-      spring: c,
-      offset: D.scaleUp,
-      tick: (f) => {
-        a.scale = n + (1 - n) * f;
+      spring: l,
+      offset: A.scaleUp,
+      tick: (d) => {
+        r.scale = n + (1 - n) * d;
       }
     }
-  ], h = [], u = Xt({
-    items: d,
-    from: r,
+  ], h = [], m = Xe({
+    items: f,
+    from: a,
     to: p,
-    recordFrame: (f) => h.push({
-      time: f,
-      scale: a.scale,
-      translateY: a.translateY
+    recordFrame: (d) => h.push({
+      time: d,
+      scale: r.scale,
+      translateY: r.translateY
     })
   });
-  return { snapshots: h, totalDuration: u };
+  return { snapshots: h, totalDuration: m };
 }
-function Bt(e, t) {
+function Ne(e, t) {
   if (e.length === 0) return { time: 0, scale: 1, translateY: 0 };
   if (e.length === 1 || t <= 0) return e[0];
   if (t >= 1) return e[e.length - 1];
   const n = t * (e.length - 1), s = Math.floor(n), o = Math.ceil(n);
   if (s === o) return e[s];
-  const a = e[s], i = e[o], l = n - s;
+  const r = e[s], i = e[o], c = n - s;
   return {
-    time: a.time + (i.time - a.time) * l,
-    scale: a.scale + (i.scale - a.scale) * l,
-    translateY: a.translateY + (i.translateY - a.translateY) * l
+    time: r.time + (i.time - r.time) * c,
+    scale: r.scale + (i.scale - r.scale) * c,
+    translateY: r.translateY + (i.translateY - r.translateY) * c
   };
 }
-const Wt = [
+const Ve = [
   [1, 1],
   [-1, 1],
   [1, -1],
   [-1, -1]
 ];
-function Nt(e, t) {
-  const o = (a, i, l) => {
-    const c = document.createElement("div");
-    Object.assign(c.style, {
+function Be(e, t) {
+  const o = (r, i, c) => {
+    const l = document.createElement("div");
+    Object.assign(l.style, {
       position: "fixed",
       pointerEvents: "none",
       zIndex: "9999",
       width: "15px",
       height: "15px",
-      ...a
+      ...r
     });
-    const r = document.createElement("div");
-    Object.assign(r.style, {
+    const a = document.createElement("div");
+    Object.assign(a.style, {
       position: "absolute",
       width: "15px",
       height: "1px",
       backgroundColor: e,
-      [l]: "0",
+      [c]: "0",
       [i]: "0"
     });
     const p = document.createElement("div");
@@ -646,9 +909,9 @@ function Nt(e, t) {
       width: "1px",
       height: "15px",
       backgroundColor: e,
-      [l]: "0",
+      [c]: "0",
       [i]: "0"
-    }), c.appendChild(r), c.appendChild(p), c;
+    }), l.appendChild(a), l.appendChild(p), l;
   };
   return {
     topLeft: o(
@@ -685,11 +948,11 @@ function Nt(e, t) {
     )
   };
 }
-function G(e, t) {
+function $t(e, t) {
   const n = t.left + t.width / 2, s = t.top + t.height / 2;
   e.style.transformOrigin = `${n}px ${s}px`;
 }
-function K(e, t) {
+function Et(e, t) {
   e.style.clipPath = `polygon(
     ${t.left}px ${t.top}px,
     ${t.left + t.width}px ${t.top}px,
@@ -697,24 +960,24 @@ function K(e, t) {
     ${t.left}px ${t.top + t.height}px
   )`;
 }
-function U(e, t, n, s, o) {
-  const a = n / 1e3;
-  return new w({
+function st(e, t, n, s, o) {
+  const r = n / 1e3;
+  return new b({
     element: e,
-    integrator: new $t({ durationSec: a }),
+    integrator: new Rt({ durationSec: r }),
     lowerBound: 0,
     upperBound: 1,
-    style: (i) => s(Bt(t, i)),
+    style: (i) => s(Ne(t, i)),
     onComplete: o
   });
 }
-const Zt = (e = {}) => {
+const We = (e = {}) => {
   var o;
-  const t = ((o = e.border) == null ? void 0 : o.color) ?? zt, n = Ut, s = e.physics;
+  const t = ((o = e.border) == null ? void 0 : o.color) ?? Ue, n = Me, s = e.physics;
   return {
-    prepare: ({ from: a, to: i, context: l }) => {
-      const c = T(l, "from"), r = T(l, "to"), p = O(document.body, l.positionedParent), d = Nt(t, {
-        ...c,
+    prepare: ({ from: r, to: i, context: c }) => {
+      const l = H(c, "from"), a = H(c, "to"), p = k(document.body, c.positionedParent), f = Be(t, {
+        ...l,
         top: p.top
       });
       for (const h of [
@@ -723,203 +986,404 @@ const Zt = (e = {}) => {
         "bottomLeft",
         "bottomRight"
       ])
-        l.positionedParent.appendChild(d[h]);
-      return a.then((h) => {
-        G(h, c), K(h, c), h.style.transform = `translateY(${-c.top}px)`;
+        c.positionedParent.appendChild(f[h]);
+      return r.then((h) => {
+        $t(h, l), Et(h, l), h.style.transform = `translateY(${-l.top}px)`;
       }), i.then((h) => {
-        G(h, r), K(h, r), h.style.transform = `translateY(${-r.top + r.height}px) scale(${n})`;
-      }), { borders: d, fromRect: c, toRect: r };
+        $t(h, a), Et(h, a), h.style.transform = `translateY(${-a.top + a.height}px) scale(${n})`;
+      }), { borders: f, fromRect: l, toRect: a };
     },
-    animation: ({ from: a, to: i, context: l, borders: c, fromRect: r, toRect: p }) => {
-      const d = j({
-        rect: r,
+    animation: ({ from: r, to: i, context: c, borders: l, fromRect: a, toRect: p }) => {
+      const f = xt({
+        rect: a,
         scale: n,
         direction: "out",
         override: s
-      }), h = j({
+      }), h = xt({
         rect: p,
         scale: n,
         direction: "in",
         override: s
-      }), u = U(
-        a,
-        d.snapshots,
-        d.totalDuration,
-        (b) => ({
-          transform: `translateY(${b.translateY}px) scale(${b.scale})`
+      }), m = st(
+        r,
+        f.snapshots,
+        f.totalDuration,
+        (w) => ({
+          transform: `translateY(${w.translateY}px) scale(${w.scale})`
         }),
         () => {
-          a.style.clipPath = "", a.style.transformOrigin = "";
+          r.style.clipPath = "", r.style.transformOrigin = "";
         }
-      ), f = U(
+      ), d = st(
         i,
         h.snapshots,
         h.totalDuration,
-        (b) => ({
-          transform: `translateY(${b.translateY}px) scale(${b.scale})`
+        (w) => ({
+          transform: `translateY(${w.translateY}px) scale(${w.scale})`
         }),
         () => {
           i.style.clipPath = "", i.style.transformOrigin = "", i.style.transform = "";
         }
-      ), m = Wt.map(([b, C], E) => {
-        const L = ["topLeft", "topRight", "bottomLeft", "bottomRight"][E];
-        return U(
-          c[L],
-          d.snapshots,
-          d.totalDuration,
-          (A) => {
-            const Y = (r.width - r.width * A.scale) / 2 * 0.7 * b, F = (r.height - r.height * A.scale) / 2 * 0.7 * C;
-            return { transform: `translate(${Y}px, ${F}px)` };
+      ), y = Ve.map(([w, E], P) => {
+        const D = ["topLeft", "topRight", "bottomLeft", "bottomRight"][P];
+        return st(
+          l[D],
+          f.snapshots,
+          f.totalDuration,
+          (I) => {
+            const F = (a.width - a.width * I.scale) / 2 * 0.7 * w, O = (a.height - a.height * I.scale) / 2 * 0.7 * E;
+            return { transform: `translate(${F}px, ${O}px)` };
           }
         );
-      }), y = new $([u, f, ...m], {
+      }), u = new C([m, d, ...y], {
         mode: "parallel"
-      }), x = y.onComplete;
-      return y.onComplete = () => {
-        x == null || x();
-        const b = l.positionedParent;
-        for (const C of [
+      }), S = u.onComplete;
+      return u.onComplete = () => {
+        S == null || S();
+        const w = c.positionedParent;
+        for (const E of [
           "topLeft",
           "topRight",
           "bottomLeft",
           "bottomRight"
         ]) {
-          const E = c[C];
-          E.parentElement === b && b.removeChild(E);
+          const P = l[E];
+          P.parentElement === w && w.removeChild(P);
         }
-      }, y;
+      }, u;
     }
   };
 };
-function _e({ paths: e }) {
-  return P(e, () => Zt());
+function fs(e) {
+  const { paths: t, options: n } = e, s = (n == null ? void 0 : n.borderColor) !== void 0 ? { border: { color: n.borderColor } } : void 0;
+  return _(t, () => We(s));
+}
+const Ct = "data-hero-enter-key", Pt = "data-hero-exit-key", ot = "data-hero-key";
+class Re {
+  prepare(t) {
+    t.from.then((n) => {
+      n.style.opacity = "0";
+    });
+  }
 }
-const qt = {
+const Ze = () => new Re();
+class qe {
+  contribute(t) {
+    const { from: n, to: s, physics: o, onComplete: r } = t, i = n.style.opacity, c = s.style.opacity, l = n.style.willChange, a = s.style.willChange;
+    return s.style.opacity = "0", n.style.willChange = "opacity", s.style.willChange = "opacity", r(() => {
+      n.style.opacity = i, s.style.opacity = c, n.style.willChange = l, s.style.willChange = a;
+    }), [
+      new b({
+        element: n,
+        integrator: g.from(o),
+        style: (p, f) => ({ opacity: f })
+      }),
+      new b({
+        element: s,
+        integrator: g.from(o),
+        style: (p) => ({ opacity: p })
+      })
+    ];
+  }
+}
+const je = () => new qe(), Ke = {
+  static: Ze,
+  fade: je
+}, Ge = {
   spring: { stiffness: 300, damping: 30 }
+}, Je = 700, Qe = "data-hero-aspect-ratio";
+function tn(e) {
+  if (!e) return null;
+  if (e.includes("/")) {
+    const [n, s] = e.split("/"), o = parseFloat(n ?? ""), r = parseFloat(s ?? "");
+    return !Number.isFinite(o) || !Number.isFinite(r) || r === 0 ? null : o / r;
+  }
+  const t = parseFloat(e);
+  return Number.isFinite(t) && t > 0 ? t : null;
+}
+function W(e, t) {
+  const n = k(e, t), s = tn(t.getAttribute(Qe));
+  if (s === null)
+    return {
+      visible: n,
+      bbox: n,
+      letterbox: { top: 0, right: 0, bottom: 0, left: 0 }
+    };
+  const o = n.width / n.height;
+  let r, i;
+  o > s ? (i = n.height, r = i * s) : (r = n.width, i = r / s);
+  const c = (n.width - r) / 2, l = (n.height - i) / 2;
+  return {
+    visible: {
+      left: n.left + c,
+      top: n.top + l,
+      width: r,
+      height: i
+    },
+    bbox: n,
+    letterbox: { top: l, right: c, bottom: l, left: c }
+  };
+}
+function N(e, t) {
+  const n = /* @__PURE__ */ new Map(), s = e.querySelectorAll(`[${t}]`);
+  for (const o of Array.from(s)) {
+    const r = o.getAttribute(t);
+    r && (n.has(r) || n.set(r, o));
+  }
+  return n;
+}
+function en(e, t) {
+  const n = [], s = N(t, Ct), o = N(e, Pt);
+  for (const [c, l] of s) {
+    const a = o.get(c);
+    a && n.push({ key: c, fromEl: a, toEl: l });
+  }
+  const r = N(e, Ct), i = N(t, Pt);
+  for (const [c, l] of r) {
+    const a = i.get(c);
+    a && n.push({ key: c, fromEl: l, toEl: a });
+  }
+  return n;
+}
+function nn(e, t) {
+  const n = [], s = Array.from(
+    t.querySelectorAll(`[${ot}]`)
+  );
+  for (const o of s) {
+    const r = o.getAttribute(ot);
+    if (!r) continue;
+    const i = e.querySelector(
+      `[${ot}="${r}"]`
+    );
+    i && n.push({ key: r, fromEl: i, toEl: o });
+  }
+  return n;
+}
+function sn(e, t) {
+  const n = en(e, t);
+  return n.length > 0 ? n : nn(e, t);
+}
+let on = class {
+  contribute(t) {
+    const {
+      from: n,
+      to: s,
+      resolved: o,
+      physics: r,
+      scrollOffset: i,
+      maxDistance: c,
+      onComplete: l
+    } = t, a = [];
+    for (const { fromEl: p, toEl: f } of o.pairs) {
+      const h = W(n, p), m = W(s, f), d = h.visible, y = m.visible, u = m.bbox, S = m.letterbox, w = Math.max(
+        d.width / y.width,
+        d.height / y.height
+      ), E = d.left + d.width / 2, P = d.top + d.height / 2, D = u.left + u.width / 2, I = u.top + u.height / 2, F = E - D - i.x, O = P - I - i.y;
+      if (Math.abs(O) > c) continue;
+      const M = d.width / w, U = d.height / w, x = Math.max(
+        0,
+        (y.width - M) / 2
+      ), L = Math.max(
+        0,
+        (y.height - U) / 2
+      ), z = f.style.transform, R = f.style.position, Z = f.style.transformOrigin, q = f.style.clipPath, v = f.style.zIndex, j = f.style.willChange;
+      f.style.position = "relative", f.style.transformOrigin = "center center", f.style.zIndex = "1000", f.style.willChange = "transform, clip-path", l(() => {
+        f.style.transform = z, f.style.position = R, f.style.transformOrigin = Z, f.style.clipPath = q, f.style.zIndex = v, f.style.willChange = j;
+      }), a.push(
+        new b({
+          element: f,
+          integrator: g.from(r),
+          style: (K, T) => {
+            const G = T * F, J = T * O, Q = K + T * w, tt = S.top + T * L, Yt = S.right + T * x, kt = S.bottom + T * L, Ht = S.left + T * x;
+            return {
+              transform: `translate(${G}px, ${J}px) scale(${Q})`,
+              clipPath: `inset(${tt}px ${Yt}px ${kt}px ${Ht}px)`
+            };
+          }
+        })
+      );
+    }
+    return a;
+  }
+};
+class rn {
+  contribute(t) {
+    const { resolved: n, physics: s, positionedParent: o, maxDistance: r, onComplete: i } = t, c = [];
+    for (const { fromEl: l, toEl: a } of n.pairs) {
+      const p = W(o, l), f = W(o, a), h = p.visible, m = f.visible, d = f.bbox, y = f.letterbox;
+      if (h.width === 0 || h.height === 0 || m.width === 0 || m.height === 0)
+        continue;
+      const u = Math.max(
+        h.width / m.width,
+        h.height / m.height
+      ), S = h.left + h.width / 2, w = h.top + h.height / 2, E = d.left + d.width / 2, P = d.top + d.height / 2, D = S - E, I = w - P;
+      if (Math.abs(I) > r) continue;
+      const F = h.width / u, O = h.height / u, M = Math.max(
+        0,
+        (m.width - F) / 2
+      ), U = Math.max(
+        0,
+        (m.height - O) / 2
+      ), x = a.cloneNode(!0);
+      x.style.position = "absolute", x.style.left = `${d.left}px`, x.style.top = `${d.top}px`, x.style.width = `${d.width}px`, x.style.height = `${d.height}px`, x.style.margin = "0", x.style.transformOrigin = "center center", x.style.zIndex = "1000", x.style.willChange = "transform, clip-path", x.style.pointerEvents = "none", x.style.maxWidth = "none", x.style.maxHeight = "none";
+      const L = (q, v) => {
+        const j = v * D, K = v * I, T = q + v * u, G = y.top + v * U, J = y.right + v * M, Q = y.bottom + v * U, tt = y.left + v * M;
+        return {
+          transform: `translate(${j}px, ${K}px) scale(${T})`,
+          clipPath: `inset(${G}px ${J}px ${Q}px ${tt}px)`
+        };
+      }, z = L(0, 1);
+      x.style.transform = z.transform, x.style.clipPath = z.clipPath, o.appendChild(x);
+      const R = l.style.opacity, Z = a.style.opacity;
+      l.style.opacity = "0", a.style.opacity = "0", i(() => {
+        l.style.opacity = R, a.style.opacity = Z, x.parentElement && x.parentElement.removeChild(x);
+      }), c.push(
+        new b({
+          element: x,
+          integrator: g.from(s),
+          style: L
+        })
+      );
+    }
+    return c;
+  }
+}
+const an = {
+  static: () => new on(),
+  fade: () => new rn()
 };
-function jt(e, t) {
-  return e.querySelector(`[data-hero-key="${t}"]`);
+function ln(e) {
+  return [
+    an[e.type](),
+    Ke[e.type]()
+  ];
 }
-const Gt = (e = {}) => {
-  const t = e.physics ?? qt, n = e.maxDistance ?? 700;
+const cn = (e) => {
+  const t = ln(e), n = Ge, s = Je;
   return {
-    prepare: ({ from: s }) => (s.then((o) => {
-      o.style.opacity = "0";
-    }), {}),
-    animation: ({ from: s, to: o, context: a }) => {
-      const i = s, l = o, c = Array.from(
-        l.querySelectorAll("[data-hero-key]")
-      ), r = [];
-      for (const f of c) {
-        const m = f.getAttribute("data-hero-key");
-        if (!m) continue;
-        const y = jt(i, m);
-        y && r.push({ key: m, fromEl: y, toEl: f });
-      }
-      if (r.length === 0)
-        return new $([], { mode: "parallel" });
-      const p = [], d = [];
-      for (const { fromEl: f, toEl: m } of r) {
-        const y = O(i, f), x = O(l, m), b = y.left - x.left - a.scrollOffset.x, C = y.top - x.top - a.scrollOffset.y, E = y.width / x.width, L = y.height / x.height;
-        if (Math.abs(C) > n) continue;
-        const A = m.style.transform, Y = m.style.position, F = m.style.transformOrigin, at = m.style.zIndex, lt = m.style.willChange;
-        m.style.position = "relative", m.style.transformOrigin = "top left", m.style.zIndex = "1000", m.style.willChange = "transform", p.push(
-          new w({
-            element: m,
-            integrator: g.from(t),
-            style: (W, _) => {
-              const ct = _ * b, pt = _ * C, dt = W + _ * E, ft = W + _ * L;
-              return {
-                transform: `translate(${ct}px, ${pt}px) scale(${dt}, ${ft})`
-              };
-            }
-          })
-        ), d.push(() => {
-          m.style.transform = A, m.style.position = Y, m.style.transformOrigin = F, m.style.zIndex = at, m.style.willChange = lt;
-        });
-      }
-      const h = new $(p, {
-        mode: "parallel"
-      }), u = h.onComplete;
+    prepare: (o) => {
+      var c;
+      const r = Promise.all([
+        o.from,
+        o.to
+      ]).then(([l, a]) => ({ pairs: sn(l, a) })), i = {
+        from: o.from,
+        to: o.to,
+        resolved: r
+      };
+      for (const l of t)
+        (c = l.prepare) == null || c.call(l, i);
+      return r.then((l) => ({ resolved: l }));
+    },
+    animation: ({ from: o, to: r, context: i, resolved: c }) => {
+      if (c.pairs.length === 0)
+        return new C([], { mode: "parallel" });
+      const l = [], a = (d) => {
+        l.push(d);
+      }, p = {
+        from: o,
+        to: r,
+        resolved: c,
+        physics: n,
+        scrollOffset: i.scrollOffset,
+        positionedParent: i.positionedParent,
+        maxDistance: s,
+        onComplete: a
+      }, f = [];
+      for (const d of t)
+        d.contribute && f.push(...d.contribute(p));
+      if (f.length === 0)
+        return new C([], { mode: "parallel" });
+      const h = new C(f, { mode: "parallel" }), m = h.onComplete;
       return h.onComplete = () => {
-        for (const f of d) f();
-        u == null || u();
+        m == null || m();
+        for (const d of l)
+          try {
+            d();
+          } catch (y) {
+            console.error("[hero] cleanup error", y);
+          }
       }, h;
     }
   };
 };
-function ke({ paths: e }) {
-  return P(e, () => Gt());
+function hs(e) {
+  const { paths: t } = e, n = e.type ?? "static";
+  return e.variant, _(
+    t,
+    () => cn({ type: n })
+  );
 }
-const Kt = {
+const pn = {
   spring: { stiffness: 50, damping: 30 }
-}, Jt = {
+}, fn = {
   spring: { stiffness: 80, damping: 25 }
-}, Qt = (e = {}) => {
-  const t = e.physics ?? Kt, n = e.initialRotation ?? 45, s = e.initialScale ?? 0.01, o = e.rotationTriggerPoint ?? 0.8;
+}, dn = (e = {}) => {
+  const t = e.physics ?? pn, n = e.initialRotation ?? 45, s = e.initialScale ?? 0.01, o = e.rotationTriggerPoint ?? 0.8;
   return {
-    prepare: ({ from: a, to: i, context: l }) => (a.then((c) => {
-      c.style.opacity = "1";
-    }), i.then((c) => {
-      const r = T(l, "to"), p = Math.min(r.width, r.height) * 0.4;
-      c.style.setProperty("--max-border-radius", `${p}px`), c.style.setProperty("--border-radius-scale", "1"), c.style.willChange = "transform", c.style.backfaceVisibility = "hidden";
-      const d = r.left + r.width / 2, h = r.top + r.height / 2;
-      c.style.transformOrigin = `${d}px ${h}px`, c.style.position = "fixed", c.style.top = `${r.top}px`, c.style.left = `${r.left}px`, c.style.width = `${r.width}px`, c.style.height = `${r.height}px`, c.style.zIndex = "1000", c.style.overflow = "hidden", c.style.transform = `rotate(${n}deg) scale(${s}) translateZ(0)`, c.style.borderRadius = "calc(var(--max-border-radius) * var(--border-radius-scale))", c.style.opacity = "1";
+    prepare: ({ from: r, to: i, context: c }) => (r.then((l) => {
+      l.style.opacity = "1";
+    }), i.then((l) => {
+      const a = H(c, "to"), p = Math.min(a.width, a.height) * 0.4;
+      l.style.setProperty("--max-border-radius", `${p}px`), l.style.setProperty("--border-radius-scale", "1"), l.style.willChange = "transform", l.style.backfaceVisibility = "hidden";
+      const f = a.left + a.width / 2, h = a.top + a.height / 2;
+      l.style.transformOrigin = `${f}px ${h}px`, l.style.position = "fixed", l.style.top = `${a.top}px`, l.style.left = `${a.left}px`, l.style.width = `${a.width}px`, l.style.height = `${a.height}px`, l.style.zIndex = "1000", l.style.overflow = "hidden", l.style.transform = `rotate(${n}deg) scale(${s}) translateZ(0)`, l.style.borderRadius = "calc(var(--max-border-radius) * var(--border-radius-scale))", l.style.opacity = "1";
     }), {}),
-    animation: ({ from: a, to: i }) => {
-      const l = new w({
-        element: a,
-        integrator: g.from(Jt),
-        style: (r, p) => ({ opacity: p })
-      }), c = new w({
+    animation: ({ from: r, to: i }) => {
+      const c = new b({
+        element: r,
+        integrator: g.from(fn),
+        style: (a, p) => ({ opacity: p })
+      }), l = new b({
         element: i,
         integrator: g.from(t),
-        style: (r) => {
+        style: (a) => {
           let p;
-          if (r <= 0.05)
+          if (a <= 0.05)
             p = s;
-          else if (r <= o) {
-            const f = (r - 0.05) / (o - 0.05), m = Math.pow(f, 9);
-            p = s + (0.8 - s) * m;
+          else if (a <= o) {
+            const d = (a - 0.05) / (o - 0.05), y = Math.pow(d, 9);
+            p = s + (0.8 - s) * y;
           } else {
-            const f = (r - o) / (1 - o);
-            p = 0.8 + 0.2 * (1 - Math.pow(1 - f, 3));
+            const d = (a - o) / (1 - o);
+            p = 0.8 + 0.2 * (1 - Math.pow(1 - d, 3));
           }
-          const d = 0.7;
+          const f = 0.7;
           let h;
-          if (r <= d)
+          if (a <= f)
             h = n;
           else {
-            const f = (r - d) / (1 - d), m = 1 - Math.pow(1 - f, 2);
-            h = n * (1 - m);
+            const d = (a - f) / (1 - f), y = 1 - Math.pow(1 - d, 2);
+            h = n * (1 - y);
           }
-          let u;
-          if (r <= d)
-            u = 1;
+          let m;
+          if (a <= f)
+            m = 1;
           else {
-            const f = (r - d) / (1 - d);
-            u = 1 - Math.pow(f, 0.5);
+            const d = (a - f) / (1 - f);
+            m = 1 - Math.pow(d, 0.5);
           }
           return {
             transform: `rotate(${h.toFixed(2)}deg) scale(${p.toFixed(4)}) translateZ(0)`,
-            "--border-radius-scale": u.toFixed(4)
+            "--border-radius-scale": m.toFixed(4)
           };
         },
         onComplete: () => {
           i.style.willChange = "", i.style.backfaceVisibility = "", i.style.removeProperty("--max-border-radius"), i.style.removeProperty("--border-radius-scale"), i.style.transform = "", i.style.transformOrigin = "", i.style.position = "", i.style.zIndex = "", i.style.top = "", i.style.left = "", i.style.width = "", i.style.height = "", i.style.overflow = "", i.style.borderRadius = "";
         }
       });
-      return new $([l, c], { mode: "parallel" });
+      return new C([c, l], { mode: "parallel" });
     }
   };
 };
-function ve({ paths: e }) {
-  return P(e, () => Qt());
+function ys(e) {
+  const { paths: t } = e;
+  return _(t, () => dn());
 }
-const Rt = {
+const hn = {
   spring: { stiffness: 100, damping: 30 }
-}, te = (e = {}) => {
-  const t = e.physics ?? Rt;
+}, yn = (e = {}) => {
+  const t = e.physics ?? hn;
   return {
     prepare: ({ from: n, to: s }) => (n.then((o) => {
       o.style.transformOrigin = "center center", o.style.willChange = "transform, opacity";
@@ -927,33 +1391,34 @@ const Rt = {
       o.style.opacity = "0", o.style.transform = "rotate(-180deg)", o.style.transformOrigin = "center center", o.style.willChange = "transform, opacity";
     }), {}),
     animation: ({ from: n, to: s }) => {
-      const o = new w({
+      const o = new b({
         element: n,
         integrator: g.from(t),
         style: (i) => ({
           transform: `rotate(${i * 180}deg)`,
           opacity: i < 0.5 ? 1 : 0
         })
-      }), a = new w({
+      }), r = new b({
         element: s,
         integrator: g.from(t),
         // u runs 1→0, so -u*180 unwinds -180→0.
-        style: (i, l) => ({
-          transform: `rotate(${-l * 180}deg)`,
+        style: (i, c) => ({
+          transform: `rotate(${-c * 180}deg)`,
           opacity: i > 0.5 ? 1 : 0
         }),
         onComplete: () => {
           s.style.willChange = "auto", s.style.transform = "", s.style.transformOrigin = "", s.style.opacity = "";
         }
       });
-      return new $([o, a], { mode: "parallel" });
+      return new C([o, r], { mode: "parallel" });
     }
   };
 };
-function Le({ paths: e }) {
-  return P(e, () => te());
+function ms(e) {
+  const { paths: t } = e;
+  return _(t, () => yn());
 }
-const ee = {
+const mn = {
   spring: {
     stiffness: 20,
     damping: 8,
@@ -961,76 +1426,73 @@ const ee = {
     restDelta: 1e-3,
     restSpeed: 1e-3
   }
-}, J = (e = {}) => {
-  const t = e.direction ?? "up", n = e.physics ?? ee, s = t === "up";
+}, vt = (e = {}) => {
+  const t = e.direction ?? "up", n = e.physics ?? mn, s = t === "up";
   return {
-    prepare: ({ from: o, to: a }) => (o.then((i) => {
+    prepare: ({ from: o, to: r }) => (o.then((i) => {
       i.style.zIndex = s ? "-1" : "1", i.style.willChange = "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint", i.style.pointerEvents = "none";
-    }), a.then((i) => {
+    }), r.then((i) => {
       i.style.willChange = "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint";
     }), {}),
-    animation: ({ from: o, to: a }) => {
-      const i = o.offsetHeight, l = a.offsetHeight, c = window.innerHeight, r = Math.max(Math.min(i, l), c), p = new w({
+    animation: ({ from: o, to: r }) => {
+      const i = o.offsetHeight, c = r.offsetHeight, l = window.innerHeight, a = Math.max(Math.min(i, c), l), p = new b({
         element: o,
         integrator: g.from(n),
-        style: (h) => ({ transform: `translate3d(0, ${s ? -r * h : r * h}px, 0)` })
-      }), d = new w({
-        element: a,
+        style: (h) => ({ transform: `translate3d(0, ${s ? -a * h : a * h}px, 0)` })
+      }), f = new b({
+        element: r,
         integrator: g.from(n),
-        style: (h, u) => ({ transform: `translate3d(0, ${s ? u * r : u * -r}px, 0)` }),
+        style: (h, m) => ({ transform: `translate3d(0, ${s ? m * a : m * -a}px, 0)` }),
         onComplete: () => {
-          a.style.willChange = "auto", a.style.backfaceVisibility = "", a.style.contain = "", a.style.transform = "";
+          r.style.willChange = "auto", r.style.backfaceVisibility = "", r.style.contain = "", r.style.transform = "";
         }
       });
-      return new $([p, d], { mode: "parallel" });
+      return new C([p, f], { mode: "parallel" });
     }
   };
 };
-function Ye({
-  paths: e,
-  type: t = "directional",
-  direction: n = "up"
-}) {
-  return t === "non-directional" ? P(
-    e,
-    () => J({ direction: n })
-  ) : ot(
-    e,
+function us(e) {
+  const { paths: t, type: n = "directional" } = e;
+  return n === "non-directional" ? _(
+    t,
+    () => vt({ direction: "up" })
+  ) : pt(
+    t,
     { forward: "up", backward: "down" },
-    (s) => J({ direction: s })
+    (s) => vt({ direction: s })
   );
 }
-const ne = {
+const un = {
   spring: { stiffness: 200, damping: 24 }
-}, se = {
+}, gn = {
   inertia: { acceleration: 25, resistance: 1.2 }
-}, z = 0.2;
-function oe() {
+}, rt = 0.2;
+function bn() {
   return {
-    enterPhysics: ne,
-    exitPhysics: se,
+    enterPhysics: un,
+    exitPhysics: gn,
     background: {
       willChange: "transform, opacity",
       enterStyle: (e, t) => ({
-        transform: `scale(${1 - z * e})`,
+        transform: `scale(${1 - rt * e})`,
         opacity: t
       }),
       exitStyle: (e) => ({
-        transform: `scale(${1 - z + z * e})`,
+        transform: `scale(${1 - rt + rt * e})`,
         opacity: e
       })
     }
   };
 }
-const ie = {
-  spring: { stiffness: 200, damping: 24 }
-}, re = {
-  inertia: { acceleration: 25, resistance: 1.2 }
+const wn = {
+  spring: { stiffness: 300, damping: 30 }
+}, Sn = {
+  inertia: { acceleration: 70, resistance: 1.2 }
 };
-function ae() {
+function xn() {
   return {
-    enterPhysics: ie,
-    exitPhysics: re,
+    enterPhysics: wn,
+    exitPhysics: Sn,
     background: {
       willChange: "",
       enterStyle: () => ({}),
@@ -1038,333 +1500,548 @@ function ae() {
     }
   };
 }
-const le = {
-  static: ae(),
-  "background-scale": oe()
-}, ce = "static", pe = "transform", de = (e = {}) => {
-  const t = e.direction ?? "enter", n = le[e.type ?? ce], s = t === "enter" ? n.enterPhysics : n.exitPhysics, o = n.background, a = o.willChange !== "";
+const $n = {
+  static: xn(),
+  "background-scale": bn()
+}, En = "static", Cn = "transform", Pn = (e = {}) => {
+  const t = e.direction ?? "enter", n = $n[e.type ?? En], s = t === "enter" ? n.enterPhysics : n.exitPhysics, o = n.background, r = o.willChange !== "";
   return {
-    prepare: ({ from: i, to: l }) => {
-      const c = t === "enter" ? l : i, r = t === "enter" ? i : l;
-      return c.then((p) => {
-        p.style.willChange = pe, p.style.backfaceVisibility = "hidden", p.style.contain = "layout paint", t === "exit" && (p.style.pointerEvents = "none", p.style.zIndex = "100");
-      }), r.then((p) => {
-        a && (p.style.willChange = o.willChange, p.style.backfaceVisibility = "hidden", p.style.contain = "layout paint"), t === "enter" && (p.style.pointerEvents = "none", p.style.zIndex = "-1");
+    prepare: ({ from: i, to: c }) => {
+      const l = t === "enter" ? c : i, a = t === "enter" ? i : c;
+      return l.then((p) => {
+        p.style.willChange = Cn, p.style.backfaceVisibility = "hidden", p.style.contain = "layout paint", t === "exit" && (p.style.pointerEvents = "none", p.style.zIndex = "100");
+      }), a.then((p) => {
+        r && (p.style.willChange = o.willChange, p.style.backfaceVisibility = "hidden", p.style.contain = "layout paint"), t === "enter" && (p.style.pointerEvents = "none", p.style.zIndex = "-1");
       }), {};
     },
-    animation: ({ from: i, to: l, context: c }) => {
-      const r = t === "enter" ? l : i, p = t === "enter" ? i : l, d = T(
-        c,
+    animation: ({ from: i, to: c, context: l }) => {
+      const a = t === "enter" ? c : i, p = t === "enter" ? i : c, f = H(
+        l,
         t === "enter" ? "to" : "from"
       );
-      r.style.clipPath = `inset(${d.top}px 0 calc(100% - ${d.top + d.height}px) 0)`;
-      const h = t === "enter" ? (C, E) => ({
-        transform: `translate3d(0, ${E * d.height}px, 0)`
-      }) : (C) => ({
-        transform: `translate3d(0, ${C * d.height}px, 0)`
-      }), u = new w({
-        element: r,
+      a.style.clipPath = `inset(${f.top}px 0 calc(100% - ${f.top + f.height}px) 0)`;
+      const h = t === "enter" ? (E, P) => ({
+        transform: `translate3d(0, ${P * f.height}px, 0)`
+      }) : (E) => ({
+        transform: `translate3d(0, ${E * f.height}px, 0)`
+      }), m = new b({
+        element: a,
         integrator: g.from(s),
         style: h,
         onComplete: () => {
-          r.style.willChange = "auto", r.style.backfaceVisibility = "", r.style.contain = "", r.style.clipPath = "", r.style.transform = "";
+          a.style.willChange = "auto", a.style.backfaceVisibility = "", a.style.contain = "", a.style.clipPath = "", a.style.transform = "";
         }
       });
-      if (!a)
-        return new $([u], { mode: "parallel" });
-      const f = T(
-        c,
+      if (!r)
+        return new C([m], { mode: "parallel" });
+      const d = H(
+        l,
         t === "enter" ? "from" : "to"
-      ), m = f.left + f.width / 2, y = f.top + f.height / 2;
-      p.style.clipPath = `inset(${f.top}px 0 calc(100% - ${f.top + f.height}px) 0)`, p.style.transformOrigin = `${m}px ${y}px`;
-      const x = t === "enter" ? (C, E) => o.enterStyle(C, E) : (C) => o.exitStyle(C), b = new w({
+      ), y = d.left + d.width / 2, u = d.top + d.height / 2;
+      p.style.clipPath = `inset(${d.top}px 0 calc(100% - ${d.top + d.height}px) 0)`, p.style.transformOrigin = `${y}px ${u}px`;
+      const S = t === "enter" ? (E, P) => o.enterStyle(E, P) : (E) => o.exitStyle(E), w = new b({
         element: p,
         integrator: g.from(s),
-        style: x,
+        style: S,
         onComplete: t === "exit" ? () => {
           p.style.willChange = "auto", p.style.backfaceVisibility = "", p.style.contain = "", p.style.clipPath = "", p.style.transformOrigin = "";
         } : void 0
       });
-      return new $([u, b], { mode: "parallel" });
+      return new C([m, w], { mode: "parallel" });
     }
   };
 };
-function Fe({ type: e, ...t }) {
-  return st(
-    t,
-    (n) => de({ direction: n, type: e })
+function vn(e) {
+  return e === "scale" || e === "background-scale" ? "background-scale" : "static";
+}
+function gs(e) {
+  const { enter: t, exit: n } = e, s = e.type, o = vn(s);
+  return Dt(
+    { enter: t, exit: n },
+    (r) => Pn({ direction: r, type: o })
   );
 }
-const fe = {
+const Tn = {
   spring: { stiffness: 170, damping: 22, doubleSpring: 0.8 }
-}, he = (e = {}) => {
-  const t = e.direction ?? "left", n = e.physics ?? fe, s = t === "left";
+}, _n = (e = {}) => {
+  const t = e.direction ?? "left", n = e.physics ?? Tn, s = t === "left";
   return {
-    prepare: ({ from: o, to: a }) => (o.then((i) => {
+    prepare: ({ from: o, to: r }) => (o.then((i) => {
       i.style.willChange = "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint", i.style.pointerEvents = "none";
-    }), a.then((i) => {
-      const l = s ? 100 : -100;
-      i.style.transform = `translate3d(${l}%, 0, 0)`, i.style.willChange = "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint";
+    }), r.then((i) => {
+      const c = s ? 100 : -100;
+      i.style.transform = `translate3d(${c}%, 0, 0)`, i.style.willChange = "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint";
     }), {}),
-    animation: ({ from: o, to: a }) => {
-      const i = new w({
+    animation: ({ from: o, to: r }) => {
+      const i = new b({
         element: o,
         integrator: g.from(n),
-        style: (c) => ({ transform: `translate3d(${s ? -100 * c : 100 * c}%, 0, 0)` })
-      }), l = new w({
-        element: a,
+        style: (l) => ({ transform: `translate3d(${s ? -100 * l : 100 * l}%, 0, 0)` })
+      }), c = new b({
+        element: r,
         integrator: g.from(n),
-        style: (c, r) => ({ transform: `translate3d(${s ? r * 100 : r * -100}%, 0, 0)` }),
+        style: (l, a) => ({ transform: `translate3d(${s ? a * 100 : a * -100}%, 0, 0)` }),
         onComplete: () => {
-          a.style.willChange = "auto", a.style.backfaceVisibility = "", a.style.contain = "", a.style.transform = "";
+          r.style.willChange = "auto", r.style.backfaceVisibility = "", r.style.contain = "", r.style.transform = "";
         }
       });
-      return new $([i, l], { mode: "parallel" });
+      return new C([i, c], { mode: "parallel" });
     }
   };
 };
-function Me({ paths: e }) {
-  return ot(
-    e,
+function bs(e) {
+  const { paths: t } = e;
+  return pt(
+    t,
     { forward: "left", backward: "right" },
-    (t) => he({ direction: t })
+    (n) => _n({ direction: n })
   );
 }
-const me = {
+const In = {
   spring: { stiffness: 17, damping: 6 }
-}, V = 20, k = 800, ue = (e = {}) => {
-  const t = e.physics ?? me;
+}, it = 20, V = 800, On = (e = {}) => {
+  const t = e.physics ?? In;
   return {
     prepare: ({ from: n, to: s }) => (n.then((o) => {
-      o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.pointerEvents = "none", o.style.transform = `perspective(${k}px) rotateY(0deg) translate3d(0%, 0, 0)`;
+      o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.pointerEvents = "none", o.style.transform = `perspective(${V}px) rotateY(0deg) translate3d(0%, 0, 0)`;
     }), s.then((o) => {
-      o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.transform = `perspective(${k}px) rotateY(${V}deg) translate3d(-100%, 0, 0)`;
+      o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.transform = `perspective(${V}px) rotateY(${it}deg) translate3d(-100%, 0, 0)`;
     }), {}),
     animation: ({ from: n, to: s }) => {
-      const o = new w({
+      const o = new b({
         element: n,
         integrator: g.from(t),
         style: (i) => {
-          const l = -i * V, c = i * 100;
+          const c = -i * it, l = i * 100;
           return {
-            transform: `perspective(${k}px) rotateY(${l}deg) translate3d(${c}%, 0, 0)`
+            transform: `perspective(${V}px) rotateY(${c}deg) translate3d(${l}%, 0, 0)`
           };
         }
-      }), a = new w({
+      }), r = new b({
         element: s,
         integrator: g.from(t),
-        style: (i, l) => {
-          const c = l * V, r = -l * 100;
+        style: (i, c) => {
+          const l = c * it, a = -c * 100;
           return {
-            transform: `perspective(${k}px) rotateY(${c}deg) translate3d(${r}%, 0, 0)`
+            transform: `perspective(${V}px) rotateY(${l}deg) translate3d(${a}%, 0, 0)`
           };
         },
         onComplete: () => {
           s.style.transform = "", s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "";
         }
       });
-      return new $([o, a], { mode: "sequence" });
+      return new C([o, r], { mode: "sequence" });
     }
   };
 };
-function He({ paths: e }) {
-  return P(e, () => ue());
+function ws(e) {
+  const { paths: t } = e;
+  return _(t, () => On());
 }
-function it({
+function An({
   enterRect: e,
   exitRect: t,
   pageRect: n,
-  scrollOffset: s
+  scrollOffset: s,
+  enterRadius: o,
+  exitRadius: r
 }) {
-  const o = t.left - e.left + (t.width - e.width) / 2 - s.x, a = t.top - e.top + (t.height - e.height) / 2 - s.y, i = t.width / e.width, l = t.height / e.height, c = Math.max(i, l), r = e.top / n.height * 100, p = (n.width - (e.left + e.width)) / n.width * 100, d = (n.height - (e.top + e.height)) / n.height * 100, h = e.left / n.width * 100;
+  const i = t.left - e.left + (t.width - e.width) / 2 - s.x, c = t.top - e.top + (t.height - e.height) / 2 - s.y, l = t.width / e.width, a = t.height / e.height, p = e.top / n.height * 100, f = (n.width - (e.left + e.width)) / n.width * 100, h = (n.height - (e.top + e.height)) / n.height * 100, m = e.left / n.width * 100;
   return {
     transformOrigin: `${e.left + e.width / 2}px ${e.top + e.height / 2}px`,
-    animate: (u) => {
-      const f = 1 - u;
+    animate: (d) => {
+      const y = 1 - d, u = 1 + (l - 1) * y, S = 1 + (a - 1) * y, E = (r * y + o * (1 - y)) / ((u + S) / 2);
       return {
-        clipPath: `inset(${r * f}% ${p * f}% ${d * f}% ${h * f}%)`,
-        transform: `translate(${o * f}px, ${a * f}px) scale(${1 + (c - 1) * f})`
+        clipPath: `inset(${p * y}% ${f * y}% ${h * y}% ${m * y}% round ${E}px)`,
+        transform: `translate(${i * y}px, ${c * y}px) scale(${u}, ${S})`
       };
     }
   };
 }
-function rt({
+function Dn({
   enterRect: e,
   exitRect: t,
   pageRect: n,
-  scrollOffset: s
+  scrollOffset: s,
+  enterRadius: o,
+  exitRadius: r
 }) {
-  const o = t.left - e.left + (t.width - e.width) / 2 + s.x, a = t.top - e.top + (t.height - e.height) / 2 + s.y, i = t.width / e.width, l = t.height / e.height, c = Math.min(i, l), r = e.top / n.height * 100, p = (n.width - (e.left + e.width)) / n.width * 100, d = (n.height - (e.top + e.height)) / n.height * 100, h = e.left / n.width * 100;
+  const i = t.left - e.left + (t.width - e.width) / 2 + s.x, c = t.top - e.top + (t.height - e.height) / 2 + s.y, l = t.width / e.width, a = t.height / e.height, p = e.top / n.height * 100, f = (n.width - (e.left + e.width)) / n.width * 100, h = (n.height - (e.top + e.height)) / n.height * 100, m = e.left / n.width * 100;
   return {
     transformOrigin: `${e.left + e.width / 2}px ${e.top + e.height / 2}px`,
-    animate: (u) => {
-      const f = 1 - u;
+    animate: (d) => {
+      const y = 1 - d, u = 1 + (l - 1) * y, S = 1 + (a - 1) * y, E = (o * (1 - y) + r * y) / ((u + S) / 2);
+      return {
+        clipPath: `inset(${p * y}% ${f * y}% ${h * y}% ${m * y}% round ${E}px)`,
+        transform: `translate(${i * y - s.x}px, ${c * y}px) scale(${u}, ${S})`
+      };
+    }
+  };
+}
+const Fn = {
+  spring: { stiffness: 200, damping: 24 }
+}, Ft = 0.12, Ln = 18;
+function Yn() {
+  return {
+    transformOrigin: "50% 50%",
+    animate: (e) => {
+      const t = 1 - e;
       return {
-        clipPath: `inset(${r * f}% ${p * f}% ${d * f}% ${h * f}%)`,
-        transform: `translate(${o * f - s.x}px, ${a * f}px) scale(${1 + (c - 1) * f})`
+        transform: `scale(${1 - Ft * t})`
       };
     }
   };
 }
-const ye = {
+function kn() {
+  return {
+    transformOrigin: "50% 50%",
+    animate: (e) => {
+      const t = 1 - e;
+      return {
+        transform: `scale(${1 - Ft * t})`
+      };
+    }
+  };
+}
+const at = {
+  willChange: "backdrop-filter",
+  initialStyle: {
+    position: "absolute",
+    inset: "0",
+    pointerEvents: "none",
+    // Sits above the background page but below the zoomed page (z-index 2
+    // in transition.ts). backdrop-filter therefore blurs the background,
+    // while the zoom tile stays sharp as it expands on top.
+    zIndex: "1",
+    backdropFilter: "blur(0px)",
+    WebkitBackdropFilter: "blur(0px)"
+  },
+  style: (e, t) => {
+    const n = e === "enter" ? t : 1 - t, s = `blur(${Ln * n}px)`;
+    return {
+      backdropFilter: s,
+      WebkitBackdropFilter: s
+    };
+  }
+};
+class Hn {
+  constructor() {
+    $(this, "physics", Fn);
+  }
+  contribute(t) {
+    const { from: n, to: s, resolved: o, physics: r } = t, i = o.mode === "enter", c = i ? n : s, l = i ? Yn() : kn();
+    return l && (c.style.transformOrigin = l.transformOrigin), [
+      new b({
+        element: c,
+        integrator: g.from(r),
+        style: i ? (a, p) => l.animate(p) : (a) => l.animate(a)
+      })
+    ];
+  }
+}
+class Mn {
+  prepare(t) {
+    const n = t.createElement("zoom-overlay");
+    return Object.assign(n.style, at.initialStyle), n.style.willChange = at.willChange, t.context.positionedParent.appendChild(n), { overlay: n };
+  }
+  contribute(t) {
+    const n = t.extras.overlay;
+    return n ? [
+      new b({
+        element: n,
+        integrator: g.from(t.physics),
+        style: (s) => at.style(t.resolved.mode, s)
+      })
+    ] : [];
+  }
+}
+const Un = {
   spring: { stiffness: 340, damping: 30, doubleSpring: 1 }
 };
-function ge({
+function zn({
   enterRect: e,
   exitRect: t,
   scrollOffset: n
 }) {
-  const s = e.left - t.left + (e.width - t.width) / 2 + n.x, o = e.top - t.top + (e.height - t.height) / 2 + n.y, a = e.width / t.width, i = e.height / t.height, l = Math.max(a, i);
+  const s = e.left - t.left + (e.width - t.width) / 2 + n.x, o = e.top - t.top + (e.height - t.height) / 2 + n.y, r = e.width / t.width, i = e.height / t.height, c = Math.max(r, i);
   return {
     transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
-    animate: (c) => {
-      const r = 1 - c;
+    animate: (l) => {
+      const a = 1 - l;
       return {
-        transform: `translate(${s * r - n.x}px, ${o * r}px) scale(${1 + (l - 1) * r})`,
-        opacity: `${1 - r}`
+        transform: `translate(${s * a - n.x}px, ${o * a}px) scale(${1 + (c - 1) * a})`,
+        opacity: `${1 - a}`
       };
     }
   };
 }
-function we({
+function Xn({
   enterRect: e,
   exitRect: t,
   scrollOffset: n
 }) {
-  const s = e.left - t.left + (e.width - t.width) / 2 - n.x, o = e.top - t.top + (e.height - t.height) / 2 - n.y, a = e.width / t.width, i = e.height / t.height, l = Math.max(a, i);
+  const s = e.left - t.left + (e.width - t.width) / 2 - n.x, o = e.top - t.top + (e.height - t.height) / 2 - n.y, r = e.width / t.width, i = e.height / t.height, c = Math.max(r, i);
   return {
     transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
-    animate: (c) => {
-      const r = 1 - c;
+    animate: (l) => {
+      const a = 1 - l;
       return {
-        transform: `translate(${s * r}px, ${o * r}px) scale(${1 + (l - 1) * r})`,
-        opacity: `${c}`
+        transform: `translate(${s * a}px, ${o * a}px) scale(${1 + (c - 1) * a})`,
+        opacity: `${l}`
       };
     }
   };
 }
-function be() {
-  return {
-    physics: ye,
-    in: it,
-    out: rt,
-    backgroundIn: we,
-    backgroundOut: ge
-  };
+class Nn {
+  constructor() {
+    $(this, "physics", Un);
+  }
+  contribute(t) {
+    const { from: n, to: s, resolved: o, input: r, physics: i } = t, c = o.mode === "enter", l = c ? n : s, a = c ? zn(r) : Xn(r);
+    return a && (l.style.transformOrigin = a.transformOrigin), [
+      new b({
+        element: l,
+        integrator: g.from(i),
+        style: c ? (p, f) => a.animate(f) : (p) => a.animate(p)
+      })
+    ];
+  }
 }
-const Se = {
+const Vn = {
   spring: { stiffness: 420, damping: 34 }
 };
-function Q() {
-  return {
-    transformOrigin: "",
-    animate: () => ({})
-  };
+class Bn {
+  constructor() {
+    $(this, "physics", Vn);
+  }
+  contribute(t) {
+    return [];
+  }
 }
-function $e() {
-  return {
-    physics: Se,
-    in: it,
-    out: rt,
-    backgroundIn: () => Q(),
-    backgroundOut: () => Q()
-  };
+const Wn = {
+  expand: () => new Nn(),
+  static: () => new Bn(),
+  blur: () => new Hn()
+};
+function Rn(e) {
+  return Wn[e]();
 }
-const xe = {
-  expand: be(),
-  static: $e()
-}, X = "data-zoom-enter-key", R = "data-zoom-exit-key";
-function tt(e) {
-  const t = e.querySelectorAll(`[${X}]`);
+const lt = "data-zoom-enter-key", Tt = "data-zoom-exit-key", Zn = "data-zoom-radius";
+function _t(e) {
+  const t = e.getAttribute(Zn);
+  if (!t) return 0;
+  const n = parseFloat(t);
+  return Number.isFinite(n) && n > 0 ? n : 0;
+}
+function qn(e, t) {
+  const n = [];
+  let s = t;
+  for (; s && s !== e; ) {
+    const o = s.parentElement;
+    if (!o) break;
+    for (const r of Array.from(o.children))
+      r !== s && r instanceof HTMLElement && n.push(r);
+    s = o;
+  }
+  return n;
+}
+function It(e) {
+  const t = e.querySelectorAll(`[${lt}]`);
   return t.length !== 1 ? null : t[0];
 }
-function et(e, t) {
-  const n = e.querySelectorAll(`[${R}]`);
+function Ot(e, t) {
+  const n = e.querySelectorAll(`[${Tt}]`);
   for (const s of n)
-    if (s.getAttribute(R) === t)
+    if (s.getAttribute(Tt) === t)
       return s;
   return null;
 }
-function Ce(e, t) {
-  const n = tt(e), s = tt(t);
+function jn(e, t) {
+  const n = It(e), s = It(t);
   if (!n && s) {
-    const o = s.getAttribute(X);
+    const o = s.getAttribute(lt);
     if (!o) return null;
-    const a = et(e, o);
-    return a ? { mode: "enter", enterEl: s, exitEl: a } : null;
+    const r = Ot(e, o);
+    return r ? { mode: "enter", enterEl: s, exitEl: r } : null;
   }
   if (n && !s) {
-    const o = n.getAttribute(X);
+    const o = n.getAttribute(lt);
     if (!o) return null;
-    const a = et(t, o);
-    return a ? { mode: "exit", enterEl: n, exitEl: a } : null;
+    const r = Ot(t, o);
+    return r ? { mode: "exit", enterEl: n, exitEl: r } : null;
   }
   return null;
 }
-function Ee(e, t, n, s) {
+function Kn(e, t, n, s) {
   return {
-    enterRect: O(
+    enterRect: k(
       e.mode === "enter" ? n : t,
       e.enterEl
     ),
-    exitRect: O(
+    exitRect: k(
       e.mode === "enter" ? t : n,
       e.exitEl
     ),
     pageRect: e.mode === "enter" ? n.getBoundingClientRect() : t.getBoundingClientRect(),
-    scrollOffset: s
+    scrollOffset: s,
+    enterRadius: _t(e.enterEl),
+    exitRadius: _t(e.exitEl)
   };
 }
-const Pe = (e) => {
-  const t = xe[e.type], n = t.physics;
+class Gn {
+  prepare(t) {
+    t.from.then((n) => {
+      n.style.willChange = "transform, clip-path, opacity", n.style.backfaceVisibility = "hidden", n.style.contain = "layout paint";
+    });
+  }
+  contribute(t) {
+    const { from: n, to: s, resolved: o, input: r, physics: i, onComplete: c } = t, l = o.mode === "enter", a = l ? An(r) : Dn(r), p = l ? s : n, f = l ? "t" : "u";
+    a && (p.style.transformOrigin = a.transformOrigin);
+    const h = p.style.zIndex;
+    return p.style.zIndex = "2", c(() => {
+      p.style.willChange = "auto", p.style.backfaceVisibility = "", p.style.transformOrigin = "", p.style.contain = "", p.style.zIndex = h;
+    }), [
+      new b({
+        element: p,
+        integrator: g.from(i),
+        // Enter: tile expands as `t` (0 → 1). Exit: tile shrinks as `u` —
+        // the legacy convention from v5's outAnim path. Either way, feed
+        // the progress that matches the tileConfig's authored direction.
+        style: f === "t" ? (m) => a.animate(m) : (m, d) => a.animate(d)
+      })
+    ];
+  }
+}
+class Jn {
+  contribute(t) {
+    const { resolved: n, physics: s, from: o, to: r, onComplete: i } = t, c = n.mode === "enter" ? r : o, l = qn(c, n.enterEl);
+    if (l.length === 0) return [];
+    const a = l.map((p) => p.style.opacity);
+    if (n.mode === "enter")
+      for (const p of l) p.style.opacity = "0";
+    return i(() => {
+      for (let p = 0; p < l.length; p++) {
+        const f = l[p];
+        f && (f.style.opacity = a[p] ?? "");
+      }
+    }), l.map(
+      (p) => new b({
+        element: p,
+        integrator: g.from(s),
+        style: (f, h) => ({
+          opacity: n.mode === "enter" ? f : h
+        })
+      })
+    );
+  }
+}
+class Lt {
+  contribute() {
+    return [];
+  }
+}
+const Qn = {
+  default: () => new Lt(),
+  fade: () => new Jn()
+};
+function ts(e) {
+  return Qn[e]();
+}
+class es extends Lt {
+}
+function ns(e) {
+  const t = Rn(e.type);
+  return { strategies: [
+    new Gn(),
+    t,
+    ts(e.variant),
+    new es(),
+    // Overlay is intrinsically tied to backdrop-filter-driven types. Today
+    // that's only `blur`; the table-driven factory above owns the mapping
+    // so this conditional is the single line that knows the relationship.
+    ...e.type === "blur" ? [new Mn()] : []
+  ], physics: t.physics };
+}
+const ss = (e) => {
+  const { strategies: t, physics: n } = ns(e);
   return {
-    prepare: ({ from: s }) => (s.then((o) => {
-      o.style.willChange = "transform, clip-path, opacity", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint";
-    }), {}),
-    animation: ({ from: s, to: o, context: a }) => {
-      const i = Ce(s, o);
-      if (!i)
-        return new $([], { mode: "parallel" });
-      const l = Ee(i, s, o, a.scrollOffset), c = i.mode === "enter" ? t.in(l) : t.backgroundIn(l), r = i.mode === "enter" ? t.backgroundOut(l) : t.out(l);
-      c && (o.style.transformOrigin = c.transformOrigin), r && (s.style.transformOrigin = r.transformOrigin);
-      const p = i.mode === "enter" ? o : s, d = p.style.zIndex;
-      p.style.zIndex = "9999";
-      const h = new w({
-        element: s,
-        integrator: g.from(n),
-        // The provider's `animate` was authored against legacy convention
-        // where OUT runs `progress: 1 → 0`. Our `u` mirrors that, so feeding
-        // `u` keeps the visual direction (full page → shrunk to tile) intact.
-        style: (f, m) => r.animate(m)
-      }), u = new w({
-        element: o,
-        integrator: g.from(n),
-        style: (f) => c.animate(f),
-        onComplete: () => {
-          o.style.willChange = "auto", o.style.backfaceVisibility = "", o.style.transformOrigin = "", o.style.contain = "", p.style.zIndex = d;
+    prepare: (s) => {
+      const o = {
+        from: s.from,
+        to: s.to,
+        context: { positionedParent: s.context.positionedParent },
+        // `createElement` from the dispatcher is generic over tag; the
+        // strategy interface narrows the cast to keep both signatures
+        // compatible.
+        createElement: s.createElement
+      }, r = {};
+      for (const i of t) {
+        if (!i.prepare) continue;
+        const c = i.prepare(o);
+        c && Object.assign(r, c);
+      }
+      return r;
+    },
+    animation: ({ from: s, to: o, context: r, ...i }) => {
+      const c = jn(s, o);
+      if (!c)
+        return new C([], { mode: "parallel" });
+      const l = Kn(c, s, o, r.scrollOffset), a = [], f = {
+        from: s,
+        to: o,
+        resolved: c,
+        input: l,
+        physics: n,
+        extras: i,
+        onComplete: (d) => {
+          a.push(d);
         }
-      });
-      return new $([h, u], { mode: "parallel" });
+      }, h = [];
+      for (const d of t)
+        d.contribute && h.push(...d.contribute(f));
+      const m = h[0];
+      if (m) {
+        const d = m.onComplete;
+        m.onComplete = () => {
+          d == null || d();
+          for (const y of a)
+            try {
+              y();
+            } catch (u) {
+              console.error("[zoom] cleanup error", u);
+            }
+        };
+      }
+      return new C(h, { mode: "parallel" });
     }
   };
 };
-function Ue({ paths: e, type: t }) {
-  return P(e, () => Pe({ type: t }));
+function os(e) {
+  const t = e.type ?? "static", n = e.variant ?? (e.fade ? "fade" : "default");
+  return { type: t, variant: n };
+}
+function Ss(e) {
+  const t = os(e);
+  return _(
+    e.paths,
+    () => ss(t)
+  );
 }
 export {
-  Xe as Animation,
-  $ as MultiAnimation,
-  w as WebAnimation,
-  Ie as blind,
-  Te as drill,
-  Ae as fade,
-  _e as film,
-  ke as hero,
-  ve as jaemin,
-  Le as rotate,
-  Ye as scroll,
-  Fe as sheet,
-  Me as slide,
-  He as strip,
-  Ue as zoom
+  Es as Animation,
+  C as MultiAnimation,
+  b as WebAnimation,
+  as as axis,
+  ls as blind,
+  cs as drill,
+  ps as fade,
+  fs as film,
+  hs as hero,
+  ys as jaemin,
+  ms as rotate,
+  us as scroll,
+  gs as sheet,
+  bs as slide,
+  ws as strip,
+  Ss as zoom
 };