@ssgoi/core 2.5.2 → 2.5.4

package/dist/view-transitions/index.js

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