@ssgoi/core 3.1.1 → 3.1.3

package/dist/view-transitions/index.js

@@ -1,19 +1,19 @@
-import { p as b, g as L } from "../jaemin-BWkrXq0V.js";
-import { a as Mt } from "../jaemin-BWkrXq0V.js";
-const O = (t) => new Promise((n) => setTimeout(n, t)), q = { stiffness: 80, damping: 25 }, G = { stiffness: 75, damping: 25 }, j = 300, K = 10, Z = "horizontal", J = "#000000", It = (t = {}) => {
+import { p as x, g as C } from "../jaemin-BWkrXq0V.js";
+import { a as Nt } from "../jaemin-BWkrXq0V.js";
+const Y = (t) => new Promise((n) => setTimeout(n, t)), q = { stiffness: 80, damping: 25 }, G = { stiffness: 75, damping: 25 }, j = 300, K = 10, Z = "horizontal", J = "#000000", It = (t = {}) => {
   const {
     inSpring: n = G,
-    outSpring: r = q,
-    transitionDelay: d = j,
-    blindCount: s = K,
-    direction: l = Z,
-    blindColor: c = J
+    outSpring: s = q,
+    transitionDelay: c = j,
+    blindCount: r = K,
+    direction: a = Z,
+    blindColor: l = J
   } = t;
-  let i, o = null;
-  const a = (e, g, y = "left") => {
+  let i, d = null;
+  const o = (e, h, p = "left") => {
     window.getComputedStyle(e).position === "static" && (e.style.position = "relative");
-    const p = document.createElement("div");
-    p.className = "blind-container", p.style.cssText = `
+    const g = document.createElement("div");
+    g.className = "blind-container", g.style.cssText = `
       position: absolute;
       top: 0;
       left: 0;
@@ -23,90 +23,90 @@ const O = (t) => new Promise((n) => setTimeout(n, t)), q = { stiffness: 80, damp
       z-index: 9999;
       overflow: hidden;
     `;
-    const h = [];
-    for (let f = 0; f < s; f++) {
+    const y = [];
+    for (let f = 0; f < r; f++) {
       const $ = document.createElement("div");
-      if (l === "horizontal") {
-        const w = 100 / s, x = `calc(${w}% + 1px)`;
+      if (a === "horizontal") {
+        const w = 100 / r, m = `calc(${w}% + 1px)`;
         $.style.cssText = `
           position: absolute;
           top: ${w * f}%;
           left: 0;
           width: 100%;
-          height: ${x};
-          background: ${c};
-          transform: scaleX(${g === "hidden" ? 0 : 1});
-          transform-origin: ${y} center;
+          height: ${m};
+          background: ${l};
+          transform: scaleX(${h === "hidden" ? 0 : 1});
+          transform-origin: ${p} center;
           will-change: transform;
         `;
       } else {
-        const w = 100 / s, x = `calc(${w}% + 1px)`;
+        const w = 100 / r, m = `calc(${w}% + 1px)`;
         $.style.cssText = `
           position: absolute;
           top: 0;
           left: ${w * f}%;
-          width: ${x};
+          width: ${m};
           height: 100%;
-          background: ${c};
-          transform: scaleY(${g === "hidden" ? 0 : 1});
-          transform-origin: ${y === "left" ? "top" : "bottom"} center;
+          background: ${l};
+          transform: scaleY(${h === "hidden" ? 0 : 1});
+          transform-origin: ${p === "left" ? "top" : "bottom"} center;
           will-change: transform;
         `;
       }
-      h.push($), p.appendChild($);
+      y.push($), g.appendChild($);
     }
-    return e.appendChild(p), { container: p, blinds: h };
+    return e.appendChild(g), { container: g, blinds: y };
   };
   return {
     out: () => {
       let e = null;
-      return i = new Promise((y) => {
-        o = y;
+      return i = new Promise((p) => {
+        d = p;
       }), {
-        springs: Array.from({ length: s }, (y, u) => ({
-          spring: r,
+        springs: Array.from({ length: r }, (p, u) => ({
+          spring: s,
           offset: 0.2,
-          tick: (p) => {
+          tick: (g) => {
             if (!e) return;
-            const h = e.blinds[u];
-            if (!h) return;
-            const f = 1 - p;
-            l === "horizontal" ? h.style.transform = `scaleX(${f})` : h.style.transform = `scaleY(${f})`;
+            const y = e.blinds[u];
+            if (!y) return;
+            const f = 1 - g;
+            a === "horizontal" ? y.style.transform = `scaleX(${f})` : y.style.transform = `scaleY(${f})`;
           }
         })),
         schedule: "stagger",
-        prepare: (y) => {
-          b(y), y.style.zIndex = "1000", e = a(y, "hidden", "left");
+        prepare: (p) => {
+          x(p), p.style.zIndex = "1000", e = o(p, "hidden", "left");
         },
         onStart: () => {
         },
         onEnd: () => {
-          o && o();
+          d && d();
         }
       };
     },
     in: () => {
       let e = null;
       return {
-        springs: Array.from({ length: s }, (y, u) => ({
+        springs: Array.from({ length: r }, (p, u) => ({
           spring: n,
           offset: 0.2,
-          tick: (p) => {
+          tick: (g) => {
             if (!e) return;
-            const h = e.blinds[u];
-            if (!h) return;
-            const f = 1 - p;
-            l === "horizontal" ? h.style.transform = `scaleX(${f})` : h.style.transform = `scaleY(${f})`;
+            const y = e.blinds[u];
+            if (!y) return;
+            const f = 1 - g;
+            a === "horizontal" ? y.style.transform = `scaleX(${f})` : y.style.transform = `scaleY(${f})`;
           }
         })),
         schedule: "stagger",
-        prepare: (y) => {
-          y.style.position = "relative", y.style.zIndex = "0", e = a(y, "closed", "right");
+        prepare: (p) => {
+          p.style.position = "relative", p.style.zIndex = "0", e = o(p, "closed", "right");
         },
         onStart: () => {
         },
         wait: async () => {
-          i && await i, await O(d);
+          i && await i, await Y(c);
         },
         onEnd: () => {
           e && e.container && e.container.remove();
@@ -120,104 +120,104 @@ const O = (t) => new Promise((n) => setTimeout(n, t)), q = { stiffness: 80, damp
 }, R = {
   stiffness: 100,
   damping: 20
-}, Dt = (t = {}) => {
-  var l, c;
-  const { opacity: n = !1, direction: r = "enter" } = t, d = r === "enter" ? Q : R, s = {
-    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? d.stiffness,
-    damping: ((c = t.spring) == null ? void 0 : c.damping) ?? d.damping
+}, Ot = (t = {}) => {
+  var a, l;
+  const { opacity: n = !1, direction: s = "enter" } = t, c = s === "enter" ? Q : R, r = {
+    stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ?? c.stiffness,
+    damping: ((l = t.spring) == null ? void 0 : l.damping) ?? c.damping
   };
-  return r === "enter" ? {
+  return s === "enter" ? {
     in: (i) => ({
-      spring: s,
+      spring: r,
       prepare: () => {
         i.style.willChange = n ? "transform, opacity" : "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint";
       },
-      css: (o) => {
-        const a = {
-          transform: `translate3d(${(1 - o) * 100}%, 0, 0)`
+      css: (d) => {
+        const o = {
+          transform: `translate3d(${(1 - d) * 100}%, 0, 0)`
         };
-        return n && (a.opacity = o), a;
+        return n && (o.opacity = d), o;
       },
       onEnd: () => {
         i.style.willChange = "auto", i.style.backfaceVisibility = "", i.style.contain = "";
       }
     }),
-    out: (i, o) => ({
-      spring: s,
-      prepare: (a) => {
-        b(a, o), a.style.zIndex = "-1", a.style.willChange = n ? "transform, opacity" : "transform", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint", a.style.pointerEvents = "none";
+    out: (i, d) => ({
+      spring: r,
+      prepare: (o) => {
+        x(o, d), o.style.zIndex = "-1", o.style.willChange = n ? "transform, opacity" : "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.pointerEvents = "none";
       },
-      css: (a) => {
+      css: (o) => {
         const e = {
-          transform: `translate3d(${-(1 - a) * 20}%, 0, 0)`
+          transform: `translate3d(${-(1 - o) * 20}%, 0, 0)`
         };
-        return n && (e.opacity = a), e;
+        return n && (e.opacity = o), e;
       }
     })
   } : {
     in: (i) => ({
-      spring: s,
+      spring: r,
       prepare: () => {
         i.style.willChange = n ? "transform, opacity" : "transform", i.style.backfaceVisibility = "hidden", i.style.contain = "layout paint";
       },
-      css: (o) => {
-        const a = {
-          transform: `translate3d(${-(1 - o) * 20}%, 0, 0)`
+      css: (d) => {
+        const o = {
+          transform: `translate3d(${-(1 - d) * 20}%, 0, 0)`
         };
-        return n && (a.opacity = o), a;
+        return n && (o.opacity = d), o;
       },
       onEnd: () => {
         i.style.willChange = "auto", i.style.backfaceVisibility = "", i.style.contain = "";
       }
     }),
-    out: (i, o) => ({
-      spring: s,
-      prepare: (a) => {
-        b(a, o), a.style.zIndex = "100", a.style.willChange = n ? "transform, opacity" : "transform", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint", a.style.pointerEvents = "none";
+    out: (i, d) => ({
+      spring: r,
+      prepare: (o) => {
+        x(o, d), o.style.zIndex = "100", o.style.willChange = n ? "transform, opacity" : "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.pointerEvents = "none";
       },
-      css: (a) => {
+      css: (o) => {
         const e = {
-          transform: `translate3d(${(1 - a) * 100}%, 0, 0)`
+          transform: `translate3d(${(1 - o) * 100}%, 0, 0)`
         };
-        return n && (e.opacity = a), e;
+        return n && (e.opacity = o), e;
       }
     })
   };
-}, tt = { stiffness: 65, damping: 16 }, nt = { stiffness: 65, damping: 14 }, et = 0, vt = (t = {}) => {
+}, tt = { stiffness: 65, damping: 16 }, nt = { stiffness: 65, damping: 14 }, et = 0, Dt = (t = {}) => {
   const {
     inSpring: n = nt,
-    outSpring: r = tt,
-    transitionDelay: d = et
+    outSpring: s = tt,
+    transitionDelay: c = et
   } = t;
-  let s, l = null;
+  let r, a = null;
   return {
-    in: (c) => ({
+    in: (l) => ({
       spring: n,
       prepare: () => {
-        c.style.willChange = "opacity";
+        l.style.willChange = "opacity";
       },
       wait: async () => {
-        s && (await s, await O(d));
+        r && (await r, await Y(c));
       },
       css: (i) => ({
         opacity: i
       }),
       onEnd: () => {
-        c.style.willChange = "auto";
+        l.style.willChange = "auto";
       }
     }),
-    out: (c, i) => (s = new Promise((o) => {
-      l = o;
+    out: (l, i) => (r = new Promise((d) => {
+      a = d;
     }), {
-      spring: r,
-      css: (o) => ({
-        opacity: o
+      spring: s,
+      css: (d) => ({
+        opacity: d
       }),
       prepare: () => {
-        b(c, i), c.style.willChange = "opacity";
+        x(l, i), l.style.willChange = "opacity";
       },
       onEnd: () => {
-        l && l(), c.style.willChange = "auto";
+        a && a(), l.style.willChange = "auto";
       }
     })
   };
@@ -226,7 +226,7 @@ const O = (t) => new Promise((n) => setTimeout(n, t)), q = { stiffness: 80, damp
   // Lower stiffness for smoother motion
   damping: 3.5
   // Lower damping for more fluid movement
-}, st = 0.8, rt = "white", m = {
+}, st = 0.8, at = "white", b = {
   start: 0,
   end: 0.45
 }, E = {
@@ -235,143 +235,143 @@ const O = (t) => new Promise((n) => setTimeout(n, t)), q = { stiffness: 80, damp
 }, A = {
   start: 0.2,
   end: 0.9
-}, Ft = (t) => {
-  var s;
-  const n = (t == null ? void 0 : t.spring) ?? it, r = (t == null ? void 0 : t.scale) ?? st, d = ((s = t == null ? void 0 : t.border) == null ? void 0 : s.color) ?? rt;
+}, vt = (t) => {
+  var r;
+  const n = (t == null ? void 0 : t.spring) ?? it, s = (t == null ? void 0 : t.scale) ?? st, c = ((r = t == null ? void 0 : t.border) == null ? void 0 : r.color) ?? at;
   return {
-    out: async (l, c) => {
-      const i = _(c), o = L(document.body, c.positionedParent), a = at(d, {
+    out: async (a, l) => {
+      const i = _(l), d = C(document.body, l.positionedParent), o = lt(c, {
         ...i,
-        top: o.top
+        top: d.top
       });
-      let e = 1, g = -i.top;
+      let e = 1, h = -i.top;
       return {
         spring: n,
         prepare: () => {
-          b(l), P(l, i), I(l, i), ot(l, i);
-          for (const y of a)
-            c.positionedParent.appendChild(y);
+          x(a), P(a, i), I(a, i), ot(a, i);
+          for (const p of o)
+            l.positionedParent.appendChild(p);
         },
         onEnd: () => {
-          l.style.clipPath = "", l.style.transformOrigin = "", setTimeout(() => {
-            for (const y of a)
-              c.positionedParent.removeChild(y);
+          a.style.clipPath = "", a.style.transformOrigin = "", setTimeout(() => {
+            for (const p of o)
+              l.positionedParent.removeChild(p);
           }, 1e3);
         },
-        tick: (y) => {
-          const u = 1 - y;
-          if (m.start <= u && u <= m.end) {
-            const f = C(
+        tick: (p) => {
+          const u = 1 - p;
+          if (b.start <= u && u <= b.end) {
+            const f = L(
               u,
-              m.start,
-              m.end
+              b.start,
+              b.end
             );
-            e = 1 - (1 - r) * f;
+            e = 1 - (1 - s) * f;
           }
           if (E.start <= u && u <= E.end) {
-            const f = C(
+            const f = L(
               u,
               E.start,
               E.end
             );
-            e = r + (1 - r) * f;
+            e = s + (1 - s) * f;
           }
           if (A.start <= u && u <= A.end) {
-            const f = C(
+            const f = L(
               u,
               A.start,
               A.end
             );
-            g = -i.top - i.height * f;
+            h = -i.top - i.height * f;
           }
-          l.style.transform = `translateY(${g}px) scale(${e})`;
-          const p = (i.width - i.width * e) / 2, h = (i.height - i.height * e) / 2;
-          lt(a, p, h);
+          a.style.transform = `translateY(${h}px) scale(${e})`;
+          const g = (i.width - i.width * e) / 2, y = (i.height - i.height * e) / 2;
+          rt(o, g, y);
         }
       };
     },
-    in: async (l, c) => {
-      const i = _(c);
-      let o = r, a = -i.top + i.height;
+    in: async (a, l) => {
+      const i = _(l);
+      let d = s, o = -i.top + i.height;
       return {
         spring: n,
         prepare: () => {
-          P(l, i), I(l, i), l.style.transform = `translateY(${-i.top + i.height}px) scale(${r})`;
+          P(a, i), I(a, i), a.style.transform = `translateY(${-i.top + i.height}px) scale(${s})`;
         },
         onEnd: () => {
-          l.style.clipPath = "", l.style.transformOrigin = "", l.style.transform = "";
+          a.style.clipPath = "", a.style.transformOrigin = "", a.style.transform = "";
         },
         tick: (e) => {
-          if (m.start <= e && e <= m.end) {
-            const g = C(
+          if (b.start <= e && e <= b.end) {
+            const h = L(
               e,
-              m.start,
-              m.end
+              b.start,
+              b.end
             );
-            o = 1 - (1 - r) * g;
+            d = 1 - (1 - s) * h;
           }
           if (E.start <= e && e <= E.end) {
-            const g = C(
+            const h = L(
               e,
               E.start,
               E.end
             );
-            o = r + (1 - r) * g;
+            d = s + (1 - s) * h;
           }
           if (A.start <= e && e <= A.end) {
-            const g = C(
+            const h = L(
               e,
               A.start,
               A.end
             );
-            a = -i.top + i.height * (1 - g);
+            o = -i.top + i.height * (1 - h);
           }
-          l.style.transform = `translateY(${a}px) scale(${o})`;
+          a.style.transform = `translateY(${o}px) scale(${d})`;
         }
       };
     }
   };
 };
-function lt(t, n, r) {
-  const d = n * 0.7, s = r * 0.7;
-  t.topLeft.style.transform = `translate(${d}px, ${s}px)`, t.topRight.style.transform = `translate(${-d}px, ${s}px)`, t.bottomLeft.style.transform = `translate(${d}px, ${-s}px)`, t.bottomRight.style.transform = `translate(${-d}px, ${-s}px)`;
+function rt(t, n, s) {
+  const c = n * 0.7, r = s * 0.7;
+  t.topLeft.style.transform = `translate(${c}px, ${r}px)`, t.topRight.style.transform = `translate(${-c}px, ${r}px)`, t.bottomLeft.style.transform = `translate(${c}px, ${-r}px)`, t.bottomRight.style.transform = `translate(${-c}px, ${-r}px)`;
 }
-function at(t = "white", n) {
-  const s = document.createElement("div");
-  s.style.position = "fixed", s.style.pointerEvents = "none", s.style.zIndex = "9999", s.style.top = `${n.top - 1}px`, s.style.left = `${n.left - 1}px`, s.style.width = "15px", s.style.height = "15px";
+function lt(t = "white", n) {
+  const r = document.createElement("div");
+  r.style.position = "fixed", r.style.pointerEvents = "none", r.style.zIndex = "9999", r.style.top = `${n.top - 1}px`, r.style.left = `${n.left - 1}px`, r.style.width = "15px", r.style.height = "15px";
+  const a = document.createElement("div");
+  a.style.position = "absolute", a.style.width = "15px", a.style.height = "1px", a.style.backgroundColor = t, a.style.top = "0", a.style.left = "0";
   const l = document.createElement("div");
-  l.style.position = "absolute", l.style.width = "15px", l.style.height = "1px", l.style.backgroundColor = t, l.style.top = "0", l.style.left = "0";
-  const c = document.createElement("div");
-  c.style.position = "absolute", c.style.width = "1px", c.style.height = "15px", c.style.backgroundColor = t, c.style.top = "0", c.style.left = "0", s.appendChild(l), s.appendChild(c);
+  l.style.position = "absolute", l.style.width = "1px", l.style.height = "15px", l.style.backgroundColor = t, l.style.top = "0", l.style.left = "0", r.appendChild(a), r.appendChild(l);
   const i = document.createElement("div");
   i.style.position = "fixed", i.style.pointerEvents = "none", i.style.zIndex = "9999", i.style.top = `${n.top - 1}px`, i.style.left = `${n.left + n.width - 15 + 1}px`, i.style.width = "15px", i.style.height = "15px";
+  const d = document.createElement("div");
+  d.style.position = "absolute", d.style.width = "15px", d.style.height = "1px", d.style.backgroundColor = t, d.style.top = "0", d.style.right = "0";
   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.right = "0";
-  const a = document.createElement("div");
-  a.style.position = "absolute", a.style.width = "1px", a.style.height = "15px", a.style.backgroundColor = t, a.style.top = "0", a.style.right = "0", i.appendChild(o), i.appendChild(a);
+  o.style.position = "absolute", o.style.width = "1px", o.style.height = "15px", o.style.backgroundColor = t, o.style.top = "0", o.style.right = "0", i.appendChild(d), i.appendChild(o);
   const e = document.createElement("div");
   e.style.position = "fixed", e.style.pointerEvents = "none", e.style.zIndex = "9999", e.style.top = `${n.top + n.height - 15 + 1}px`, e.style.left = `${n.left - 1}px`, e.style.width = "15px", e.style.height = "15px";
-  const g = document.createElement("div");
-  g.style.position = "absolute", g.style.width = "15px", g.style.height = "1px", g.style.backgroundColor = t, g.style.bottom = "0", g.style.left = "0";
-  const y = document.createElement("div");
-  y.style.position = "absolute", y.style.width = "1px", y.style.height = "15px", y.style.backgroundColor = t, y.style.bottom = "0", y.style.left = "0", e.appendChild(g), e.appendChild(y);
+  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 p = document.createElement("div");
+  p.style.position = "absolute", p.style.width = "1px", p.style.height = "15px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.left = "0", e.appendChild(h), e.appendChild(p);
   const u = document.createElement("div");
   u.style.position = "fixed", u.style.pointerEvents = "none", u.style.zIndex = "9999", u.style.top = `${n.top + n.height - 15 + 1}px`, u.style.left = `${n.left + n.width - 15 + 1}px`, u.style.width = "15px", u.style.height = "15px";
-  const p = document.createElement("div");
-  p.style.position = "absolute", p.style.width = "15px", p.style.height = "1px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.right = "0";
-  const h = document.createElement("div");
-  return h.style.position = "absolute", h.style.width = "1px", h.style.height = "15px", h.style.backgroundColor = t, h.style.bottom = "0", h.style.right = "0", u.appendChild(p), u.appendChild(h), {
-    topLeft: s,
+  const g = document.createElement("div");
+  g.style.position = "absolute", g.style.width = "15px", g.style.height = "1px", 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 = "1px", y.style.height = "15px", y.style.backgroundColor = t, y.style.bottom = "0", y.style.right = "0", u.appendChild(g), u.appendChild(y), {
+    topLeft: r,
     topRight: i,
     bottomLeft: e,
     bottomRight: u,
     *[Symbol.iterator]() {
-      yield s, yield i, yield e, yield u;
+      yield r, yield i, yield e, yield u;
     }
   };
 }
 function _(t) {
-  const n = L(document.body, t.positionedParent);
+  const n = C(document.body, t.positionedParent);
   return {
     top: t.scroll.y,
     left: 0,
@@ -380,8 +380,8 @@ function _(t) {
   };
 }
 function P(t, n) {
-  const r = n.left + n.width / 2, d = n.top + n.height / 2;
-  t.style.transformOrigin = `${r}px ${d}px`;
+  const s = n.left + n.width / 2, c = n.top + n.height / 2;
+  t.style.transformOrigin = `${s}px ${c}px`;
 }
 function I(t, n) {
   t.style.clipPath = `polygon(
@@ -394,490 +394,527 @@ function I(t, n) {
 function ot(t, n) {
   t.style.transform = `translateY(${-n.top}px)`;
 }
-function C(t, n, r) {
-  return t <= n ? 0 : t >= r ? 1 : (t - n) / (r - n);
+function L(t, n, s) {
+  return t <= n ? 0 : t >= s ? 1 : (t - n) / (s - n);
 }
-function ct(t, n) {
+function dt(t, n) {
   return t.querySelector(`[data-hero-key="${n}"]`);
 }
-const Yt = (t = {}) => {
-  var c, i;
+const Ft = (t = {}) => {
+  var l, i;
   const n = {
-    stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? 300,
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 300,
     damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 30
-  }, r = t.timeout ?? 300, d = t.maxDistance ?? 700;
-  let s = null, l = null;
+  }, s = t.timeout ?? 300, c = t.maxDistance ?? 700;
+  let r = null, a = null;
   return {
-    in: async (o, a) => {
-      const e = o, g = Array.from(e.querySelectorAll("[data-hero-key]"));
-      if (g.length === 0)
+    in: async (d, o) => {
+      const e = d, h = Array.from(e.querySelectorAll("[data-hero-key]"));
+      if (h.length === 0)
         return {
           spring: n,
           tick: () => {
           }
           // No hero elements, skip animation
         };
-      if (!await new Promise((p) => {
-        s ? p(!0) : (l = p, setTimeout(() => {
-          l = null, p(!1);
-        }, r));
-      }) || !s)
-        return s = null, {
+      if (!await new Promise((g) => {
+        r ? g(!0) : (a = g, setTimeout(() => {
+          a = null, g(!1);
+        }, s));
+      }) || !r)
+        return r = null, {
           spring: n,
           tick: () => {
           }
           // No fromNode, skip animation
         };
-      const u = g.map((p) => {
-        const h = p.getAttribute("data-hero-key");
-        if (!h) return null;
-        const f = ct(s, h);
+      const u = h.map((g) => {
+        const y = g.getAttribute("data-hero-key");
+        if (!y) return null;
+        const f = dt(r, y);
         if (!f) return null;
-        const $ = p, w = L(s, f), x = L(e, $), U = w.left - x.left - a.scrollOffset.x, V = w.top - x.top - a.scrollOffset.y, W = w.width / x.width, H = w.height / x.height, B = $.style.transform, z = $.style.position, X = $.style.transformOrigin, M = $.style.zIndex, N = $.style.willChange;
+        const $ = g, w = C(r, f), m = C(e, $), U = w.left - m.left - o.scrollOffset.x, V = w.top - m.top - o.scrollOffset.y, W = w.width / m.width, z = w.height / m.height, X = $.style.transform, M = $.style.position, B = $.style.transformOrigin, N = $.style.zIndex, H = $.style.willChange;
         return {
           toEl: $,
           dx: U,
           dy: V,
           dw: W,
-          dh: H,
-          originalTransform: B,
-          originalPosition: z,
-          originalTransformOrigin: X,
-          originalZIndex: M,
-          originalWillChange: N
+          dh: z,
+          originalTransform: X,
+          originalPosition: M,
+          originalTransformOrigin: B,
+          originalZIndex: N,
+          originalWillChange: H
         };
       }).filter(
-        (p) => p !== null && Math.abs(p.dy) <= d
+        (g) => g !== null && Math.abs(g.dy) <= c
       );
-      return s = null, u.length === 0 ? {
+      return r = null, u.length === 0 ? {
         spring: n,
         tick: () => {
         }
         // No matching hero elements
       } : {
-        spring: n,
+        springs: u.map(({ toEl: g, dx: y, dy: f, dw: $, dh: w }) => ({
+          spring: n,
+          tick: (m) => {
+            g.style.transform = `translate(${(1 - m) * y}px, ${(1 - m) * f}px) scale(${m + (1 - m) * $}, ${m + (1 - m) * w})`;
+          }
+        })),
+        schedule: "parallel",
         prepare: () => {
-          u.forEach(({ toEl: p }) => {
-            p.style.position = "relative", p.style.transformOrigin = "top left", p.style.zIndex = "1000", p.style.willChange = "transform";
-          });
-        },
-        tick: (p) => {
-          u.forEach(({ toEl: h, dx: f, dy: $, dw: w, dh: x }) => {
-            h.style.transform = `translate(${(1 - p) * f}px,${(1 - p) * $}px) scale(${p + (1 - p) * w}, ${p + (1 - p) * x})`;
+          u.forEach(({ toEl: g }) => {
+            g.style.position = "relative", g.style.transformOrigin = "top left", g.style.zIndex = "1000", g.style.willChange = "transform";
           });
         },
         onEnd: () => {
           u.forEach(
             ({
-              toEl: p,
-              originalTransform: h,
+              toEl: g,
+              originalTransform: y,
               originalPosition: f,
               originalTransformOrigin: $,
               originalZIndex: w,
-              originalWillChange: x
+              originalWillChange: m
             }) => {
-              p.style.transform = h, p.style.position = f, p.style.transformOrigin = $, p.style.zIndex = w, p.style.willChange = x;
+              g.style.transform = y, g.style.position = f, g.style.transformOrigin = $, g.style.zIndex = w, g.style.willChange = m;
             }
           );
         }
       };
     },
-    out: async (o) => ({
+    out: async (d) => ({
+      spring: n,
       onStart: () => {
-        s = o, l && (l(!0), l = null);
+        r = d, a && (a(!0), a = null);
       },
       tick: () => {
       },
-      prepare: (a) => {
-        b(a), a.style.opacity = "0";
+      prepare: (o) => {
+        x(o), o.style.opacity = "0";
       }
     })
   };
 };
-function dt({
+function ct({
   detailRect: t,
   galleryRect: n,
-  pageRect: r,
-  scrollOffset: d
-}, s) {
-  const l = n.left - t.left + (n.width - t.width) / 2 - d.x, c = n.top - t.top + (n.height - t.height) / 2 - d.y, i = n.width / t.width, o = n.height / t.height, a = Math.max(i, o), e = t.top / r.height * 100, g = (r.width - (t.left + t.width)) / r.width * 100, y = (r.height - (t.top + t.height)) / r.height * 100, u = t.left / r.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (p) => {
-    const h = 1 - p, f = e * h, $ = g * h, w = y * h, x = u * h;
-    s.style.clipPath = `inset(${f}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${l * h}px, ${c * h}px) scale(${1 + (a - 1) * h})`;
+  pageRect: s,
+  scrollOffset: c
+}) {
+  const r = n.left - t.left + (n.width - t.width) / 2 - c.x, a = n.top - t.top + (n.height - t.height) / 2 - c.y, l = n.width / t.width, i = n.height / t.height, d = Math.max(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, h = (s.height - (t.top + t.height)) / s.height * 100, p = t.left / s.width * 100;
+  return {
+    transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
+    animate: (g) => {
+      const y = 1 - g;
+      return {
+        clipPath: `inset(${o * y}% ${e * y}% ${h * y}% ${p * y}%)`,
+        transform: `translate(${r * y}px, ${a * y}px) scale(${1 + (d - 1) * y})`
+      };
+    }
   };
 }
 function ht({
   detailRect: t,
   galleryRect: n,
-  pageRect: r,
-  scrollOffset: d
-}, s) {
-  const l = n.left - t.left + (n.width - t.width) / 2 + d.x, c = n.top - t.top + (n.height - t.height) / 2 + d.y, i = n.width / t.width, o = n.height / t.height, a = Math.min(i, o), e = t.top / r.height * 100, g = (r.width - (t.left + t.width)) / r.width * 100, y = (r.height - (t.top + t.height)) / r.height * 100, u = t.left / r.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (p) => {
-    const h = 1 - p, f = e * h, $ = g * h, w = y * h, x = u * h;
-    s.style.clipPath = `inset(${f}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${l * h - d.x}px, ${c * h - d.y}px) scale(${1 + (a - 1) * h})`;
+  pageRect: s,
+  scrollOffset: c
+}) {
+  const r = n.left - t.left + (n.width - t.width) / 2 + c.x, a = n.top - t.top + (n.height - t.height) / 2 + c.y, l = n.width / t.width, i = n.height / t.height, d = Math.min(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, h = (s.height - (t.top + t.height)) / s.height * 100, p = t.left / s.width * 100;
+  return {
+    transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
+    animate: (g) => {
+      const y = 1 - g;
+      return {
+        clipPath: `inset(${o * y}% ${e * y}% ${h * y}% ${p * y}%)`,
+        transform: `translate(${r * y - c.x}px, ${a * y - c.y}px) scale(${1 + (d - 1) * y})`
+      };
+    }
   };
 }
-function yt(t, n, r) {
-  const d = t.querySelector(
+function yt(t, n, s) {
+  const c = t.querySelector(
     "[data-instagram-detail-key]"
-  ), s = n.querySelector(
+  ), r = n.querySelector(
     "[data-instagram-detail-key]"
   );
   if (t.querySelectorAll("[data-instagram-detail-key]").length > 1 || n.querySelectorAll("[data-instagram-detail-key]").length > 1)
     return null;
-  let l = null, c = null, i = !1;
-  if (!d && s) {
-    c = s;
-    const e = c.getAttribute("data-instagram-detail-key");
+  let a = null, l = null, i = !1;
+  if (!c && r) {
+    l = r;
+    const e = l.getAttribute("data-instagram-detail-key");
     if (!e) return null;
-    l = t.querySelector(
+    a = t.querySelector(
       `[data-instagram-gallery-key="${e}"]`
-    ), l && (i = !0);
-  } else if (d && !s) {
-    c = d;
-    const e = c.getAttribute("data-instagram-detail-key");
+    ), a && (i = !0);
+  } else if (c && !r) {
+    l = c;
+    const e = l.getAttribute("data-instagram-detail-key");
     if (!e) return null;
-    l = n.querySelector(
+    a = n.querySelector(
       `[data-instagram-gallery-key="${e}"]`
-    ), l && (i = !1);
+    ), a && (i = !1);
   }
-  if (!l || !c)
+  if (!a || !l)
     return null;
-  const o = L(i ? t : n, l), a = L(i ? n : t, c);
-  return i ? {
-    isEnterMode: !0,
-    inAnimation: dt(
-      {
-        detailRect: a,
-        galleryRect: o,
-        pageRect: n.getBoundingClientRect(),
-        scrollOffset: r
-      },
-      n
-    )
-    // No outAnimation - gallery stays visible
-  } : {
-    isEnterMode: !1,
-    outAnimation: ht(
-      {
-        detailRect: a,
-        galleryRect: o,
-        pageRect: t.getBoundingClientRect(),
-        scrollOffset: r
-      },
-      t
-    )
-    // No inAnimation - gallery stays visible
-  };
+  const d = C(i ? t : n, a), o = C(i ? n : t, l);
+  if (i) {
+    const e = ct({
+      detailRect: o,
+      galleryRect: d,
+      pageRect: n.getBoundingClientRect(),
+      scrollOffset: s
+    });
+    return n.style.transformOrigin = e.transformOrigin, {
+      isEnterMode: !0,
+      inAnimation: e.animate
+      // No outAnimation - gallery stays visible
+    };
+  } else {
+    const e = ht({
+      detailRect: o,
+      galleryRect: d,
+      pageRect: t.getBoundingClientRect(),
+      scrollOffset: s
+    });
+    return t.style.transformOrigin = e.transformOrigin, {
+      isEnterMode: !1,
+      outAnimation: e.animate
+      // No inAnimation - gallery stays visible
+    };
+  }
 }
-const Ot = (t = {}) => {
-  var c, i;
+const Yt = (t = {}) => {
+  var i, d;
   const n = {
-    stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? 150,
-    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 20
-  }, r = t.timeout ?? 300;
-  let d = null, s = null, l = null;
+    stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 150,
+    damping: ((d = t.spring) == null ? void 0 : d.damping) ?? 20
+  }, s = t.timeout ?? 300;
+  let c = null, r = null, a = null, l = null;
   return {
-    in: async (o, { scrollOffset: a }) => {
-      const e = o;
-      return !await new Promise((y) => {
-        d ? y(!0) : (s = y, setTimeout(() => {
-          s = null, y(!1);
-        }, r));
-      }) || !d ? (d = null, {
+    in: async (o, { scrollOffset: e }) => {
+      const h = o;
+      return !await new Promise((u) => {
+        c ? u(!0) : (r = u, setTimeout(() => {
+          r = null, u(!1);
+        }, s));
+      }) || !c ? (l == null || l(), l = null, c = null, {
         spring: n,
-        tick: () => {
-        }
-      }) : (l = yt(d, e, a), l ? (d = null, {
+        css: () => ({})
+      }) : (a = yt(c, h, e), l == null || l(), l = null, a ? (c = null, {
         spring: n,
-        tick: (y) => {
-          l != null && l.inAnimation && l.inAnimation(y);
-        }
-      }) : {
+        css: (u) => a != null && a.inAnimation ? a.inAnimation(u) : {}
+      }) : (c = null, {
         spring: n,
-        tick: () => {
-        }
-      });
+        css: () => ({})
+      }));
     },
-    out: async (o) => ({
-      spring: n,
-      onStart: () => {
-        d = o, s && (s(!0), s = null);
-      },
-      prepare: (a) => {
-        b(a), l != null && l.isEnterMode || (a.style.zIndex = "-1");
-      },
-      tick: (a) => {
-        l != null && l.outAnimation && l.outAnimation(a);
-      }
-    })
+    out: async (o) => {
+      const e = new Promise((h) => {
+        l = h;
+      });
+      return {
+        spring: n,
+        prepare: (h) => {
+          x(h), a != null && a.isEnterMode || (h.style.zIndex = "-1");
+        },
+        wait: async () => {
+          c = o, r && (r(!0), r = null), await e;
+        },
+        css: (h) => a != null && a.outAnimation ? a.outAnimation(h) : {}
+      };
+    }
   };
 };
 function pt({
   detailRect: t,
   galleryRect: n,
-  pageRect: r,
-  scrollOffset: d
-}, s) {
-  const l = n.left - t.left + (n.width - t.width) / 2 - d.x, c = n.top - t.top + (n.height - t.height) / 2 - d.y, i = n.width / t.width, o = n.height / t.height, a = Math.max(i, o), e = t.top / r.height * 100, g = (r.width - (t.left + t.width)) / r.width * 100, y = (r.height - (t.top + t.height)) / r.height * 100, u = t.left / r.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (p) => {
-    const h = 1 - p, f = e * h, $ = g * h, w = y * h, x = u * h;
-    s.style.clipPath = `inset(${f}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${l * h}px, ${c * h}px) scale(${1 + (a - 1) * h})`;
+  pageRect: s,
+  scrollOffset: c
+}) {
+  const r = n.left - t.left + (n.width - t.width) / 2 - c.x, a = n.top - t.top + (n.height - t.height) / 2 - c.y, l = n.width / t.width, i = n.height / t.height, d = Math.max(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, h = (s.height - (t.top + t.height)) / s.height * 100, p = t.left / s.width * 100;
+  return {
+    transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
+    animate: (g) => {
+      const y = 1 - g;
+      return {
+        clipPath: `inset(${o * y}% ${e * y}% ${h * y}% ${p * y}%)`,
+        transform: `translate(${r * y}px, ${a * y}px) scale(${1 + (d - 1) * y})`
+      };
+    }
   };
 }
 function ut({
   galleryRect: t,
   detailRect: n,
-  scrollOffset: r
-}, d) {
-  const s = n.left - t.left + (n.width - t.width) / 2 + r.x, l = n.top - t.top + (n.height - t.height) / 2 + r.y, c = n.width / t.width, i = n.height / t.height, o = Math.max(c, i);
-  return (a) => {
-    d.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
-    const e = 1 - a;
-    d.style.transform = `translate(${s * e - r.x}px, ${l * e - r.y}px) scale(${1 + (o - 1) * e})`, d.style.opacity = `${1 - e}`;
+  scrollOffset: s
+}) {
+  const c = n.left - t.left + (n.width - t.width) / 2 + s.x, r = n.top - t.top + (n.height - t.height) / 2 + s.y, a = n.width / t.width, l = n.height / t.height, i = Math.max(a, l);
+  return {
+    transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
+    animate: (o) => {
+      const e = 1 - o;
+      return {
+        transform: `translate(${c * e - s.x}px, ${r * e - s.y}px) scale(${1 + (i - 1) * e})`,
+        opacity: `${1 - e}`
+      };
+    }
   };
 }
 function gt({
   galleryRect: t,
   detailRect: n,
-  scrollOffset: r
-}, d) {
-  const s = n.left - t.left + (n.width - t.width) / 2 - r.x, l = n.top - t.top + (n.height - t.height) / 2 - r.y, c = n.width / t.width, i = n.height / t.height, o = Math.max(c, i);
-  return (a) => {
-    const e = 1 - a, g = a;
-    d.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, d.style.transform = `translate(${s * e}px, ${l * e}px) scale(${1 + (o - 1) * e})`, d.style.opacity = `${g}`;
+  scrollOffset: s
+}) {
+  const c = n.left - t.left + (n.width - t.width) / 2 - s.x, r = n.top - t.top + (n.height - t.height) / 2 - s.y, a = n.width / t.width, l = n.height / t.height, i = Math.max(a, l);
+  return {
+    transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
+    animate: (o) => {
+      const e = 1 - o, h = o;
+      return {
+        transform: `translate(${c * e}px, ${r * e}px) scale(${1 + (i - 1) * e})`,
+        opacity: `${h}`
+      };
+    }
   };
 }
 function ft({
   detailRect: t,
   galleryRect: n,
-  pageRect: r,
-  scrollOffset: d
-}, s) {
-  const l = n.left - t.left + (n.width - t.width) / 2 + d.x, c = n.top - t.top + (n.height - t.height) / 2 + d.y, i = n.width / t.width, o = n.height / t.height, a = Math.min(i, o), e = t.top / r.height * 100, g = (r.width - (t.left + t.width)) / r.width * 100, y = (r.height - (t.top + t.height)) / r.height * 100, u = t.left / r.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (p) => {
-    const h = 1 - p, f = e * h, $ = g * h, w = y * h, x = u * h;
-    s.style.clipPath = `inset(${f}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${l * h - d.x}px, ${c * h - d.y}px) scale(${1 + (a - 1) * h})`;
+  pageRect: s,
+  scrollOffset: c
+}) {
+  const r = n.left - t.left + (n.width - t.width) / 2 + c.x, a = n.top - t.top + (n.height - t.height) / 2 + c.y, l = n.width / t.width, i = n.height / t.height, d = Math.min(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, h = (s.height - (t.top + t.height)) / s.height * 100, p = t.left / s.width * 100;
+  return {
+    transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
+    animate: (g) => {
+      const y = 1 - g;
+      return {
+        clipPath: `inset(${o * y}% ${e * y}% ${h * y}% ${p * y}%)`,
+        transform: `translate(${r * y - c.x}px, ${a * y - c.y}px) scale(${1 + (d - 1) * y})`
+      };
+    }
   };
 }
-function $t(t, n, r) {
-  const d = t.querySelector(
+function $t(t, n, s) {
+  const c = t.querySelector(
     "[data-pinterest-detail-key]"
-  ), s = n.querySelector(
+  ), r = n.querySelector(
     "[data-pinterest-detail-key]"
   );
   if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
     return null;
-  let l = null, c = null, i = !1;
-  if (!d && s) {
-    c = s;
-    const e = c.getAttribute("data-pinterest-detail-key");
+  let a = null, l = null, i = !1;
+  if (!c && r) {
+    l = r;
+    const e = l.getAttribute("data-pinterest-detail-key");
     if (!e) return null;
-    l = t.querySelector(
+    a = t.querySelector(
       `[data-pinterest-gallery-key="${e}"]`
-    ), l && (i = !0);
-  } else if (d && !s) {
-    c = d;
-    const e = c.getAttribute("data-pinterest-detail-key");
+    ), a && (i = !0);
+  } else if (c && !r) {
+    l = c;
+    const e = l.getAttribute("data-pinterest-detail-key");
     if (!e) return null;
-    l = n.querySelector(
+    a = n.querySelector(
       `[data-pinterest-gallery-key="${e}"]`
-    ), l && (i = !1);
+    ), a && (i = !1);
   }
-  if (!l || !c)
+  if (!a || !l)
     return null;
-  const o = L(i ? t : n, l), a = L(i ? n : t, c);
-  return i ? {
-    inAnimation: pt(
-      {
-        detailRect: a,
-        galleryRect: o,
-        pageRect: n.getBoundingClientRect(),
-        scrollOffset: r
-      },
-      n
-    ),
-    outAnimation: ut(
-      { galleryRect: o, detailRect: a, scrollOffset: r },
-      t
-    )
-  } : {
-    inAnimation: gt(
-      { galleryRect: o, detailRect: a, scrollOffset: r },
-      n
-    ),
-    outAnimation: ft(
-      {
-        detailRect: a,
-        galleryRect: o,
-        pageRect: t.getBoundingClientRect(),
-        scrollOffset: r
-      },
-      t
-    )
-  };
+  const d = C(i ? t : n, a), o = C(i ? n : t, l);
+  if (i) {
+    const e = pt({
+      detailRect: o,
+      galleryRect: d,
+      pageRect: n.getBoundingClientRect(),
+      scrollOffset: s
+    }), h = ut({
+      galleryRect: d,
+      detailRect: o,
+      scrollOffset: s
+    });
+    return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin = h.transformOrigin, {
+      inAnimation: e.animate,
+      outAnimation: h.animate
+    };
+  } else {
+    const e = gt({
+      galleryRect: d,
+      detailRect: o,
+      scrollOffset: s
+    }), h = ft({
+      detailRect: o,
+      galleryRect: d,
+      pageRect: t.getBoundingClientRect(),
+      scrollOffset: s
+    });
+    return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin = h.transformOrigin, {
+      inAnimation: e.animate,
+      outAnimation: h.animate
+    };
+  }
 }
 const Ut = (t = {}) => {
-  var c, i;
+  var i, d;
   const n = {
-    stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? 30,
-    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 10
-  }, r = t.timeout ?? 300;
-  let d = null, s = null, l = null;
+    stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 30,
+    damping: ((d = t.spring) == null ? void 0 : d.damping) ?? 10
+  }, s = t.timeout ?? 300;
+  let c = null, r = null, a = null, l = null;
   return {
-    in: async (o, { scrollOffset: a }) => {
-      const e = o;
-      return !await new Promise((y) => {
-        d ? y(!0) : (s = y, setTimeout(() => {
-          s = null, y(!1);
-        }, r));
-      }) || !d ? (d = null, {
+    in: async (o, { scrollOffset: e }) => {
+      const h = o;
+      return !await new Promise((u) => {
+        c ? u(!0) : (r = u, setTimeout(() => {
+          r = null, u(!1);
+        }, s));
+      }) || !c ? (l == null || l(), l = null, c = null, {
         spring: n,
-        tick: () => {
-        }
-      }) : (l = $t(d, e, a), l ? (d = null, {
+        css: () => ({})
+      }) : (a = $t(c, h, e), l == null || l(), l = null, a ? (c = null, {
         spring: n,
-        tick: (y) => {
-          l && l.inAnimation(y);
-        }
-      }) : {
+        css: (u) => a ? a.inAnimation(u) : {}
+      }) : (c = null, {
         spring: n,
-        tick: () => {
-        }
-      });
+        css: () => ({})
+      }));
     },
-    out: async (o) => ({
-      spring: n,
-      onStart: () => {
-        d = o, s && (s(!0), s = null);
-      },
-      prepare: (a) => {
-        b(a), a.style.zIndex = "-1";
-      },
-      tick: (a) => {
-        l && l.outAnimation(a);
-      }
-    })
+    out: async (o) => {
+      const e = new Promise((h) => {
+        l = h;
+      });
+      return {
+        spring: n,
+        prepare: (h) => {
+          x(h), h.style.zIndex = "-1";
+        },
+        wait: async () => {
+          c = o, r && (r(!0), r = null), await e;
+        },
+        css: (h) => a ? a.outAnimation(h) : {}
+      };
+    }
   };
-}, D = {
+}, O = {
   stiffness: 5,
   damping: 4
 }, Vt = (t = {}) => {
-  var o, a;
-  const n = t.direction ?? "up", r = {
-    stiffness: ((o = t.spring) == null ? void 0 : o.stiffness) ?? D.stiffness,
-    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? D.damping
-  }, d = n === "up";
-  let s = null, l = null, c = null;
+  var d, o;
+  const n = t.direction ?? "up", s = {
+    stiffness: ((d = t.spring) == null ? void 0 : d.stiffness) ?? O.stiffness,
+    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? O.damping
+  }, c = n === "up";
+  let r = null, a = null, l = null;
   const i = () => {
-    if (s === null || l === null)
+    if (r === null || a === null)
       return null;
-    const e = Math.min(s, l), g = window.innerHeight;
-    return Math.max(e, g);
+    const e = Math.min(r, a), h = window.innerHeight;
+    return Math.max(e, h);
   };
   return {
-    in: (e) => (l = e.offsetHeight, s !== null && (c = i()), {
-      spring: r,
+    in: (e) => (a = e.offsetHeight, r !== null && (l = i()), {
+      spring: s,
       prepare: () => {
         e.style.willChange = "transform", e.style.backfaceVisibility = "hidden", e.style.contain = "layout paint";
       },
-      tick: (g) => {
-        c === null && (c = i());
-        const y = c ?? window.innerHeight, u = d ? (1 - g) * y : (1 - g) * -y;
+      tick: (h) => {
+        l === null && (l = i());
+        const p = l ?? window.innerHeight, u = c ? (1 - h) * p : (1 - h) * -p;
         e.style.transform = `translate3d(0, ${u}px, 0)`;
       },
       onEnd: () => {
         e.style.willChange = "auto", e.style.backfaceVisibility = "", e.style.contain = "";
       }
     }),
-    out: (e, g) => ({
-      spring: r,
+    out: (e, h) => ({
+      spring: s,
       onStart: () => {
-        s = e.offsetHeight, l !== null && (c = i());
+        r = e.offsetHeight, a !== null && (l = i());
       },
-      tick: (y) => {
-        c === null && (c = i());
-        const u = c ?? window.innerHeight, p = d ? (1 - y) * -u : (1 - y) * u;
-        e.style.transform = `translate3d(0, ${p}px, 0)`;
+      tick: (p) => {
+        l === null && (l = i());
+        const u = l ?? window.innerHeight, g = c ? (1 - p) * -u : (1 - p) * u;
+        e.style.transform = `translate3d(0, ${g}px, 0)`;
       },
-      prepare: (y) => {
-        b(y, g), y.style.zIndex = d ? "-1" : "1", y.style.willChange = "transform", y.style.backfaceVisibility = "hidden", y.style.contain = "layout paint", y.style.pointerEvents = "none";
+      prepare: (p) => {
+        x(p, h), p.style.zIndex = c ? "-1" : "1", p.style.willChange = "transform", p.style.backfaceVisibility = "hidden", p.style.contain = "layout paint", p.style.pointerEvents = "none";
       }
     })
   };
-}, v = {
+}, D = {
   stiffness: 15,
   damping: 7
 }, Wt = (t = {}) => {
-  var s, l;
-  const n = t.direction ?? "left", r = {
-    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? v.stiffness,
-    damping: ((l = t.spring) == null ? void 0 : l.damping) ?? v.damping
-  }, d = n === "left";
+  var r, a;
+  const n = t.direction ?? "left", s = {
+    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? D.stiffness,
+    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? D.damping
+  }, c = n === "left";
   return {
-    in: (c) => ({
-      spring: r,
+    in: (l) => ({
+      spring: s,
       prepare: () => {
-        c.style.willChange = "transform", c.style.backfaceVisibility = "hidden", c.style.contain = "layout paint";
+        l.style.willChange = "transform", l.style.backfaceVisibility = "hidden", l.style.contain = "layout paint";
       },
       css: (i) => ({
-        transform: `translate3d(${d ? (1 - i) * 100 : (1 - i) * -100}%, 0, 0)`
+        transform: `translate3d(${c ? (1 - i) * 100 : (1 - i) * -100}%, 0, 0)`
       }),
       onEnd: () => {
-        c.style.willChange = "auto", c.style.backfaceVisibility = "", c.style.contain = "";
+        l.style.willChange = "auto", l.style.backfaceVisibility = "", l.style.contain = "";
       }
     }),
-    out: (c, i) => ({
-      spring: r,
-      css: (o) => ({
-        transform: `translate3d(${d ? (1 - o) * -100 : (1 - o) * 100}%, 0, 0)`
+    out: (l, i) => ({
+      spring: s,
+      css: (d) => ({
+        transform: `translate3d(${c ? (1 - d) * -100 : (1 - d) * 100}%, 0, 0)`
       }),
-      prepare: (o) => {
-        b(o, i), o.style.willChange = "transform", o.style.backfaceVisibility = "hidden", o.style.contain = "layout paint", o.style.pointerEvents = "none";
+      prepare: (d) => {
+        x(d, i), d.style.willChange = "transform", d.style.backfaceVisibility = "hidden", d.style.contain = "layout paint", d.style.pointerEvents = "none";
       }
     })
   };
-}, F = { stiffness: 17, damping: 6 }, S = 20, T = 800, Ht = () => {
+}, v = { stiffness: 17, damping: 6 }, S = 20, T = 800, zt = () => {
   let t, n = null;
   return {
-    in: (r) => ({
-      spring: F,
+    in: (s) => ({
+      spring: v,
       prepare: () => {
-        r.style.willChange = "transform", r.style.backfaceVisibility = "hidden", r.style.contain = "layout paint", r.style.transform = `perspective(${T}px) rotateY(${S}deg) translate3d(-100%, 0, 0)`;
+        s.style.willChange = "transform", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.transform = `perspective(${T}px) rotateY(${S}deg) translate3d(-100%, 0, 0)`;
       },
       wait: async () => {
         t && await t;
       },
-      css: (d) => {
-        const s = (1 - d) * S, l = -(1 - d) * 100;
+      css: (c) => {
+        const r = (1 - c) * S, a = -(1 - c) * 100;
         return {
-          transform: `perspective(${T}px) rotateY(${s}deg) translate3d(${l}%, 0, 0)`
+          transform: `perspective(${T}px) rotateY(${r}deg) translate3d(${a}%, 0, 0)`
         };
       },
       onEnd: () => {
-        r.style.transform = "", r.style.willChange = "auto", r.style.backfaceVisibility = "", r.style.contain = "";
+        s.style.transform = "", s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "";
       }
     }),
-    out: (r, d) => (t = new Promise((s) => {
-      n = s;
+    out: (s, c) => (t = new Promise((r) => {
+      n = r;
     }), {
-      spring: F,
-      prepare: (s) => {
-        b(s, d), s.style.willChange = "transform", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.pointerEvents = "none", s.style.transform = `perspective(${T}px) rotateY(0deg) translate3d(0%, 0, 0)`;
+      spring: v,
+      prepare: (r) => {
+        x(r, c), r.style.willChange = "transform", r.style.backfaceVisibility = "hidden", r.style.contain = "layout paint", r.style.pointerEvents = "none", r.style.transform = `perspective(${T}px) rotateY(0deg) translate3d(0%, 0, 0)`;
       },
-      css: (s) => {
-        const l = 1 - s, c = l * S, i = l * 100;
+      css: (r) => {
+        const a = 1 - r, l = a * S, i = a * 100;
         return {
-          transform: `perspective(${T}px) rotateY(${-c}deg) translate3d(${i}%, 0, 0)`
+          transform: `perspective(${T}px) rotateY(${-l}deg) translate3d(${i}%, 0, 0)`
         };
       },
       onEnd: () => {
-        n && n(), r.style.transform = "";
+        n && n(), s.style.transform = "";
       }
     })
   };
-}, wt = { stiffness: 1, damping: 1 }, xt = { stiffness: 20, damping: 25 }, bt = "#000000", mt = "circle", Y = "CURTAIN_REVEAL_OVERLAY_ID", Et = {
+}, mt = { stiffness: 1, damping: 1 }, wt = { stiffness: 20, damping: 25 }, xt = "#000000", bt = "circle", F = "CURTAIN_REVEAL_OVERLAY_ID", Et = {
   position: "fixed",
   inset: "0",
   width: "100vw",
@@ -892,12 +929,12 @@ const Ut = (t = {}) => {
   display: "inline-block",
   height: "5.5rem",
   overflow: "hidden"
-}, Lt = {
+}, Ct = {
   display: "flex",
   height: "100%",
   willChange: "transform",
   transition: "transform 0.3s ease"
-}, Ct = {
+}, Lt = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -914,80 +951,80 @@ function St(t, n) {
     case "square":
       return `inset(${(1 - n) * 50}% round ${10 * n}%)`;
     case "triangle": {
-      const r = n * 100;
-      return `polygon(50% ${50 - r}%, ${50 - r}% ${50 + r}%, ${50 + r}% ${50 + r}%)`;
+      const s = n * 100;
+      return `polygon(50% ${50 - s}%, ${50 - s}% ${50 + s}%, ${50 + s}% ${50 + s}%)`;
     }
   }
 }
-const _t = (t) => t.reduce((n, r) => n + r, 0), Bt = (t = {}) => {
+const _t = (t) => t.reduce((n, s) => n + s, 0), Xt = (t = {}) => {
   const {
-    background: n = bt,
-    texts: r = [],
-    shape: d = mt,
-    inSpring: s = xt,
-    outSpring: l = wt,
-    textStyle: c = {}
+    background: n = xt,
+    texts: s = [],
+    shape: c = bt,
+    inSpring: r = wt,
+    outSpring: a = mt,
+    textStyle: l = {}
   } = t;
   return {
-    out: (i, o) => {
-      const a = i.style.opacity;
+    out: (i, d) => {
+      const o = i.style.opacity;
       return {
-        spring: l,
+        spring: a,
         from: 1,
         to: 0,
         prepare: (e) => {
-          b(e, o), e.style.opacity = "1";
+          x(e, d), e.style.opacity = "1";
         },
         tick: (e) => {
-          const g = Math.max(0, e - Tt);
-          i.style.opacity = String(g);
+          const h = Math.max(0, e - Tt);
+          i.style.opacity = String(h);
         },
         onEnd: () => {
-          i.style.opacity = a;
+          i.style.opacity = o;
         }
       };
     },
     in: (i) => {
-      let o = null, a = null, e = null;
-      const g = document.body.style.overflow, y = document.getElementById(
-        Y
+      let d = null, o = null, e = null;
+      const h = document.body.style.overflow, p = document.getElementById(
+        F
       );
       let u = [];
-      const p = () => {
-        o = document.createElement("div"), o.id = Y, Object.assign(o.style, Et, { background: n }), document.body.appendChild(o), a = document.createElement("div"), Object.assign(a.style, At), o.appendChild(a), e = document.createElement("div"), Object.assign(e.style, Lt), a.appendChild(e), r.forEach((h) => {
+      const g = () => {
+        d = document.createElement("div"), d.id = F, Object.assign(d.style, Et, { background: n }), document.body.appendChild(d), o = document.createElement("div"), Object.assign(o.style, At), d.appendChild(o), e = document.createElement("div"), Object.assign(e.style, Ct), o.appendChild(e), s.forEach((y) => {
           const f = document.createElement("div");
-          f.textContent = h, Object.assign(f.style, Ct, c), e.appendChild(f);
+          f.textContent = y, Object.assign(f.style, Lt, l), e.appendChild(f);
         }), u = Array.from(e.children).map(
-          (h) => h.getBoundingClientRect().width
+          (y) => y.getBoundingClientRect().width
         );
       };
       return {
-        spring: s,
+        spring: r,
         from: 0,
         to: 1,
         prepare: () => {
-          document.body.style.overflow = "hidden", i.style.opacity = "1", y == null || y.remove(), p(), o && a && (o.style.clipPath = "none", a.style.transform = "scale(1)");
+          document.body.style.overflow = "hidden", i.style.opacity = "1", p == null || p.remove(), g(), d && o && (d.style.clipPath = "none", o.style.transform = "scale(1)");
         },
-        tick: (h) => {
-          if (!(!o || !a || !e)) {
-            if (h <= k && r.length > 0) {
-              const f = h / k, $ = Math.min(
-                Math.floor(f * r.length),
-                r.length - 1
-              ), w = u[$] ?? 0, x = _t(u.slice(0, $));
-              a.style.width = `${w}px`, e.style.transform = `translateX(-${x}px)`;
+        tick: (y) => {
+          if (!(!d || !o || !e)) {
+            if (y <= k && s.length > 0) {
+              const f = y / k, $ = Math.min(
+                Math.floor(f * s.length),
+                s.length - 1
+              ), w = u[$] ?? 0, m = _t(u.slice(0, $));
+              o.style.width = `${w}px`, e.style.transform = `translateX(-${m}px)`;
             }
-            if (h > k) {
+            if (y > k) {
               const $ = 1 - Math.max(
                 0,
-                Math.min(1, (h - k) / kt)
+                Math.min(1, (y - k) / kt)
               );
-              o.style.clipPath = St(d, $), a.style.transform = `scale(${$})`;
+              d.style.clipPath = St(c, $), o.style.transform = `scale(${$})`;
             }
           }
         },
         onEnd: () => {
-          o == null || o.remove(), o = a = e = null, document.body.style.overflow = g;
+          d == null || d.remove(), d = o = e = null, document.body.style.overflow = h;
         }
       };
     }
@@ -995,15 +1032,15 @@ const _t = (t) => t.reduce((n, r) => n + r, 0), Bt = (t = {}) => {
 };
 export {
   It as blind,
-  Bt as curtainReveal,
-  Dt as drill,
-  vt as fade,
-  Ft as film,
-  Yt as hero,
-  Ot as instagram,
-  Mt as jaemin,
+  Xt as curtainReveal,
+  Ot as drill,
+  Dt as fade,
+  vt as film,
+  Ft as hero,
+  Yt as instagram,
+  Nt as jaemin,
   Ut as pinterest,
   Vt as scroll,
   Wt as slide,
-  Ht as strip
+  zt as strip
 };