@ssgoi/core 2.4.0 → 2.5.1

package/dist/view-transitions/index.js

@@ -1,23 +1,20 @@
-const W = (t) => new Promise((n) => setTimeout(n, t)), m = (t, n) => {
-  t.style.position = "absolute", t.style.width = "100%", t.style.top = `${-1 * ((n == null ? void 0 : n.scroll.y) ?? 0)}px`, t.style.left = "0";
-}, H = { stiffness: 80, damping: 25 }, X = { stiffness: 75, damping: 25 }, U = 300, N = 10, M = "horizontal", B = "#000000", rt = (t = {}) => {
+import { p as b, g as T } from "../jaemin-BAi8PTrj.js";
+import { a as Wt } from "../jaemin-BAi8PTrj.js";
+const G = (t) => new Promise((e) => setTimeout(e, t)), M = { stiffness: 80, damping: 25 }, V = { stiffness: 75, damping: 25 }, q = 300, j = 10, K = "horizontal", Z = "#000000", St = (t = {}) => {
   const {
-    inSpring: n = X,
-    outSpring: l = H,
-    transitionDelay: h = U,
-    blindCount: o = N,
-    direction: i = M,
-    staggerDelay: s = 100,
-    blindColor: e = B
+    inSpring: e = V,
+    outSpring: r = M,
+    transitionDelay: c = q,
+    blindCount: s = j,
+    direction: o = K,
+    staggerDelay: l = 100,
+    blindColor: n = Z
   } = t;
-  let r, d = null;
-  const c = (p, a, g, y = !1) => {
-    const f = Math.min(0.5, s * g / 1e3), $ = 1 - f, x = (y ? g - 1 - a : a) / g * f, w = x + $;
-    return p <= x ? 0 : p >= w ? 1 : (p - x) / $;
-  }, u = (p, a, g = "left") => {
-    window.getComputedStyle(p).position === "static" && (p.style.position = "relative");
-    const f = document.createElement("div");
-    f.className = "blind-container", f.style.cssText = `
+  let i, d = null;
+  const a = (h, g, y = "left") => {
+    window.getComputedStyle(h).position === "static" && (h.style.position = "relative");
+    const p = document.createElement("div");
+    p.className = "blind-container", p.style.cssText = `
       position: absolute;
       top: 0;
       left: 0;
@@ -27,737 +24,813 @@ const W = (t) => new Promise((n) => setTimeout(n, t)), m = (t, n) => {
       z-index: 9999;
       overflow: hidden;
     `;
-    const $ = [];
-    for (let b = 0; b < o; b++) {
-      const x = document.createElement("div");
-      if (i === "horizontal") {
-        const w = 100 / o, L = `calc(${w}% + 1px)`;
-        x.style.cssText = `
+    const f = [];
+    for (let $ = 0; $ < s; $++) {
+      const m = document.createElement("div");
+      if (o === "horizontal") {
+        const x = 100 / s, S = `calc(${x}% + 1px)`;
+        m.style.cssText = `
           position: absolute;
-          top: ${w * b}%;
+          top: ${x * $}%;
           left: 0;
           width: 100%;
-          height: ${L};
-          background: ${e};
-          transform: scaleX(${a === "hidden" ? 0 : 1});
-          transform-origin: ${g} center;
+          height: ${S};
+          background: ${n};
+          transform: scaleX(${g === "hidden" ? 0 : 1});
+          transform-origin: ${y} center;
           will-change: transform;
         `;
       } else {
-        const w = 100 / o, L = `calc(${w}% + 1px)`;
-        x.style.cssText = `
+        const x = 100 / s, S = `calc(${x}% + 1px)`;
+        m.style.cssText = `
           position: absolute;
           top: 0;
-          left: ${w * b}%;
-          width: ${L};
+          left: ${x * $}%;
+          width: ${S};
           height: 100%;
-          background: ${e};
-          transform: scaleY(${a === "hidden" ? 0 : 1});
-          transform-origin: ${g === "left" ? "top" : "bottom"} center;
+          background: ${n};
+          transform: scaleY(${g === "hidden" ? 0 : 1});
+          transform-origin: ${y === "left" ? "top" : "bottom"} center;
           will-change: transform;
         `;
       }
-      $.push(x), f.appendChild(x);
+      f.push(m), p.appendChild(m);
     }
-    return p.appendChild(f), { container: f, blinds: $ };
+    return h.appendChild(p), { container: p, blinds: f };
   };
   return {
     out: () => {
-      let p = null;
-      return r = new Promise((a) => {
-        d = a;
+      let h = null;
+      return i = new Promise((y) => {
+        d = y;
       }), {
-        spring: l,
-        prepare: (a) => {
-          m(a), a.style.zIndex = "1000", p = u(a, "hidden", "left");
+        springs: Array.from({ length: s }, (y, u) => ({
+          from: 0,
+          to: 1,
+          spring: r,
+          offset: u * l,
+          tick: (p) => {
+            if (!h) return;
+            const f = h.blinds[u];
+            f && (o === "horizontal" ? f.style.transform = `scaleX(${p})` : f.style.transform = `scaleY(${p})`);
+          }
+        })),
+        schedule: "chain",
+        prepare: (y) => {
+          b(y), y.style.zIndex = "1000", h = a(y, "hidden", "left");
         },
         onStart: () => {
         },
-        tick: (a) => {
-          if (!p) return;
-          const g = 1 - a;
-          p.blinds.forEach((y, f) => {
-            const $ = c(
-              g,
-              f,
-              o,
-              !1
-              // not reversed - left to right
-            );
-            i === "horizontal" ? y.style.transform = `scaleX(${$})` : y.style.transform = `scaleY(${$})`;
-          });
-        },
         onEnd: () => {
           d && d();
         }
       };
     },
     in: () => {
-      let p = null;
+      let h = null;
       return {
-        spring: n,
-        prepare: (a) => {
-          a.style.position = "relative", a.style.zIndex = "0", p = u(a, "closed", "right");
+        springs: Array.from({ length: s }, (y, u) => ({
+          from: 1,
+          to: 0,
+          spring: e,
+          offset: u * l,
+          tick: (p) => {
+            if (!h) return;
+            const f = h.blinds[u];
+            f && (o === "horizontal" ? f.style.transform = `scaleX(${p})` : f.style.transform = `scaleY(${p})`);
+          }
+        })),
+        schedule: "chain",
+        prepare: (y) => {
+          y.style.position = "relative", y.style.zIndex = "0", h = a(y, "closed", "right");
         },
         onStart: () => {
         },
         wait: async () => {
-          r && await r, await W(h);
-        },
-        tick: (a) => {
-          p && p.blinds.forEach((g, y) => {
-            const f = c(
-              a,
-              y,
-              o,
-              !1
-              // same direction as OUT - left to right
-            );
-            i === "horizontal" ? g.style.transform = `scaleX(${1 - f})` : g.style.transform = `scaleY(${1 - f})`;
-          });
+          i && await i, await G(c);
         },
         onEnd: () => {
-          p && p.container && p.container.remove();
+          h && h.container && h.container.remove();
         }
       };
     }
   };
-}, ot = (t = {}) => {
-  var o, i;
-  const { opacity: n = !1, direction: l = "enter" } = t, h = {
-    stiffness: ((o = t.spring) == null ? void 0 : o.stiffness) ?? 150,
-    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 20
+}, _t = (t = {}) => {
+  var s, o;
+  const { opacity: e = !1, direction: r = "enter" } = t, c = {
+    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? 150,
+    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? 20
   };
-  return l === "enter" ? {
-    in: (s) => ({
-      spring: h,
-      tick: (e) => {
-        s.style.transform = `translateX(${(1 - e) * 100}%)`, n && (s.style.opacity = e.toString());
+  return r === "enter" ? {
+    in: (l) => ({
+      spring: c,
+      tick: (n) => {
+        l.style.transform = `translateX(${(1 - n) * 100}%)`, e && (l.style.opacity = n.toString());
       }
     }),
-    out: (s, e) => ({
-      spring: h,
-      prepare: (r) => {
-        m(r, e), r.style.zIndex = "-1";
+    out: (l, n) => ({
+      spring: c,
+      prepare: (i) => {
+        b(i, n), i.style.zIndex = "-1";
       },
-      tick: (r) => {
-        s.style.transform = `translateX(${-(1 - r) * 20}%)`, n && (s.style.opacity = r.toString());
+      tick: (i) => {
+        l.style.transform = `translateX(${-(1 - i) * 20}%)`, e && (l.style.opacity = i.toString());
       }
     })
   } : {
-    in: (s) => ({
+    in: (l) => ({
       spring: {
         stiffness: 100,
         damping: 20
       },
-      tick: (e) => {
-        s.style.transform = `translateX(${-(1 - e) * 20}%)`, n && (s.style.opacity = e.toString());
+      tick: (n) => {
+        l.style.transform = `translateX(${-(1 - n) * 20}%)`, e && (l.style.opacity = n.toString());
       }
     }),
-    out: (s, e) => ({
+    out: (l, n) => ({
       spring: {
         stiffness: 100,
         damping: 20
       },
-      prepare: (r) => {
-        m(r, e), r.style.zIndex = "100";
+      prepare: (i) => {
+        b(i, n), i.style.zIndex = "100";
       },
-      tick: (r) => {
-        s.style.transform = `translateX(${(1 - r) * 100}%)`, n && (s.style.opacity = r.toString());
+      tick: (i) => {
+        l.style.transform = `translateX(${(1 - i) * 100}%)`, e && (l.style.opacity = i.toString());
       }
     })
   };
-}, G = (t) => new Promise((n) => setTimeout(n, t)), q = { stiffness: 400, damping: 20 }, V = { stiffness: 40, damping: 8 }, Z = 100, lt = (t = {}) => {
+}, J = (t) => new Promise((e) => setTimeout(e, t)), Q = { stiffness: 7, damping: 4 }, R = { stiffness: 8, damping: 4 }, tt = 0, Ct = (t = {}) => {
   const {
-    inSpring: n = V,
-    outSpring: l = q,
-    transitionDelay: h = Z
+    inSpring: e = R,
+    outSpring: r = Q,
+    transitionDelay: c = tt
   } = t;
-  let o, i = null;
+  let s, o = null;
   return {
-    in: (s) => ({
-      spring: n,
-      prepare: (e) => {
-        e.style.opacity = "0";
+    in: (l) => ({
+      spring: e,
+      prepare: (n) => {
+        n.style.opacity = "0", n.style.willChange = "opacity";
       },
       wait: async () => {
-        o && (await o, await G(h));
+        s && (await s, await J(c));
       },
-      tick: (e) => {
-        s.style.opacity = e.toString();
+      tick: (n) => {
+        l.style.opacity = n.toString();
       }
     }),
-    out: (s, e) => (o = new Promise((r) => {
-      i = r;
+    out: (l, n) => (s = new Promise((i) => {
+      o = i;
     }), {
-      spring: l,
-      tick: (r) => {
-        s.style.opacity = r.toString();
+      spring: r,
+      tick: (i) => {
+        l.style.opacity = i.toString();
+      },
+      prepare: (i) => {
+        b(i, n), i.style.willChange = "opacity";
       },
-      prepare: (r) => m(r, e),
       onEnd: () => {
-        i && i();
+        o && o();
       }
     })
   };
-};
-function P(t, n) {
-  function l(i) {
-    let s = 0, e = 0;
-    const r = i.offsetWidth, d = i.offsetHeight;
-    let c = i;
-    for (; c; )
-      s += c.offsetTop, e += c.offsetLeft, c = c.offsetParent;
-    return s -= window.scrollY, e -= window.scrollX, { top: s, left: e, width: r, height: d };
-  }
-  const h = l(t), o = l(n);
-  return new DOMRect(
-    o.left - h.left,
-    o.top - h.top,
-    o.width,
-    o.height
-  );
-}
-const j = {
-  stiffness: 10,
+}, et = {
+  stiffness: 5,
   // Lower stiffness for smoother motion
-  damping: 5
+  damping: 3.5
   // Lower damping for more fluid movement
-}, k = 0.2, E = 0.82;
-function T(t) {
-  const n = P(document.body, t.positionedParent);
-  return {
-    top: t.scroll.y,
-    left: 0,
-    width: n.width,
-    height: window.innerHeight - n.top
-  };
-}
-function A(t, n) {
-  const l = n.left + n.width / 2, h = n.top + n.height / 2;
-  t.style.transformOrigin = `${l}px ${h}px`;
-}
-function I(t, n) {
-  t.style.clipPath = `polygon(
-    ${n.left}px ${n.top}px,
-    ${n.left + n.width}px ${n.top}px,
-    ${n.left + n.width}px ${n.top + n.height}px,
-    ${n.left}px ${n.top + n.height}px
-  )`;
-}
-function J(t, n) {
-  t.style.transform = `translateY(${-n.top}px)`;
-}
-function S(t, n, l) {
-  return t <= n ? 0 : t >= l ? 1 : (t - n) / (l - n);
-}
-function C(t, n, l) {
-  t.topLeft.style.transform = `translate(${n}px, ${l}px)`, t.topRight.style.transform = `translate(${-n}px, ${l}px)`, t.bottomLeft.style.transform = `translate(${n}px, ${-l}px)`, t.bottomRight.style.transform = `translate(${-n}px, ${-l}px)`;
-}
-function K(t = "white", n) {
-  const o = document.createElement("div");
-  o.style.position = "fixed", o.style.pointerEvents = "none", o.style.zIndex = "9999", o.style.top = `${n.top - 2}px`, o.style.left = `${n.left - 2}px`, o.style.width = "10px", o.style.height = "10px";
-  const i = document.createElement("div");
-  i.style.position = "absolute", i.style.width = "10px", i.style.height = "2px", i.style.backgroundColor = t, i.style.top = "0", i.style.left = "0";
-  const s = document.createElement("div");
-  s.style.position = "absolute", s.style.width = "2px", s.style.height = "10px", s.style.backgroundColor = t, s.style.top = "0", s.style.left = "0", o.appendChild(i), o.appendChild(s);
-  const e = document.createElement("div");
-  e.style.position = "fixed", e.style.pointerEvents = "none", e.style.zIndex = "9999", e.style.top = `${n.top - 2}px`, e.style.left = `${n.left + n.width - 10 + 2}px`, e.style.width = "10px", e.style.height = "10px";
-  const r = document.createElement("div");
-  r.style.position = "absolute", r.style.width = "10px", r.style.height = "2px", r.style.backgroundColor = t, r.style.top = "0", r.style.right = "0";
-  const d = document.createElement("div");
-  d.style.position = "absolute", d.style.width = "2px", d.style.height = "10px", d.style.backgroundColor = t, d.style.top = "0", d.style.right = "0", e.appendChild(r), e.appendChild(d);
-  const c = document.createElement("div");
-  c.style.position = "fixed", c.style.pointerEvents = "none", c.style.zIndex = "9999", c.style.top = `${n.top + n.height - 10 + 2}px`, c.style.left = `${n.left - 2}px`, c.style.width = "10px", c.style.height = "10px";
-  const u = document.createElement("div");
-  u.style.position = "absolute", u.style.width = "10px", u.style.height = "2px", u.style.backgroundColor = t, u.style.bottom = "0", u.style.left = "0";
-  const p = document.createElement("div");
-  p.style.position = "absolute", p.style.width = "2px", p.style.height = "10px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.left = "0", c.appendChild(u), c.appendChild(p);
-  const a = document.createElement("div");
-  a.style.position = "fixed", a.style.pointerEvents = "none", a.style.zIndex = "9999", a.style.top = `${n.top + n.height - 10 + 2}px`, a.style.left = `${n.left + n.width - 10 + 2}px`, a.style.width = "10px", a.style.height = "10px";
-  const g = document.createElement("div");
-  g.style.position = "absolute", g.style.width = "10px", g.style.height = "2px", g.style.backgroundColor = t, g.style.bottom = "0", g.style.right = "0";
-  const y = document.createElement("div");
-  return y.style.position = "absolute", y.style.width = "2px", y.style.height = "10px", y.style.backgroundColor = t, y.style.bottom = "0", y.style.right = "0", a.appendChild(g), a.appendChild(y), {
-    topLeft: o,
-    topRight: e,
-    bottomLeft: c,
-    bottomRight: a,
-    *[Symbol.iterator]() {
-      yield o, yield e, yield c, yield a;
-    }
-  };
-}
-const at = (t) => {
-  var o;
-  const n = (t == null ? void 0 : t.spring) ?? j, l = (t == null ? void 0 : t.scale) ?? 0.92, h = ((o = t == null ? void 0 : t.border) == null ? void 0 : o.color) ?? "white";
+}, nt = 0.8, it = "white", w = {
+  start: 0,
+  end: 0.45
+}, E = {
+  start: 0.85,
+  end: 1
+}, L = {
+  start: 0.2,
+  end: 0.9
+}, kt = (t) => {
+  var s;
+  const e = (t == null ? void 0 : t.spring) ?? et, r = (t == null ? void 0 : t.scale) ?? nt, c = ((s = t == null ? void 0 : t.border) == null ? void 0 : s.color) ?? it;
   return {
-    out: async (i, s) => {
-      const e = T(s), r = P(document.body, s.positionedParent), d = K(h, {
-        ...e,
-        top: r.top
+    out: async (o, l) => {
+      const n = P(l), i = T(document.body, l.positionedParent), d = rt(c, {
+        ...n,
+        top: i.top
       });
+      let a = 1, h = -n.top;
       return {
-        spring: n,
+        spring: e,
         prepare: () => {
-          m(i), A(i, e), I(i, e), J(i, e);
-          for (const c of d)
-            s.positionedParent.appendChild(c), c.style.transition = "transform 0.1s ease-out";
+          b(o), I(o, n), D(o, n), ot(o, n);
+          for (const g of d)
+            l.positionedParent.appendChild(g);
         },
         onEnd: () => {
-          i.style.clipPath = "", i.style.transformOrigin = "", setTimeout(() => {
-            for (const c of d)
-              s.positionedParent.removeChild(c);
+          o.style.clipPath = "", o.style.transformOrigin = "", setTimeout(() => {
+            for (const g of d)
+              l.positionedParent.removeChild(g);
           }, 1e3);
         },
-        tick: (c) => {
-          const u = 1 - c;
-          if (u < k) {
-            const p = S(u, 0, k), a = 1 - (1 - l) * p;
-            i.style.transform = `translateY(${-e.top}px) scale(${a})`;
-            const g = (e.width - e.width * a) / 2, y = (e.height - e.height * a) / 2;
-            C(d, g, y);
-          } else if (u < E) {
-            const p = S(
-              u,
-              k,
-              E
-            ), a = -e.top - e.height * p;
-            i.style.transform = `translateY(${a}px) scale(${l})`;
-          } else {
-            const p = S(u, E, 1), a = l + (1 - l) * p;
-            i.style.transform = `translateY(${-e.top - e.height}px) scale(${a})`;
-            const g = (e.width - e.width * a) / 2, y = (e.height - e.height * a) / 2;
-            C(d, g, y);
+        tick: (g) => {
+          const y = 1 - g;
+          if (w.start <= y && y <= w.end) {
+            const f = A(
+              y,
+              w.start,
+              w.end
+            );
+            a = 1 - (1 - r) * f;
+          }
+          if (E.start <= y && y <= E.end) {
+            const f = A(
+              y,
+              E.start,
+              E.end
+            );
+            a = r + (1 - r) * f;
           }
+          if (L.start <= y && y <= L.end) {
+            const f = A(
+              y,
+              L.start,
+              L.end
+            );
+            h = -n.top - n.height * f;
+          }
+          o.style.transform = `translateY(${h}px) scale(${a})`;
+          const u = (n.width - n.width * a) / 2, p = (n.height - n.height * a) / 2;
+          st(d, u, p);
         }
       };
     },
-    in: async (i, s) => {
-      const e = T(s);
+    in: async (o, l) => {
+      const n = P(l);
+      let i = r, d = -n.top + n.height;
       return {
-        spring: n,
+        spring: e,
         prepare: () => {
-          A(i, e), I(i, e), i.style.transform = `translateY(${-e.top + e.height}px) scale(${l})`;
+          I(o, n), D(o, n), o.style.transform = `translateY(${-n.top + n.height}px) scale(${r})`;
         },
         onEnd: () => {
-          i.style.clipPath = "", i.style.transformOrigin = "", i.style.transform = "";
+          o.style.clipPath = "", o.style.transformOrigin = "", o.style.transform = "";
         },
-        tick: (r) => {
-          if (r < k)
-            i.style.transform = `translateY(${-e.top + e.height}px) scale(${l})`, i.style.opacity = "0";
-          else if (r < E) {
-            const d = S(
-              r,
-              k,
-              E
-            ), c = -e.top + e.height * (1 - d);
-            i.style.transform = `translateY(${c}px) scale(${l})`, i.style.opacity = "1";
-          } else {
-            const d = S(r, E, 1), c = l + (1 - l) * d;
-            i.style.transform = `translateY(${-e.top}px) scale(${c})`, i.style.opacity = "1";
+        tick: (a) => {
+          if (w.start <= a && a <= w.end) {
+            const h = A(
+              a,
+              w.start,
+              w.end
+            );
+            i = 1 - (1 - r) * h;
+          }
+          if (E.start <= a && a <= E.end) {
+            const h = A(
+              a,
+              E.start,
+              E.end
+            );
+            i = r + (1 - r) * h;
           }
+          if (L.start <= a && a <= L.end) {
+            const h = A(
+              a,
+              L.start,
+              L.end
+            );
+            d = -n.top + n.height * (1 - h);
+          }
+          o.style.transform = `translateY(${d}px) scale(${i})`;
         }
       };
     }
   };
 };
-function Q(t, n) {
-  return t.querySelector(`[data-hero-key="${n}"]`);
+function st(t, e, r) {
+  const c = e * 0.7, s = r * 0.7;
+  t.topLeft.style.transform = `translate(${c}px, ${s}px)`, t.topRight.style.transform = `translate(${-c}px, ${s}px)`, t.bottomLeft.style.transform = `translate(${c}px, ${-s}px)`, t.bottomRight.style.transform = `translate(${-c}px, ${-s}px)`;
+}
+function rt(t = "white", e) {
+  const s = document.createElement("div");
+  s.style.position = "fixed", s.style.pointerEvents = "none", s.style.zIndex = "9999", s.style.top = `${e.top - 1}px`, s.style.left = `${e.left - 1}px`, s.style.width = "15px", s.style.height = "15px";
+  const o = document.createElement("div");
+  o.style.position = "absolute", o.style.width = "15px", o.style.height = "1px", o.style.backgroundColor = t, o.style.top = "0", o.style.left = "0";
+  const l = document.createElement("div");
+  l.style.position = "absolute", l.style.width = "1px", l.style.height = "15px", l.style.backgroundColor = t, l.style.top = "0", l.style.left = "0", s.appendChild(o), s.appendChild(l);
+  const n = document.createElement("div");
+  n.style.position = "fixed", n.style.pointerEvents = "none", n.style.zIndex = "9999", n.style.top = `${e.top - 1}px`, n.style.left = `${e.left + e.width - 15 + 1}px`, n.style.width = "15px", n.style.height = "15px";
+  const i = document.createElement("div");
+  i.style.position = "absolute", i.style.width = "15px", i.style.height = "1px", i.style.backgroundColor = t, i.style.top = "0", i.style.right = "0";
+  const d = document.createElement("div");
+  d.style.position = "absolute", d.style.width = "1px", d.style.height = "15px", d.style.backgroundColor = t, d.style.top = "0", d.style.right = "0", n.appendChild(i), n.appendChild(d);
+  const a = document.createElement("div");
+  a.style.position = "fixed", a.style.pointerEvents = "none", a.style.zIndex = "9999", a.style.top = `${e.top + e.height - 15 + 1}px`, a.style.left = `${e.left - 1}px`, a.style.width = "15px", a.style.height = "15px";
+  const h = document.createElement("div");
+  h.style.position = "absolute", h.style.width = "15px", h.style.height = "1px", h.style.backgroundColor = t, h.style.bottom = "0", h.style.left = "0";
+  const g = document.createElement("div");
+  g.style.position = "absolute", g.style.width = "1px", g.style.height = "15px", g.style.backgroundColor = t, g.style.bottom = "0", g.style.left = "0", a.appendChild(h), a.appendChild(g);
+  const y = document.createElement("div");
+  y.style.position = "fixed", y.style.pointerEvents = "none", y.style.zIndex = "9999", y.style.top = `${e.top + e.height - 15 + 1}px`, y.style.left = `${e.left + e.width - 15 + 1}px`, y.style.width = "15px", y.style.height = "15px";
+  const u = document.createElement("div");
+  u.style.position = "absolute", u.style.width = "15px", u.style.height = "1px", u.style.backgroundColor = t, u.style.bottom = "0", u.style.right = "0";
+  const p = document.createElement("div");
+  return p.style.position = "absolute", p.style.width = "1px", p.style.height = "15px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.right = "0", y.appendChild(u), y.appendChild(p), {
+    topLeft: s,
+    topRight: n,
+    bottomLeft: a,
+    bottomRight: y,
+    *[Symbol.iterator]() {
+      yield s, yield n, yield a, yield y;
+    }
+  };
+}
+function P(t) {
+  const e = T(document.body, t.positionedParent);
+  return {
+    top: t.scroll.y,
+    left: 0,
+    width: e.width,
+    height: window.innerHeight - e.top
+  };
+}
+function I(t, e) {
+  const r = e.left + e.width / 2, c = e.top + e.height / 2;
+  t.style.transformOrigin = `${r}px ${c}px`;
+}
+function D(t, e) {
+  t.style.clipPath = `polygon(
+    ${e.left}px ${e.top}px,
+    ${e.left + e.width}px ${e.top}px,
+    ${e.left + e.width}px ${e.top + e.height}px,
+    ${e.left}px ${e.top + e.height}px
+  )`;
+}
+function ot(t, e) {
+  t.style.transform = `translateY(${-e.top}px)`;
+}
+function A(t, e, r) {
+  return t <= e ? 0 : t >= r ? 1 : (t - e) / (r - e);
+}
+function lt(t, e) {
+  return t.querySelector(`[data-hero-key="${e}"]`);
 }
-const dt = (t = {}) => {
-  var i, s;
-  const n = {
-    stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 300,
-    damping: ((s = t.spring) == null ? void 0 : s.damping) ?? 30
-  }, l = t.timeout ?? 300;
-  let h = null, o = null;
+const Pt = (t = {}) => {
+  var l, n;
+  const e = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 300,
+    damping: ((n = t.spring) == null ? void 0 : n.damping) ?? 30
+  }, r = t.timeout ?? 300, c = t.maxDistance ?? 700;
+  let s = null, o = null;
   return {
-    in: async (e, r) => {
-      const d = e, c = Array.from(d.querySelectorAll("[data-hero-key]"));
-      if (c.length === 0)
+    in: async (i, d) => {
+      const a = i, h = Array.from(a.querySelectorAll("[data-hero-key]"));
+      if (h.length === 0)
         return {
-          spring: n,
+          spring: e,
           tick: () => {
           }
           // No hero elements, skip animation
         };
-      if (!await new Promise((a) => {
-        h ? a(!0) : (o = a, setTimeout(() => {
-          o = null, a(!1);
-        }, l));
-      }) || !h)
-        return h = null, {
-          spring: n,
+      if (!await new Promise((u) => {
+        s ? u(!0) : (o = u, setTimeout(() => {
+          o = null, u(!1);
+        }, r));
+      }) || !s)
+        return s = null, {
+          spring: e,
           tick: () => {
           }
           // No fromNode, skip animation
         };
-      const p = c.map((a) => {
-        const g = a.getAttribute("data-hero-key");
-        if (!g) return null;
-        const y = Q(h, g);
-        if (!y) return null;
-        const f = a, $ = P(h, y), b = P(d, f), x = $.left - b.left - r.scrollOffset.x, w = $.top - b.top - r.scrollOffset.y, L = $.width / b.width, F = $.height / b.height, Y = f.style.transform, _ = f.style.position, z = f.style.transformOrigin, O = f.style.zIndex;
+      const y = h.map((u) => {
+        const p = u.getAttribute("data-hero-key");
+        if (!p) return null;
+        const f = lt(s, p);
+        if (!f) return null;
+        const $ = u, m = T(s, f), x = T(a, $), S = m.left - x.left - d.scrollOffset.x, U = m.top - x.top - d.scrollOffset.y, W = m.width / x.width, X = m.height / x.height, N = $.style.transform, z = $.style.position, H = $.style.transformOrigin, B = $.style.zIndex;
         return {
-          toEl: f,
-          dx: x,
-          dy: w,
-          dw: L,
-          dh: F,
-          originalTransform: Y,
-          originalPosition: _,
-          originalTransformOrigin: z,
-          originalZIndex: O
+          toEl: $,
+          dx: S,
+          dy: U,
+          dw: W,
+          dh: X,
+          originalTransform: N,
+          originalPosition: z,
+          originalTransformOrigin: H,
+          originalZIndex: B
         };
-      }).filter(Boolean);
-      return h = null, p.length === 0 ? {
-        spring: n,
+      }).filter(
+        (u) => u !== null && Math.abs(u.dy) <= c
+      );
+      return s = null, y.length === 0 ? {
+        spring: e,
         tick: () => {
         }
         // No matching hero elements
       } : {
-        spring: n,
+        spring: e,
         prepare: () => {
-          p.forEach(({ toEl: a }) => {
-            a.style.position = "relative", a.style.transformOrigin = "top left", a.style.zIndex = "1000";
+          y.forEach(({ toEl: u }) => {
+            u.style.position = "relative", u.style.transformOrigin = "top left", u.style.zIndex = "1000";
           });
         },
-        tick: (a) => {
-          p.forEach(({ toEl: g, dx: y, dy: f, dw: $, dh: b }) => {
-            g.style.transform = `translate(${(1 - a) * y}px,${(1 - a) * f}px) scale(${a + (1 - a) * $}, ${a + (1 - a) * b})`;
+        tick: (u) => {
+          y.forEach(({ toEl: p, dx: f, dy: $, dw: m, dh: x }) => {
+            p.style.transform = `translate(${(1 - u) * f}px,${(1 - u) * $}px) scale(${u + (1 - u) * m}, ${u + (1 - u) * x})`;
           });
         },
         onEnd: () => {
-          p.forEach(
+          y.forEach(
             ({
-              toEl: a,
-              originalTransform: g,
-              originalPosition: y,
-              originalTransformOrigin: f,
-              originalZIndex: $
+              toEl: u,
+              originalTransform: p,
+              originalPosition: f,
+              originalTransformOrigin: $,
+              originalZIndex: m
             }) => {
-              a.style.transform = g, a.style.position = y, a.style.transformOrigin = f, a.style.zIndex = $;
+              u.style.transform = p, u.style.position = f, u.style.transformOrigin = $, u.style.zIndex = m;
             }
           );
         }
       };
     },
-    out: async (e) => ({
+    out: async (i) => ({
       onStart: () => {
-        h = e, o && (o(!0), o = null);
+        s = i, o && (o(!0), o = null);
       },
-      prepare: (r) => {
-        m(r), r.style.opacity = "0";
+      prepare: (d) => {
+        b(d), d.style.opacity = "0";
       }
     })
   };
 };
-function R(t) {
-  const n = P(document.body, t.positionedParent);
-  return {
-    top: t.scroll.y,
-    left: 0,
-    width: n.width,
-    height: window.innerHeight - n.top
-  };
-}
-const ct = (t = {}) => {
-  var i, s;
-  const n = {
-    // Much slower animation - 4x duration by reducing stiffness further
-    stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 50,
-    damping: ((s = t.spring) == null ? void 0 : s.damping) ?? 30
-  }, l = t.initialRotation ?? 45, h = t.initialScale ?? 0.01, o = t.rotationTriggerPoint ?? 0.8;
-  return {
-    out: async (e, r) => {
-      const d = e.style.opacity;
-      return {
-        spring: {
-          stiffness: 80,
-          damping: 25
-        },
-        from: 1,
-        to: 0,
-        prepare: () => {
-          m(e, r), e.style.opacity = "1";
-        },
-        tick: (c) => {
-          e.style.opacity = String(c);
-        },
-        onEnd: () => {
-          e.style.opacity = d;
-        }
-      };
-    },
-    in: async (e, r) => {
-      const d = R(r), c = e.style.transform, u = e.style.transformOrigin, p = e.style.position, a = e.style.zIndex;
-      return {
-        spring: n,
-        from: 0,
-        to: 1,
-        prepare: () => {
-          const g = Math.min(d.width, d.height) * 0.4;
-          e.style.setProperty(
-            "--max-border-radius",
-            `${g}px`
-          ), e.style.setProperty("--border-radius-scale", "1"), e.style.willChange = "transform", e.style.backfaceVisibility = "hidden";
-          const y = d.left + d.width / 2, f = d.top + d.height / 2;
-          e.style.transformOrigin = `${y}px ${f}px`, e.style.position = "fixed", e.style.top = `${d.top}px`, e.style.left = `${d.left}px`, e.style.width = `${d.width}px`, e.style.height = `${d.height}px`, e.style.zIndex = "1000", e.style.overflow = "hidden", e.style.transform = `rotate(${l}deg) scale(${h}) translateZ(0)`, e.style.borderRadius = "calc(var(--max-border-radius) * var(--border-radius-scale))", e.style.opacity = "1";
-        },
-        tick: (g) => {
-          let y;
-          if (g <= 0.05)
-            y = h;
-          else if (g <= o) {
-            const x = (g - 0.05) / (o - 0.05), w = Math.pow(x, 9);
-            y = h + (0.8 - h) * w;
-          } else {
-            const x = (g - o) / (1 - o);
-            y = 0.8 + 0.2 * (1 - Math.pow(1 - x, 3));
-          }
-          let f;
-          const $ = 0.7;
-          if (g <= $)
-            f = l;
-          else {
-            const x = (g - $) / (1 - $), w = 1 - Math.pow(1 - x, 2);
-            f = l * (1 - w);
-          }
-          let b;
-          if (g <= $)
-            b = 1;
-          else {
-            const x = (g - $) / (1 - $);
-            b = 1 - Math.pow(x, 0.5);
-          }
-          e.style.transform = `rotate(${f.toFixed(2)}deg) scale(${y.toFixed(4)}) translateZ(0)`, e.style.setProperty(
-            "--border-radius-scale",
-            b.toFixed(4)
-          );
-        },
-        onEnd: () => {
-          e.style.willChange = "", e.style.backfaceVisibility = "", e.style.removeProperty("--max-border-radius"), e.style.removeProperty("--border-radius-scale"), e.style.transform = c, e.style.transformOrigin = u, e.style.position = p, e.style.zIndex = a, e.style.top = "", e.style.left = "", e.style.width = "", e.style.height = "", e.style.overflow = "", e.style.borderRadius = "";
-        }
-      };
-    }
-  };
-};
-function tt({
+function at({
   detailRect: t,
-  galleryRect: n,
-  pageRect: l,
-  scrollOffset: h
-}, o) {
-  const i = n.left - t.left + (n.width - t.width) / 2 - h.x, s = n.top - t.top + (n.height - t.height) / 2 - h.y, e = n.width / t.width, r = n.height / t.height, d = Math.max(e, r), c = t.top / l.height * 100, u = (l.width - (t.left + t.width)) / l.width * 100, p = (l.height - (t.top + t.height)) / l.height * 100, a = t.left / l.width * 100;
-  return o.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (g) => {
-    const y = 1 - g, f = c * y, $ = u * y, b = p * y, x = a * y;
-    o.style.clipPath = `inset(${f}% ${$}% ${b}% ${x}%)`, o.style.transform = `translate(${i * y}px, ${s * y}px) scale(${1 + (d - 1) * y})`;
+  galleryRect: e,
+  pageRect: r,
+  scrollOffset: c
+}, s) {
+  const o = e.left - t.left + (e.width - t.width) / 2 - c.x, l = e.top - t.top + (e.height - t.height) / 2 - c.y, n = e.width / t.width, i = e.height / t.height, d = Math.max(n, i), a = t.top / r.height * 100, h = (r.width - (t.left + t.width)) / r.width * 100, g = (r.height - (t.top + t.height)) / r.height * 100, y = t.left / r.width * 100;
+  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (u) => {
+    const p = 1 - u, f = a * p, $ = h * p, m = g * p, x = y * p;
+    s.style.clipPath = `inset(${f}% ${$}% ${m}% ${x}%)`, s.style.transform = `translate(${o * p}px, ${l * p}px) scale(${1 + (d - 1) * p})`;
   };
 }
-function et({
+function dt({
   galleryRect: t,
-  detailRect: n,
-  scrollOffset: l
-}, h) {
-  const o = n.left - t.left + (n.width - t.width) / 2 + l.x, i = n.top - t.top + (n.height - t.height) / 2 + l.y, s = n.width / t.width, e = n.height / t.height, r = Math.max(s, e);
+  detailRect: e,
+  scrollOffset: r
+}, c) {
+  const s = e.left - t.left + (e.width - t.width) / 2 + r.x, o = e.top - t.top + (e.height - t.height) / 2 + r.y, l = e.width / t.width, n = e.height / t.height, i = Math.max(l, n);
   return (d) => {
-    h.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
-    const c = 1 - d;
-    h.style.transform = `translate(${o * c - l.x}px, ${i * c - l.y}px) scale(${1 + (r - 1) * c})`, h.style.opacity = `${1 - c}`;
+    c.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
+    const a = 1 - d;
+    c.style.transform = `translate(${s * a - r.x}px, ${o * a - r.y}px) scale(${1 + (i - 1) * a})`, c.style.opacity = `${1 - a}`;
   };
 }
-function nt({
+function ct({
   galleryRect: t,
-  detailRect: n,
-  scrollOffset: l
-}, h) {
-  const o = n.left - t.left + (n.width - t.width) / 2 - l.x, i = n.top - t.top + (n.height - t.height) / 2 - l.y, s = n.width / t.width, e = n.height / t.height, r = Math.max(s, e);
+  detailRect: e,
+  scrollOffset: r
+}, c) {
+  const s = e.left - t.left + (e.width - t.width) / 2 - r.x, o = e.top - t.top + (e.height - t.height) / 2 - r.y, l = e.width / t.width, n = e.height / t.height, i = Math.max(l, n);
   return (d) => {
-    const c = 1 - d, u = d;
-    h.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, h.style.transform = `translate(${o * c}px, ${i * c}px) scale(${1 + (r - 1) * c})`, h.style.opacity = `${u}`;
+    const a = 1 - d, h = d;
+    c.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, c.style.transform = `translate(${s * a}px, ${o * a}px) scale(${1 + (i - 1) * a})`, c.style.opacity = `${h}`;
   };
 }
-function it({
+function ht({
   detailRect: t,
-  galleryRect: n,
-  pageRect: l,
-  scrollOffset: h
-}, o) {
-  const i = n.left - t.left + (n.width - t.width) / 2 + h.x, s = n.top - t.top + (n.height - t.height) / 2 + h.y, e = n.width / t.width, r = n.height / t.height, d = Math.min(e, r), c = t.top / l.height * 100, u = (l.width - (t.left + t.width)) / l.width * 100, p = (l.height - (t.top + t.height)) / l.height * 100, a = t.left / l.width * 100;
-  return o.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (g) => {
-    const y = 1 - g, f = c * y, $ = u * y, b = p * y, x = a * y;
-    o.style.clipPath = `inset(${f}% ${$}% ${b}% ${x}%)`, o.style.transform = `translate(${i * y - h.x}px, ${s * y - h.y}px) scale(${1 + (d - 1) * y})`;
+  galleryRect: e,
+  pageRect: r,
+  scrollOffset: c
+}, s) {
+  const o = e.left - t.left + (e.width - t.width) / 2 + c.x, l = e.top - t.top + (e.height - t.height) / 2 + c.y, n = e.width / t.width, i = e.height / t.height, d = Math.min(n, i), a = t.top / r.height * 100, h = (r.width - (t.left + t.width)) / r.width * 100, g = (r.height - (t.top + t.height)) / r.height * 100, y = t.left / r.width * 100;
+  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (u) => {
+    const p = 1 - u, f = a * p, $ = h * p, m = g * p, x = y * p;
+    s.style.clipPath = `inset(${f}% ${$}% ${m}% ${x}%)`, s.style.transform = `translate(${o * p - c.x}px, ${l * p - c.y}px) scale(${1 + (d - 1) * p})`;
   };
 }
-function st(t, n, l) {
-  const h = t.querySelector(
+function pt(t, e, r) {
+  const c = t.querySelector(
     "[data-pinterest-detail-key]"
-  ), o = n.querySelector(
+  ), s = e.querySelector(
     "[data-pinterest-detail-key]"
   );
-  if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
+  if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || e.querySelectorAll("[data-pinterest-detail-key]").length > 1)
     return null;
-  let i = null, s = null, e = !1;
-  if (!h && o) {
-    s = o;
-    const u = s.getAttribute("data-pinterest-detail-key");
-    if (!u) return null;
-    i = t.querySelector(
-      `[data-pinterest-gallery-key="${u}"]`
-    ), i && (e = !0);
-  } else if (h && !o) {
-    s = h;
-    const u = s.getAttribute("data-pinterest-detail-key");
-    if (!u) return null;
-    i = n.querySelector(
-      `[data-pinterest-gallery-key="${u}"]`
-    ), i && (e = !1);
+  let o = null, l = null, n = !1;
+  if (!c && s) {
+    l = s;
+    const h = l.getAttribute("data-pinterest-detail-key");
+    if (!h) return null;
+    o = t.querySelector(
+      `[data-pinterest-gallery-key="${h}"]`
+    ), o && (n = !0);
+  } else if (c && !s) {
+    l = c;
+    const h = l.getAttribute("data-pinterest-detail-key");
+    if (!h) return null;
+    o = e.querySelector(
+      `[data-pinterest-gallery-key="${h}"]`
+    ), o && (n = !1);
   }
-  if (!i || !s)
+  if (!o || !l)
     return null;
-  const r = P(e ? t : n, i), d = P(e ? n : t, s), c = n.getBoundingClientRect();
-  return e ? {
-    inAnimation: tt(
-      { detailRect: d, galleryRect: r, pageRect: c, scrollOffset: l },
-      n
+  const i = T(n ? t : e, o), d = T(n ? e : t, l), a = e.getBoundingClientRect();
+  return n ? {
+    inAnimation: at(
+      { detailRect: d, galleryRect: i, pageRect: a, scrollOffset: r },
+      e
     ),
-    outAnimation: et(
-      { galleryRect: r, detailRect: d, scrollOffset: l },
+    outAnimation: dt(
+      { galleryRect: i, detailRect: d, scrollOffset: r },
       t
     )
   } : {
-    inAnimation: nt(
-      { galleryRect: r, detailRect: d, scrollOffset: l },
-      n
+    inAnimation: ct(
+      { galleryRect: i, detailRect: d, scrollOffset: r },
+      e
     ),
-    outAnimation: it(
-      { detailRect: d, galleryRect: r, pageRect: c, scrollOffset: l },
+    outAnimation: ht(
+      { detailRect: d, galleryRect: i, pageRect: a, scrollOffset: r },
       t
     )
   };
 }
-const ht = (t = {}) => {
-  var s, e;
-  const n = {
-    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? 50,
-    damping: ((e = t.spring) == null ? void 0 : e.damping) ?? 10
-  }, l = t.timeout ?? 300;
-  let h = null, o = null, i = null;
+const It = (t = {}) => {
+  var l, n;
+  const e = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 30,
+    damping: ((n = t.spring) == null ? void 0 : n.damping) ?? 10
+  }, r = t.timeout ?? 300;
+  let c = null, s = null, o = null;
   return {
-    in: async (r, { scrollOffset: d }) => {
-      const c = r;
-      return !await new Promise((p) => {
-        h ? p(!0) : (o = p, setTimeout(() => {
-          o = null, p(!1);
-        }, l));
-      }) || !h ? (h = null, {
-        spring: n,
+    in: async (i, { scrollOffset: d }) => {
+      const a = i;
+      return !await new Promise((g) => {
+        c ? g(!0) : (s = g, setTimeout(() => {
+          s = null, g(!1);
+        }, r));
+      }) || !c ? (c = null, {
+        spring: e,
         tick: () => {
         }
-      }) : (i = st(h, c, d), i ? (h = null, {
-        spring: n,
-        tick: (p) => {
-          i && i.inAnimation(p);
+      }) : (o = pt(c, a, d), o ? (c = null, {
+        spring: e,
+        tick: (g) => {
+          o && o.inAnimation(g);
         }
       }) : {
-        spring: n,
+        spring: e,
         tick: () => {
         }
       });
     },
-    out: async (r) => ({
-      spring: n,
+    out: async (i) => ({
+      spring: e,
       onStart: () => {
-        h = r, o && (o(!0), o = null);
+        c = i, s && (s(!0), s = null);
       },
       prepare: (d) => {
-        m(d), d.style.zIndex = "-1";
+        b(d), d.style.zIndex = "-1";
       },
       tick: (d) => {
-        i && i.outAnimation(d);
+        o && o.outAnimation(d);
       }
     })
   };
 }, v = {
-  stiffness: 30,
-  damping: 7
-}, pt = (t = {}) => {
-  var r, d;
-  const n = t.direction ?? "up", l = {
-    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? v.stiffness,
+  stiffness: 5,
+  damping: 4
+}, Dt = (t = {}) => {
+  var i, d;
+  const e = t.direction ?? "up", r = {
+    stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? v.stiffness,
     damping: ((d = t.spring) == null ? void 0 : d.damping) ?? v.damping
-  }, h = n === "up";
-  let o = null, i = null, s = null;
-  const e = () => {
-    if (o === null || i === null)
+  }, c = e === "up";
+  let s = null, o = null, l = null;
+  const n = () => {
+    if (s === null || o === null)
       return null;
-    const c = Math.min(o, i), u = window.innerHeight;
-    return Math.max(c, u);
+    const a = Math.min(s, o), h = window.innerHeight;
+    return Math.max(a, h);
   };
   return {
-    in: (c) => (i = c.offsetHeight, o !== null && (s = e()), {
-      spring: l,
-      tick: (u) => {
-        if (s === null && (s = e(), s === null))
+    in: (a) => (o = a.offsetHeight, s !== null && (l = n()), {
+      spring: r,
+      tick: (h) => {
+        if (l === null && (l = n(), l === null))
           return;
-        const p = h ? (1 - u) * s : (1 - u) * -s;
-        c.style.transform = `translateY(${p}px)`;
+        const g = c ? (1 - h) * l : (1 - h) * -l;
+        a.style.transform = `translateY(${g}px)`;
       }
     }),
-    out: (c) => ({
-      spring: l,
+    out: (a) => ({
+      spring: r,
       onStart: () => {
-        o = c.offsetHeight, i !== null && (s = e());
+        s = a.offsetHeight, o !== null && (l = n());
       },
-      tick: (u) => {
-        if (s === null && (s = e(), s === null))
+      tick: (h) => {
+        if (l === null && (l = n(), l === null))
           return;
-        const p = h ? (1 - u) * -s : (1 - u) * s;
-        c.style.transform = `translateY(${p}px)`;
+        const g = c ? (1 - h) * -l : (1 - h) * l;
+        a.style.transform = `translateY(${g}px)`;
       },
-      prepare: (u) => {
-        m(u), u.style.zIndex = h ? "-1" : "1";
+      prepare: (h) => {
+        b(h), h.style.zIndex = c ? "-1" : "1";
       }
     })
   };
-}, D = {
-  stiffness: 30,
+}, F = {
+  stiffness: 15,
   damping: 7
-}, yt = (t = {}) => {
-  var o, i;
-  const n = t.direction ?? "left", l = {
-    stiffness: ((o = t.spring) == null ? void 0 : o.stiffness) ?? D.stiffness,
-    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? D.damping
-  }, h = n === "left";
+}, vt = (t = {}) => {
+  var s, o;
+  const e = t.direction ?? "left", r = {
+    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? F.stiffness,
+    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? F.damping
+  }, c = e === "left";
   return {
-    in: (s) => ({
-      spring: l,
-      tick: (e) => {
-        const r = h ? (1 - e) * 100 : (1 - e) * -100;
-        s.style.transform = `translateX(${r}%)`;
+    in: (l) => ({
+      spring: r,
+      tick: (n) => {
+        const i = c ? (1 - n) * 100 : (1 - n) * -100;
+        l.style.transform = `translateX(${i}%)`;
       }
     }),
-    out: (s, e) => ({
-      spring: l,
-      tick: (r) => {
-        const d = h ? (1 - r) * -100 : (1 - r) * 100;
-        s.style.transform = `translateX(${d}%)`;
+    out: (l, n) => ({
+      spring: r,
+      tick: (i) => {
+        const d = c ? (1 - i) * -100 : (1 - i) * 100;
+        l.style.transform = `translateX(${d}%)`;
       },
-      prepare: (r) => {
-        m(r, e), r.style.zIndex = h ? "-1" : "1";
+      prepare: (i) => {
+        b(i, n), i.style.zIndex = c ? "-1" : "1";
       }
     })
   };
+}, O = { stiffness: 17, damping: 6 }, C = 20, k = 800, Ft = () => {
+  let t, e = null;
+  return {
+    in: (r) => ({
+      spring: O,
+      prepare: (c) => {
+        c.style.transform = `perspective(${k}px) rotateY(${C}deg) translateX(-100%)`;
+      },
+      wait: async () => {
+        t && await t;
+      },
+      tick: (c) => {
+        const s = (1 - c) * C, o = -(1 - c) * 100;
+        r.style.transform = `perspective(${k}px) rotateY(${s}deg) translateX(${o}%)`;
+      },
+      onEnd: () => {
+        r.style.transform = "";
+      }
+    }),
+    out: (r, c) => (t = new Promise((s) => {
+      e = s;
+    }), {
+      spring: O,
+      prepare: (s) => {
+        b(s, c);
+      },
+      tick: (s) => {
+        const o = 1 - s, l = o * C, n = o * 100;
+        r.style.transform = `perspective(${k}px) rotateY(${-l}deg) translateX(${n}%)`;
+      },
+      onEnd: () => {
+        e && e(), r.style.transform = "";
+      }
+    })
+  };
+}, yt = { stiffness: 1, damping: 1 }, ut = { stiffness: 20, damping: 25 }, gt = "#000000", ft = "circle", Y = "CURTAIN_REVEAL_OVERLAY_ID", $t = {
+  position: "fixed",
+  inset: "0",
+  width: "100vw",
+  height: "100%",
+  zIndex: "9999",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  overflow: "hidden"
+}, mt = {
+  position: "relative",
+  display: "inline-block",
+  height: "5.5rem",
+  overflow: "hidden"
+}, xt = {
+  display: "flex",
+  height: "100%",
+  willChange: "transform",
+  transition: "transform 0.3s ease"
+}, bt = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  whiteSpace: "nowrap",
+  fontSize: "5.5rem",
+  fontWeight: "900",
+  letterSpacing: "0.02em",
+  color: "#FFFFFF"
+}, wt = 0.4, _ = 0.5, Et = 0.2;
+function Lt(t, e) {
+  switch (t) {
+    case "circle":
+      return `circle(${e * 100}% at 50% 50%)`;
+    case "square":
+      return `inset(${(1 - e) * 50}% round ${10 * e}%)`;
+    case "triangle": {
+      const r = e * 100;
+      return `polygon(50% ${50 - r}%, ${50 - r}% ${50 + r}%, ${50 + r}% ${50 + r}%)`;
+    }
+  }
+}
+const At = (t) => t.reduce((e, r) => e + r, 0), Ot = (t = {}) => {
+  const {
+    background: e = gt,
+    texts: r = [],
+    shape: c = ft,
+    inSpring: s = ut,
+    outSpring: o = yt,
+    textStyle: l = {}
+  } = t;
+  return {
+    out: (n, i) => {
+      const d = n.style.opacity;
+      return {
+        spring: o,
+        from: 1,
+        to: 0,
+        prepare: (a) => {
+          b(a, i), a.style.opacity = "1";
+        },
+        tick: (a) => {
+          const h = Math.max(0, a - wt);
+          n.style.opacity = String(h);
+        },
+        onEnd: () => {
+          n.style.opacity = d;
+        }
+      };
+    },
+    in: (n) => {
+      let i = null, d = null, a = null;
+      const h = document.body.style.overflow, g = document.getElementById(
+        Y
+      );
+      let y = [];
+      const u = () => {
+        i = document.createElement("div"), i.id = Y, Object.assign(i.style, $t, { background: e }), document.body.appendChild(i), d = document.createElement("div"), Object.assign(d.style, mt), i.appendChild(d), a = document.createElement("div"), Object.assign(a.style, xt), d.appendChild(a), r.forEach((p) => {
+          const f = document.createElement("div");
+          f.textContent = p, Object.assign(f.style, bt, l), a.appendChild(f);
+        }), y = Array.from(a.children).map(
+          (p) => p.getBoundingClientRect().width
+        );
+      };
+      return {
+        spring: s,
+        from: 0,
+        to: 1,
+        prepare: () => {
+          document.body.style.overflow = "hidden", n.style.opacity = "1", g == null || g.remove(), u(), i && d && (i.style.clipPath = "none", d.style.transform = "scale(1)");
+        },
+        tick: (p) => {
+          if (!(!i || !d || !a)) {
+            if (p <= _ && r.length > 0) {
+              const f = p / _, $ = Math.min(
+                Math.floor(f * r.length),
+                r.length - 1
+              ), m = y[$] ?? 0, x = At(y.slice(0, $));
+              d.style.width = `${m}px`, a.style.transform = `translateX(-${x}px)`;
+            }
+            if (p > _) {
+              const $ = 1 - Math.max(
+                0,
+                Math.min(1, (p - _) / Et)
+              );
+              i.style.clipPath = Lt(c, $), d.style.transform = `scale(${$})`;
+            }
+          }
+        },
+        onEnd: () => {
+          i == null || i.remove(), i = d = a = null, document.body.style.overflow = h;
+        }
+      };
+    }
+  };
 };
 export {
-  rt as blind,
-  ot as drill,
-  lt as fade,
-  at as film,
-  dt as hero,
-  ct as jaemin,
-  ht as pinterest,
-  pt as scroll,
-  yt as slide
+  St as blind,
+  Ot as curtainReveal,
+  _t as drill,
+  Ct as fade,
+  kt as film,
+  Pt as hero,
+  Wt as jaemin,
+  It as pinterest,
+  Dt as scroll,
+  vt as slide,
+  Ft as strip
 };