@ssgoi/core/dist/view-transitions/index.js

Core animation engine for SSGOI - Native app-like page transitions with spring physics

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