@ssgoi/core 3.2.2 → 3.3.0

package/dist/view-transitions/index.js

@@ -1,13 +1,20 @@
 import { p as x, g as b } from "../jaemin-BWkrXq0V.js";
-import { a as Xt } from "../jaemin-BWkrXq0V.js";
-const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damping: 25 }, H = { stiffness: 75, damping: 25 }, N = 300, q = 10, G = "horizontal", j = "#000000", St = (t = {}) => {
+import { a as Ht } from "../jaemin-BWkrXq0V.js";
+const F = (t) => new Promise((n) => setTimeout(n, t));
+function T() {
+  let t, n;
+  return { promise: new Promise((d, r) => {
+    t = d, n = r;
+  }), resolve: t, reject: n };
+}
+const N = { stiffness: 80, damping: 25 }, G = { stiffness: 75, damping: 25 }, q = 300, j = 10, K = "horizontal", Z = "#000000", It = (t = {}) => {
   const {
-    inSpring: n = H,
-    outSpring: a = B,
-    transitionDelay: d = N,
-    blindCount: r = q,
-    direction: s = G,
-    blindColor: l = j
+    inSpring: n = G,
+    outSpring: s = N,
+    transitionDelay: d = q,
+    blindCount: r = j,
+    direction: a = K,
+    blindColor: l = Z
   } = t;
   let i, c = null;
   const o = (e, p, y = "left") => {
@@ -26,7 +33,7 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
     const u = [];
     for (let m = 0; m < r; m++) {
       const f = document.createElement("div");
-      if (s === "horizontal") {
+      if (a === "horizontal") {
         const w = 100 / r, $ = `calc(${w}% + 1px)`;
         f.style.cssText = `
           position: absolute;
@@ -66,12 +73,12 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
       const p = (h) => {
         const g = 1 - h;
         return {
-          transform: s === "horizontal" ? `scaleX(${g})` : `scaleY(${g})`
+          transform: a === "horizontal" ? `scaleX(${g})` : `scaleY(${g})`
         };
       };
       return {
         springs: Array.from({ length: r }, (h, g) => ({
-          spring: a,
+          spring: s,
           offset: 0.2,
           css: {
             // Use getter for lazy element access (evaluated after prepare)
@@ -97,7 +104,7 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
       const p = (h) => {
         const g = 1 - h;
         return {
-          transform: s === "horizontal" ? `scaleX(${g})` : `scaleY(${g})`
+          transform: a === "horizontal" ? `scaleX(${g})` : `scaleY(${g})`
         };
       };
       return {
@@ -119,7 +126,7 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
         onStart: () => {
         },
         wait: async () => {
-          i && await i, await P(d);
+          i && await i, await F(d);
         },
         onEnd: () => {
           e && e.container && e.container.remove();
@@ -127,19 +134,19 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
       };
     }
   };
-}, K = {
+}, J = {
   stiffness: 150,
   damping: 20
-}, Z = {
+}, Q = {
   stiffness: 100,
   damping: 20
-}, _t = (t = {}) => {
-  var s, l;
-  const { opacity: n = !1, direction: a = "enter" } = t, d = a === "enter" ? K : Z, r = {
-    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? d.stiffness,
+}, Ot = (t = {}) => {
+  var a, l;
+  const { opacity: n = !1, direction: s = "enter" } = t, d = s === "enter" ? J : Q, r = {
+    stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ?? d.stiffness,
     damping: ((l = t.spring) == null ? void 0 : l.damping) ?? d.damping
   };
-  return a === "enter" ? {
+  return s === "enter" ? {
     in: (i) => ({
       spring: r,
       prepare: () => {
@@ -196,33 +203,35 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
       }
     })
   };
-}, J = { stiffness: 65, damping: 16 }, Q = { stiffness: 65, damping: 14 }, R = 0, It = (t = {}) => {
+}, R = { stiffness: 120, damping: 15 }, tt = { stiffness: 100, damping: 20 }, nt = 0, Dt = (t = {}) => {
   const {
-    inSpring: n = Q,
-    outSpring: a = J,
-    transitionDelay: d = R
+    inSpring: n = tt,
+    outSpring: s = R,
+    transitionDelay: d = nt
   } = t;
-  let r, s = null;
+  let { promise: r, resolve: a } = T();
   return {
     in: (l) => ({
       spring: n,
       prepare: () => {
-        l.style.willChange = "opacity";
+        l.style.opacity = "0", l.style.willChange = "opacity";
       },
       wait: async () => {
-        r && (await r, await P(d));
+        if (r) {
+          await r;
+          const i = T();
+          r = i.promise, a = i.resolve, await F(d);
+        }
       },
       css: (i) => ({
         opacity: i
       }),
       onEnd: () => {
-        l.style.willChange = "auto";
+        l.style.willChange = "auto", l.style.opacity = "1";
       }
     }),
-    out: (l, i) => (r = new Promise((c) => {
-      s = c;
-    }), {
-      spring: a,
+    out: (l, i) => ({
+      spring: s,
       css: (c) => ({
         opacity: c
       }),
@@ -230,11 +239,11 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
         x(l, i), l.style.willChange = "opacity";
       },
       onEnd: () => {
-        s && s(), l.style.willChange = "auto";
+        a && a(), l.style.willChange = "auto";
       }
     })
   };
-}, tt = {
+}, et = {
   scaleDown: { stiffness: 20, damping: 7 },
   // Soft start for cinematic scale
   translate: { stiffness: 15, damping: 7 },
@@ -248,21 +257,21 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
   // Start when scaleDown is 25% complete
   scaleUp: 0.8
   // Start when translate is 70% complete
-}, nt = 0.8, et = "white", Ot = (t) => {
+}, it = 0.8, st = "white", Pt = (t) => {
   var r;
-  const n = tt, a = nt, d = ((r = t == null ? void 0 : t.border) == null ? void 0 : r.color) ?? et;
+  const n = et, s = it, d = ((r = t == null ? void 0 : t.border) == null ? void 0 : r.color) ?? st;
   return {
-    out: async (s, l) => {
-      const i = T(l), c = b(document.body, l.positionedParent), o = st(d, {
+    out: async (a, l) => {
+      const i = k(l), c = b(document.body, l.positionedParent), o = rt(d, {
         ...i,
         top: c.top
       }), e = {
         scale: 1,
         translateY: -i.top
       }, p = () => {
-        s.style.transform = `translateY(${e.translateY}px) scale(${e.scale})`;
+        a.style.transform = `translateY(${e.translateY}px) scale(${e.scale})`;
         const y = (i.width - i.width * e.scale) / 2, h = (i.height - i.height * e.scale) / 2;
-        it(o, y, h);
+        at(o, y, h);
       };
       return {
         springs: [
@@ -272,7 +281,7 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
             offset: E.scaleDown,
             tick: (y) => {
               const h = 1 - y;
-              e.scale = 1 - (1 - a) * h, p();
+              e.scale = 1 - (1 - s) * h, p();
             }
           },
           // Spring 2: Translate (vertical movement)
@@ -290,30 +299,30 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
             offset: E.scaleUp,
             tick: (y) => {
               const h = 1 - y;
-              e.scale = a + (1 - a) * h, p();
+              e.scale = s + (1 - s) * h, p();
             }
           }
         ],
         schedule: "stagger",
         prepare: () => {
-          x(s), k(s, i), S(s, i), at(s, i);
+          x(a), S(a, i), _(a, i), lt(a, i);
           for (const y of o)
             l.positionedParent.appendChild(y);
         },
         onEnd: () => {
-          s.style.clipPath = "", s.style.transformOrigin = "", setTimeout(() => {
+          a.style.clipPath = "", a.style.transformOrigin = "", setTimeout(() => {
             for (const y of o)
               l.positionedParent.removeChild(y);
           }, 1e3);
         }
       };
     },
-    in: async (s, l) => {
-      const i = T(l), c = {
-        scale: a,
+    in: async (a, l) => {
+      const i = k(l), c = {
+        scale: s,
         translateY: -i.top + i.height
       }, o = () => {
-        s.style.transform = `translateY(${c.translateY}px) scale(${c.scale})`;
+        a.style.transform = `translateY(${c.translateY}px) scale(${c.scale})`;
       };
       return {
         springs: [
@@ -322,7 +331,7 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
             spring: n.scaleDown,
             offset: E.scaleDown,
             tick: (e) => {
-              c.scale = 1 - (1 - a) * e, o();
+              c.scale = 1 - (1 - s) * e, o();
             }
           },
           // Spring 2: Translate (vertical movement from bottom to top)
@@ -338,32 +347,32 @@ const P = (t) => new Promise((n) => setTimeout(n, t)), B = { stiffness: 80, damp
             spring: n.scaleUp,
             offset: E.scaleUp,
             tick: (e) => {
-              c.scale = a + (1 - a) * e, o();
+              c.scale = s + (1 - s) * e, o();
             }
           }
         ],
         schedule: "stagger",
         prepare: () => {
-          k(s, i), S(s, i), s.style.transform = `translateY(${-i.top + i.height}px) scale(${a})`;
+          S(a, i), _(a, i), a.style.transform = `translateY(${-i.top + i.height}px) scale(${s})`;
         },
         onEnd: () => {
-          s.style.clipPath = "", s.style.transformOrigin = "", s.style.transform = "";
+          a.style.clipPath = "", a.style.transformOrigin = "", a.style.transform = "";
         }
       };
     }
   };
 };
-function it(t, n, a) {
-  const d = n * 0.7, r = a * 0.7;
+function at(t, n, s) {
+  const d = n * 0.7, r = s * 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 st(t = "white", n) {
+function rt(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 = "absolute", s.style.width = "15px", s.style.height = "1px", s.style.backgroundColor = t, s.style.top = "0", s.style.left = "0";
+  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 = "1px", l.style.height = "15px", l.style.backgroundColor = t, l.style.top = "0", l.style.left = "0", r.appendChild(s), r.appendChild(l);
+  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 c = document.createElement("div");
@@ -391,7 +400,7 @@ function st(t = "white", n) {
     }
   };
 }
-function T(t) {
+function k(t) {
   const n = b(document.body, t.positionedParent);
   return {
     top: t.scroll.y,
@@ -400,11 +409,11 @@ function T(t) {
     height: window.innerHeight - n.top
   };
 }
-function k(t, n) {
-  const a = n.left + n.width / 2, d = n.top + n.height / 2;
-  t.style.transformOrigin = `${a}px ${d}px`;
-}
 function S(t, n) {
+  const s = n.left + n.width / 2, d = n.top + n.height / 2;
+  t.style.transformOrigin = `${s}px ${d}px`;
+}
+function _(t, n) {
   t.style.clipPath = `polygon(
     ${n.left}px ${n.top}px,
     ${n.left + n.width}px ${n.top}px,
@@ -412,19 +421,19 @@ function S(t, n) {
     ${n.left}px ${n.top + n.height}px
   )`;
 }
-function at(t, n) {
+function lt(t, n) {
   t.style.transform = `translateY(${-n.top}px)`;
 }
-function rt(t, n) {
+function ot(t, n) {
   return t.querySelector(`[data-hero-key="${n}"]`);
 }
-const Dt = (t = {}) => {
+const vt = (t = {}) => {
   var l, i;
   const n = {
     stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 300,
     damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 30
-  }, a = t.timeout ?? 300, d = t.maxDistance ?? 700;
-  let r = null, s = null;
+  }, s = t.timeout ?? 300, d = t.maxDistance ?? 700;
+  let r = null, a = null;
   return {
     in: async (c, o) => {
       const e = c, p = Array.from(e.querySelectorAll("[data-hero-key]"));
@@ -436,9 +445,9 @@ const Dt = (t = {}) => {
           // No hero elements, skip animation
         };
       if (!await new Promise((g) => {
-        r ? g(!0) : (s = g, setTimeout(() => {
-          s = null, g(!1);
-        }, a));
+        r ? g(!0) : (a = g, setTimeout(() => {
+          a = null, g(!1);
+        }, s));
       }) || !r)
         return r = null, {
           spring: n,
@@ -449,20 +458,20 @@ const Dt = (t = {}) => {
       const h = p.map((g) => {
         const u = g.getAttribute("data-hero-key");
         if (!u) return null;
-        const m = rt(r, u);
+        const m = ot(r, u);
         if (!m) return null;
-        const f = g, w = b(r, m), $ = b(e, f), v = w.left - $.left - o.scrollOffset.x, F = w.top - $.top - o.scrollOffset.y, Y = w.width / $.width, U = w.height / $.height, V = f.style.transform, W = f.style.position, z = f.style.transformOrigin, X = f.style.zIndex, M = f.style.willChange;
+        const f = g, w = b(r, m), $ = b(e, f), Y = w.left - $.left - o.scrollOffset.x, U = w.top - $.top - o.scrollOffset.y, V = w.width / $.width, W = w.height / $.height, z = f.style.transform, X = f.style.position, M = f.style.transformOrigin, B = f.style.zIndex, H = f.style.willChange;
         return {
           toEl: f,
-          dx: v,
-          dy: F,
-          dw: Y,
-          dh: U,
-          originalTransform: V,
-          originalPosition: W,
-          originalTransformOrigin: z,
-          originalZIndex: X,
-          originalWillChange: M
+          dx: Y,
+          dy: U,
+          dw: V,
+          dh: W,
+          originalTransform: z,
+          originalPosition: X,
+          originalTransformOrigin: M,
+          originalZIndex: B,
+          originalWillChange: H
         };
       }).filter(
         (g) => g !== null && Math.abs(g.dy) <= d
@@ -504,7 +513,7 @@ const Dt = (t = {}) => {
     out: async (c) => ({
       spring: n,
       onStart: () => {
-        r = c, s && (s(!0), s = null);
+        r = c, a && (a(!0), a = null);
       },
       tick: () => {
       },
@@ -514,43 +523,43 @@ const Dt = (t = {}) => {
     })
   };
 };
-function lt({
+function ct({
   detailRect: t,
   galleryRect: n,
-  pageRect: a,
+  pageRect: s,
   scrollOffset: d
 }) {
-  const r = n.left - t.left + (n.width - t.width) / 2 - d.x, s = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100, p = (a.height - (t.top + t.height)) / a.height * 100, y = t.left / a.width * 100;
+  const r = n.left - t.left + (n.width - t.width) / 2 - d.x, a = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, y = t.left / s.width * 100;
   return {
     transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
     animate: (g) => {
       const u = 1 - g;
       return {
         clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
-        transform: `translate(${r * u}px, ${s * u}px) scale(${1 + (c - 1) * u})`
+        transform: `translate(${r * u}px, ${a * u}px) scale(${1 + (c - 1) * u})`
       };
     }
   };
 }
-function ot({
+function dt({
   detailRect: t,
   galleryRect: n,
-  pageRect: a,
+  pageRect: s,
   scrollOffset: d
 }) {
-  const r = n.left - t.left + (n.width - t.width) / 2 + d.x, s = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100, p = (a.height - (t.top + t.height)) / a.height * 100, y = t.left / a.width * 100;
+  const r = n.left - t.left + (n.width - t.width) / 2 + d.x, a = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, y = t.left / s.width * 100;
   return {
     transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
     animate: (g) => {
       const u = 1 - g;
       return {
         clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
-        transform: `translate(${r * u - d.x}px, ${s * u - d.y}px) scale(${1 + (c - 1) * u})`
+        transform: `translate(${r * u - d.x}px, ${a * u - d.y}px) scale(${1 + (c - 1) * u})`
       };
     }
   };
 }
-function ct(t, n, a) {
+function ht(t, n, s) {
   const d = t.querySelector(
     "[data-instagram-detail-key]"
   ), r = n.querySelector(
@@ -558,31 +567,31 @@ function ct(t, n, a) {
   );
   if (t.querySelectorAll("[data-instagram-detail-key]").length > 1 || n.querySelectorAll("[data-instagram-detail-key]").length > 1)
     return null;
-  let s = null, l = null, i = !1;
+  let a = null, l = null, i = !1;
   if (!d && r) {
     l = r;
     const e = l.getAttribute("data-instagram-detail-key");
     if (!e) return null;
-    s = t.querySelector(
+    a = t.querySelector(
       `[data-instagram-gallery-key="${e}"]`
-    ), s && (i = !0);
+    ), a && (i = !0);
   } else if (d && !r) {
     l = d;
     const e = l.getAttribute("data-instagram-detail-key");
     if (!e) return null;
-    s = n.querySelector(
+    a = n.querySelector(
       `[data-instagram-gallery-key="${e}"]`
-    ), s && (i = !1);
+    ), a && (i = !1);
   }
-  if (!s || !l)
+  if (!a || !l)
     return null;
-  const c = b(i ? t : n, s), o = b(i ? n : t, l);
+  const c = b(i ? t : n, a), o = b(i ? n : t, l);
   if (i) {
-    const e = lt({
+    const e = ct({
       detailRect: o,
       galleryRect: c,
       pageRect: n.getBoundingClientRect(),
-      scrollOffset: a
+      scrollOffset: s
     });
     return n.style.transformOrigin = e.transformOrigin, {
       isEnterMode: !0,
@@ -590,11 +599,11 @@ function ct(t, n, a) {
       // No outAnimation - gallery stays visible
     };
   } else {
-    const e = ot({
+    const e = dt({
       detailRect: o,
       galleryRect: c,
       pageRect: t.getBoundingClientRect(),
-      scrollOffset: a
+      scrollOffset: s
     });
     return t.style.transformOrigin = e.transformOrigin, {
       isEnterMode: !1,
@@ -603,26 +612,26 @@ function ct(t, n, a) {
     };
   }
 }
-const Pt = (t = {}) => {
+const Ft = (t = {}) => {
   var i, c;
   const n = {
     stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 150,
     damping: ((c = t.spring) == null ? void 0 : c.damping) ?? 20
-  }, a = t.timeout ?? 300;
-  let d = null, r = null, s = null, l = null;
+  }, s = t.timeout ?? 300;
+  let d = null, r = null, a = null, l = null;
   return {
     in: async (o, { scrollOffset: e }) => {
       const p = o;
       return !await new Promise((h) => {
         d ? h(!0) : (r = h, setTimeout(() => {
           r = null, h(!1);
-        }, a));
+        }, s));
       }) || !d ? (l == null || l(), l = null, d = null, {
         spring: n,
         css: () => ({})
-      }) : (s = ct(d, p, e), l == null || l(), l = null, s ? (d = null, {
+      }) : (a = ht(d, p, e), l == null || l(), l = null, a ? (d = null, {
         spring: n,
-        css: (h) => s != null && s.inAnimation ? s.inAnimation(h) : {}
+        css: (h) => a != null && a.inAnimation ? a.inAnimation(h) : {}
       }) : (d = null, {
         spring: n,
         css: () => ({})
@@ -635,57 +644,57 @@ const Pt = (t = {}) => {
       return {
         spring: n,
         prepare: (y) => {
-          s != null && s.isEnterMode ? x(y) : (x(y, e), y.style.zIndex = "-1");
+          a != null && a.isEnterMode ? x(y) : (x(y, e), y.style.zIndex = "-1");
         },
         wait: async () => {
           d = o, r && (r(!0), r = null), await p;
         },
-        css: (y) => s != null && s.outAnimation ? s.outAnimation(y) : {}
+        css: (y) => a != null && a.outAnimation ? a.outAnimation(y) : {}
       };
     }
   };
 };
-function dt({
+function pt({
   detailRect: t,
   galleryRect: n,
-  pageRect: a,
+  pageRect: s,
   scrollOffset: d
 }) {
-  const r = n.left - t.left + (n.width - t.width) / 2 - d.x, s = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100, p = (a.height - (t.top + t.height)) / a.height * 100, y = t.left / a.width * 100;
+  const r = n.left - t.left + (n.width - t.width) / 2 - d.x, a = n.top - t.top + (n.height - t.height) / 2 - d.y, l = n.width / t.width, i = n.height / t.height, c = Math.max(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, y = t.left / s.width * 100;
   return {
     transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
     animate: (g) => {
       const u = 1 - g;
       return {
         clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
-        transform: `translate(${r * u}px, ${s * u}px) scale(${1 + (c - 1) * u})`
+        transform: `translate(${r * u}px, ${a * u}px) scale(${1 + (c - 1) * u})`
       };
     }
   };
 }
-function ht({
+function yt({
   galleryRect: t,
   detailRect: n,
-  scrollOffset: a
+  scrollOffset: s
 }) {
-  const d = n.left - t.left + (n.width - t.width) / 2 + a.x, r = n.top - t.top + (n.height - t.height) / 2 + a.y, s = n.width / t.width, l = n.height / t.height, i = Math.max(s, l);
+  const d = 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(${d * e - a.x}px, ${r * e - a.y}px) scale(${1 + (i - 1) * e})`,
+        transform: `translate(${d * e - s.x}px, ${r * e - s.y}px) scale(${1 + (i - 1) * e})`,
         opacity: `${1 - e}`
       };
     }
   };
 }
-function pt({
+function gt({
   galleryRect: t,
   detailRect: n,
-  scrollOffset: a
+  scrollOffset: s
 }) {
-  const d = n.left - t.left + (n.width - t.width) / 2 - a.x, r = n.top - t.top + (n.height - t.height) / 2 - a.y, s = n.width / t.width, l = n.height / t.height, i = Math.max(s, l);
+  const d = 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) => {
@@ -697,25 +706,25 @@ function pt({
     }
   };
 }
-function yt({
+function ut({
   detailRect: t,
   galleryRect: n,
-  pageRect: a,
+  pageRect: s,
   scrollOffset: d
 }) {
-  const r = n.left - t.left + (n.width - t.width) / 2 + d.x, s = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / a.height * 100, e = (a.width - (t.left + t.width)) / a.width * 100, p = (a.height - (t.top + t.height)) / a.height * 100, y = t.left / a.width * 100;
+  const r = n.left - t.left + (n.width - t.width) / 2 + d.x, a = n.top - t.top + (n.height - t.height) / 2 + d.y, l = n.width / t.width, i = n.height / t.height, c = Math.min(l, i), o = t.top / s.height * 100, e = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, y = t.left / s.width * 100;
   return {
     transformOrigin: `${t.left + t.width / 2}px ${t.top + t.height / 2}px`,
     animate: (g) => {
       const u = 1 - g;
       return {
         clipPath: `inset(${o * u}% ${e * u}% ${p * u}% ${y * u}%)`,
-        transform: `translate(${r * u - d.x}px, ${s * u - d.y}px) scale(${1 + (c - 1) * u})`
+        transform: `translate(${r * u - d.x}px, ${a * u - d.y}px) scale(${1 + (c - 1) * u})`
       };
     }
   };
 }
-function gt(t, n, a) {
+function ft(t, n, s) {
   const d = t.querySelector(
     "[data-pinterest-detail-key]"
   ), r = n.querySelector(
@@ -723,50 +732,50 @@ function gt(t, n, a) {
   );
   if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
     return null;
-  let s = null, l = null, i = !1;
+  let a = null, l = null, i = !1;
   if (!d && r) {
     l = r;
     const e = l.getAttribute("data-pinterest-detail-key");
     if (!e) return null;
-    s = t.querySelector(
+    a = t.querySelector(
       `[data-pinterest-gallery-key="${e}"]`
-    ), s && (i = !0);
+    ), a && (i = !0);
   } else if (d && !r) {
     l = d;
     const e = l.getAttribute("data-pinterest-detail-key");
     if (!e) return null;
-    s = n.querySelector(
+    a = n.querySelector(
       `[data-pinterest-gallery-key="${e}"]`
-    ), s && (i = !1);
+    ), a && (i = !1);
   }
-  if (!s || !l)
+  if (!a || !l)
     return null;
-  const c = b(i ? t : n, s), o = b(i ? n : t, l);
+  const c = b(i ? t : n, a), o = b(i ? n : t, l);
   if (i) {
-    const e = dt({
+    const e = pt({
       detailRect: o,
       galleryRect: c,
       pageRect: n.getBoundingClientRect(),
-      scrollOffset: a
-    }), p = ht({
+      scrollOffset: s
+    }), p = yt({
       galleryRect: c,
       detailRect: o,
-      scrollOffset: a
+      scrollOffset: s
     });
     return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin = p.transformOrigin, {
       inAnimation: e.animate,
       outAnimation: p.animate
     };
   } else {
-    const e = pt({
+    const e = gt({
       galleryRect: c,
       detailRect: o,
-      scrollOffset: a
-    }), p = yt({
+      scrollOffset: s
+    }), p = ut({
       detailRect: o,
       galleryRect: c,
       pageRect: t.getBoundingClientRect(),
-      scrollOffset: a
+      scrollOffset: s
     });
     return n.style.transformOrigin = e.transformOrigin, t.style.transformOrigin = p.transformOrigin, {
       inAnimation: e.animate,
@@ -774,26 +783,26 @@ function gt(t, n, a) {
     };
   }
 }
-const vt = (t = {}) => {
+const Yt = (t = {}) => {
   var i, c;
   const n = {
     stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 30,
     damping: ((c = t.spring) == null ? void 0 : c.damping) ?? 10
-  }, a = t.timeout ?? 300;
-  let d = null, r = null, s = null, l = null;
+  }, s = t.timeout ?? 300;
+  let d = null, r = null, a = null, l = null;
   return {
     in: async (o, { scrollOffset: e }) => {
       const p = o;
       return !await new Promise((h) => {
         d ? h(!0) : (r = h, setTimeout(() => {
           r = null, h(!1);
-        }, a));
+        }, s));
       }) || !d ? (l == null || l(), l = null, d = null, {
         spring: n,
         css: () => ({})
-      }) : (s = gt(d, p, e), l == null || l(), l = null, s ? (d = null, {
+      }) : (a = ft(d, p, e), l == null || l(), l = null, a ? (d = null, {
         spring: n,
-        css: (h) => s ? s.inAnimation(h) : {}
+        css: (h) => a ? a.inAnimation(h) : {}
       }) : (d = null, {
         spring: n,
         css: () => ({})
@@ -811,29 +820,58 @@ const vt = (t = {}) => {
         wait: async () => {
           d = o, r && (r(!0), r = null), await e;
         },
-        css: (p) => s ? s.outAnimation(p) : {}
+        css: (p) => a ? a.outAnimation(p) : {}
       };
     }
   };
-}, _ = {
+}, I = { stiffness: 100, damping: 30 }, Ut = () => ({
+  in: (t) => ({
+    spring: I,
+    prepare: () => {
+      t.style.opacity = "0", t.style.transform = "rotate(-180deg)", t.style.transformOrigin = "center center", t.style.willChange = "transform, opacity";
+    },
+    css: (n) => ({
+      // -180deg → 0deg, show after 90deg (progress > 0.5)
+      transform: `rotate(${(n - 1) * 180}deg)`,
+      opacity: n > 0.5 ? 1 : 0
+    }),
+    onEnd: () => {
+      t.style.willChange = "auto", t.style.transform = "", t.style.transformOrigin = "", t.style.opacity = "";
+    }
+  }),
+  out: (t, n) => ({
+    spring: I,
+    prepare: () => {
+      x(t, n), t.style.transformOrigin = "center center", t.style.willChange = "transform, opacity";
+    },
+    css: (s) => ({
+      // 0deg → 180deg, hide after 90deg (progress < 0.5)
+      transform: `rotate(${(1 - s) * 180}deg)`,
+      opacity: s > 0.5 ? 1 : 0
+    }),
+    onEnd: () => {
+      t.style.willChange = "auto";
+    }
+  })
+}), O = {
   stiffness: 5,
   damping: 4
-}, Ft = (t = {}) => {
+}, Vt = (t = {}) => {
   var c, o;
-  const n = t.direction ?? "up", a = {
-    stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? _.stiffness,
-    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? _.damping
+  const n = t.direction ?? "up", s = {
+    stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? O.stiffness,
+    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? O.damping
   }, d = n === "up";
-  let r = null, s = null, l = null;
+  let r = null, a = null, l = null;
   const i = () => {
-    if (r === null || s === null)
+    if (r === null || a === null)
       return null;
-    const e = Math.min(r, s), p = window.innerHeight;
+    const e = Math.min(r, a), p = window.innerHeight;
     return Math.max(e, p);
   };
   return {
-    in: (e) => (s = e.offsetHeight, r !== null && (l = i()), {
-      spring: a,
+    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";
       },
@@ -847,9 +885,9 @@ const vt = (t = {}) => {
       }
     }),
     out: (e, p) => ({
-      spring: a,
+      spring: s,
       onStart: () => {
-        r = e.offsetHeight, s !== null && (l = i());
+        r = e.offsetHeight, a !== null && (l = i());
       },
       tick: (y) => {
         l === null && (l = i());
@@ -861,18 +899,18 @@ const vt = (t = {}) => {
       }
     })
   };
-}, I = {
+}, D = {
   stiffness: 15,
   damping: 7
-}, Yt = (t = {}) => {
-  var r, s;
-  const n = t.direction ?? "left", a = {
-    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? I.stiffness,
-    damping: ((s = t.spring) == null ? void 0 : s.damping) ?? I.damping
+}, Wt = (t = {}) => {
+  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
   }, d = n === "left";
   return {
     in: (l) => ({
-      spring: a,
+      spring: s,
       prepare: () => {
         l.style.willChange = "transform", l.style.backfaceVisibility = "hidden", l.style.contain = "layout paint";
       },
@@ -884,7 +922,7 @@ const vt = (t = {}) => {
       }
     }),
     out: (l, i) => ({
-      spring: a,
+      spring: s,
       css: (c) => ({
         transform: `translate3d(${d ? (1 - c) * -100 : (1 - c) * 100}%, 0, 0)`
       }),
@@ -893,46 +931,46 @@ const vt = (t = {}) => {
       }
     })
   };
-}, O = { stiffness: 17, damping: 6 }, L = 20, C = 800, Ut = () => {
+}, P = { stiffness: 17, damping: 6 }, L = 20, C = 800, zt = () => {
   let t, n = null;
   return {
-    in: (a) => ({
-      spring: O,
+    in: (s) => ({
+      spring: P,
       prepare: () => {
-        a.style.willChange = "transform", a.style.backfaceVisibility = "hidden", a.style.contain = "layout paint", a.style.transform = `perspective(${C}px) rotateY(${L}deg) translate3d(-100%, 0, 0)`;
+        s.style.willChange = "transform", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.transform = `perspective(${C}px) rotateY(${L}deg) translate3d(-100%, 0, 0)`;
       },
       wait: async () => {
         t && await t;
       },
       css: (d) => {
-        const r = (1 - d) * L, s = -(1 - d) * 100;
+        const r = (1 - d) * L, a = -(1 - d) * 100;
         return {
-          transform: `perspective(${C}px) rotateY(${r}deg) translate3d(${s}%, 0, 0)`
+          transform: `perspective(${C}px) rotateY(${r}deg) translate3d(${a}%, 0, 0)`
         };
       },
       onEnd: () => {
-        a.style.transform = "", a.style.willChange = "auto", a.style.backfaceVisibility = "", a.style.contain = "";
+        s.style.transform = "", s.style.willChange = "auto", s.style.backfaceVisibility = "", s.style.contain = "";
       }
     }),
-    out: (a, d) => (t = new Promise((r) => {
+    out: (s, d) => (t = new Promise((r) => {
       n = r;
     }), {
-      spring: O,
+      spring: P,
       prepare: (r) => {
         x(r, d), r.style.willChange = "transform", r.style.backfaceVisibility = "hidden", r.style.contain = "layout paint", r.style.pointerEvents = "none", r.style.transform = `perspective(${C}px) rotateY(0deg) translate3d(0%, 0, 0)`;
       },
       css: (r) => {
-        const s = 1 - r, l = s * L, i = s * 100;
+        const a = 1 - r, l = a * L, i = a * 100;
         return {
           transform: `perspective(${C}px) rotateY(${-l}deg) translate3d(${i}%, 0, 0)`
         };
       },
       onEnd: () => {
-        n && n(), a.style.transform = "";
+        n && n(), s.style.transform = "";
       }
     })
   };
-}, ut = { stiffness: 1, damping: 1 }, ft = { stiffness: 20, damping: 25 }, $t = "#000000", mt = "circle", D = "CURTAIN_REVEAL_OVERLAY_ID", wt = {
+}, $t = { stiffness: 1, damping: 1 }, mt = { stiffness: 20, damping: 25 }, wt = "#000000", xt = "circle", v = "CURTAIN_REVEAL_OVERLAY_ID", bt = {
   position: "fixed",
   inset: "0",
   width: "100vw",
@@ -942,17 +980,17 @@ const vt = (t = {}) => {
   alignItems: "center",
   justifyContent: "center",
   overflow: "hidden"
-}, xt = {
+}, Et = {
   position: "relative",
   display: "inline-block",
   height: "5.5rem",
   overflow: "hidden"
-}, bt = {
+}, Ct = {
   display: "flex",
   height: "100%",
   willChange: "transform",
   transition: "transform 0.3s ease"
-}, Et = {
+}, At = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -961,40 +999,40 @@ const vt = (t = {}) => {
   fontWeight: "900",
   letterSpacing: "0.02em",
   color: "#FFFFFF"
-}, Ct = 0.4, A = 0.5, At = 0.2;
-function Lt(t, n) {
+}, Lt = 0.4, A = 0.5, Tt = 0.2;
+function kt(t, n) {
   switch (t) {
     case "circle":
       return `circle(${n * 100}% at 50% 50%)`;
     case "square":
       return `inset(${(1 - n) * 50}% round ${10 * n}%)`;
     case "triangle": {
-      const a = n * 100;
-      return `polygon(50% ${50 - a}%, ${50 - a}% ${50 + a}%, ${50 + a}% ${50 + a}%)`;
+      const s = n * 100;
+      return `polygon(50% ${50 - s}%, ${50 - s}% ${50 + s}%, ${50 + s}% ${50 + s}%)`;
     }
   }
 }
-const Tt = (t) => t.reduce((n, a) => n + a, 0), Vt = (t = {}) => {
+const St = (t) => t.reduce((n, s) => n + s, 0), Xt = (t = {}) => {
   const {
-    background: n = $t,
-    texts: a = [],
-    shape: d = mt,
-    inSpring: r = ft,
-    outSpring: s = ut,
+    background: n = wt,
+    texts: s = [],
+    shape: d = xt,
+    inSpring: r = mt,
+    outSpring: a = $t,
     textStyle: l = {}
   } = t;
   return {
     out: (i, c) => {
       const o = i.style.opacity;
       return {
-        spring: s,
+        spring: a,
         from: 1,
         to: 0,
         prepare: (e) => {
           x(e, c), e.style.opacity = "1";
         },
         tick: (e) => {
-          const p = Math.max(0, e - Ct);
+          const p = Math.max(0, e - Lt);
           i.style.opacity = String(p);
         },
         onEnd: () => {
@@ -1005,13 +1043,13 @@ const Tt = (t) => t.reduce((n, a) => n + a, 0), Vt = (t = {}) => {
     in: (i) => {
       let c = null, o = null, e = null;
       const p = document.body.style.overflow, y = document.getElementById(
-        D
+        v
       );
       let h = [];
       const g = () => {
-        c = document.createElement("div"), c.id = D, Object.assign(c.style, wt, { background: n }), document.body.appendChild(c), o = document.createElement("div"), Object.assign(o.style, xt), c.appendChild(o), e = document.createElement("div"), Object.assign(e.style, bt), o.appendChild(e), a.forEach((u) => {
+        c = document.createElement("div"), c.id = v, Object.assign(c.style, bt, { background: n }), document.body.appendChild(c), o = document.createElement("div"), Object.assign(o.style, Et), c.appendChild(o), e = document.createElement("div"), Object.assign(e.style, Ct), o.appendChild(e), s.forEach((u) => {
           const m = document.createElement("div");
-          m.textContent = u, Object.assign(m.style, Et, l), e.appendChild(m);
+          m.textContent = u, Object.assign(m.style, At, l), e.appendChild(m);
         }), h = Array.from(e.children).map(
           (u) => u.getBoundingClientRect().width
         );
@@ -1025,19 +1063,19 @@ const Tt = (t) => t.reduce((n, a) => n + a, 0), Vt = (t = {}) => {
         },
         tick: (u) => {
           if (!(!c || !o || !e)) {
-            if (u <= A && a.length > 0) {
+            if (u <= A && s.length > 0) {
               const m = u / A, f = Math.min(
-                Math.floor(m * a.length),
-                a.length - 1
-              ), w = h[f] ?? 0, $ = Tt(h.slice(0, f));
+                Math.floor(m * s.length),
+                s.length - 1
+              ), w = h[f] ?? 0, $ = St(h.slice(0, f));
               o.style.width = `${w}px`, e.style.transform = `translateX(-${$}px)`;
             }
             if (u > A) {
               const f = 1 - Math.max(
                 0,
-                Math.min(1, (u - A) / At)
+                Math.min(1, (u - A) / Tt)
               );
-              c.style.clipPath = Lt(d, f), o.style.transform = `scale(${f})`;
+              c.style.clipPath = kt(d, f), o.style.transform = `scale(${f})`;
             }
           }
         },
@@ -1049,16 +1087,17 @@ const Tt = (t) => t.reduce((n, a) => n + a, 0), Vt = (t = {}) => {
   };
 };
 export {
-  St as blind,
-  Vt as curtainReveal,
-  _t as drill,
-  It as fade,
-  Ot as film,
-  Dt as hero,
-  Pt as instagram,
-  Xt as jaemin,
-  vt as pinterest,
-  Ft as scroll,
-  Yt as slide,
-  Ut as strip
+  It as blind,
+  Xt as curtainReveal,
+  Ot as drill,
+  Dt as fade,
+  Pt as film,
+  vt as hero,
+  Ft as instagram,
+  Ht as jaemin,
+  Yt as pinterest,
+  Ut as rotate,
+  Vt as scroll,
+  Wt as slide,
+  zt as strip
 };