gsap.registerPlugin(Flip, SplitText, Observer);
const mediaQuery = window.matchMedia("(max-width: 767px)");
async function fontsReady() {
    await document.fonts.ready;
    let e = new SplitText(".first_load--text", { type: "words, chars" }),
        t = new SplitText(".second_load--text", { type: "words, chars" });
    gsap.set(e.chars, { y: "100%" }),
        gsap.set(".nav>*", { opacity: 0, y: "1em" }),
        gsap.set(".head_image:not(.layer--one.image--one) img", { y: "101%", transformOrigin: "top", scale: 1.2 }),
        gsap.set(".nsb_wrap", { opacity: 0 });
    let r = new SplitText(".home_cb h1", { type: "lines, words", mask: "lines" }),
        o = new SplitText(".home_cb p", { type: "lines, words", mask: "lines" });
    gsap.set(r.words, { y: "100%" }),
        gsap.set(o.words, { y: "100%" }),
        gsap.set(".home_cb .link", { opacity: 0 }),
        gsap.set(".home_cb", { y: "100%" }),
        gsap.set(".head_image.layer--one.image--one", { width: "0em", scale: 0.15 }),
        mediaQuery.matches
            ? gsap.set(".loading__image", { width: "50.25em" })
            : gsap.set(".loading__image", { width: "31.25em" });
    let a = gsap
        .timeline({
            onStart() {
                document.querySelector(".wait_load").remove();
            },
        })
        .to(e.chars, { y: "0%", duration: 1.5, ease: "power2.inOut", stagger: 0.025 })
        .to(
            e.chars,
            {
                y: "-100%",
                duration: 1.5,
                ease: "power2.inOut",
                delay: 0.25,
                stagger: { each: 0.025, from: "center" },
                delay: 0.5,
            },
            "<+=.8"
        )
        .to(t.chars, { y: "-100%", duration: 1.5, ease: "power2.inOut", stagger: { each: 0.025, from: "center" } }, "<")
        .to(".first_word", { x: "-0.875em", duration: 1.5, ease: "power2.inOut" })
        .to(".second_word", { x: "1.5em", duration: 1.5, ease: "power2.inOut" }, "<")
        .to(
            ".head_image.layer--one.image--one",
            { width: mediaQuery.matches ? "50.25em" : "31.25em", duration: 1.5, ease: "power2.inOut" },
            "<"
        )
        .to(".head_image.layer--one.image--one", { scale: "1", duration: 1.5, ease: "power2.inOut" }, "<+=.8")
        .to(t.chars, { y: "-200%", duration: 1.5, ease: "power2.inOut", stagger: { each: 0.025, from: "center" } }, "<")
        .to(".nav>*", { opacity: 1, y: "0em", stagger: 0.025, duration: 1.5, ease: "power2.inOut" }, "<")
        .to(
            ".head_image:not(.layer--one.image--one) img",
            {
                stagger: { amount: 0.25 },
                y: "0%",
                scale: 1,
                onStart() {
                    let e = [
                        {
                            selector: ".images_layout.first_layer",
                            baseSpeed: 0.65,
                            speedFactor: 0.04,
                            friction: 0.9,
                        },
                        {
                            selector: ".images_layout.second_layer",
                            baseSpeed: 0.55,
                            speedFactor: 0.02,
                            friction: 0.92,
                        },
                        {
                            selector: ".images_layout.third_layer",
                            baseSpeed: 0.45,
                            speedFactor: 0.015,
                            friction: 0.94,
                        },
                    ].map((e) => {
                        var t, r;
                        let o,
                            a =
                                ((t = e.selector),
                                    (r = { repeat: -1, speed: e.baseSpeed, paused: !1, padding: 1 }),
                                    (t = gsap.utils.toArray(t)),
                                    (r = r || {}),
                                    gsap.context(() => {
                                        let e = r.onChange,
                                            a = 0,
                                            n = gsap.timeline({
                                                repeat: r.repeat,
                                                onUpdate:
                                                    e &&
                                                    function () {
                                                        let r = n.closestIndex();
                                                        a !== r && ((a = r), e(t[r], r));
                                                    },
                                                paused: r.paused,
                                                defaults: { ease: "none" },
                                                onReverseComplete: () => n.totalTime(n.rawTime() + 100 * n.duration()),
                                            });
                                        window.verticalLoops.push(n);
                                        let i = t.length,
                                            l = t[0].offsetTop,
                                            s = [],
                                            c = [],
                                            d = [],
                                            p = [],
                                            u = 0,
                                            y = r.center,
                                            m = (e) => {
                                                let t = {},
                                                    r;
                                                for (r in e) t[r] = e[r];
                                                return t;
                                            },
                                            $ = 100 * (r.speed || 1),
                                            g = !1 === r.snap ? (e) => e : gsap.utils.snap(r.snap || 1),
                                            f = 0,
                                            h =
                                                !0 === y
                                                    ? t[0].parentNode
                                                    : gsap.utils.toArray(y)[0] || t[0].parentNode,
                                            _,
                                            w = () =>
                                                t[i - 1].offsetTop +
                                                (p[i - 1] / 100) * c[i - 1] -
                                                l +
                                                d[0] +
                                                t[i - 1].offsetHeight * gsap.getProperty(t[i - 1], "scaleY") +
                                                (parseFloat(r.paddingBottom) || 0),
                                            E = () => {
                                                let e = h.getBoundingClientRect(),
                                                    r;
                                                (l = t[0].offsetTop),
                                                    t.forEach((t, o) => {
                                                        (c[o] = parseFloat(gsap.getProperty(t, "height", "px"))),
                                                            (p[o] = g(
                                                                (parseFloat(gsap.getProperty(t, "y", "px")) / c[o]) *
                                                                100 +
                                                                gsap.getProperty(t, "yPercent")
                                                            )),
                                                            (r = t.getBoundingClientRect()),
                                                            (d[o] = r.top - (o ? e.bottom : e.top)),
                                                            (e = r);
                                                    }),
                                                    gsap.set(t, { yPercent: (e) => p[e] }),
                                                    (_ = w());
                                            },
                                            v,
                                            S = () => {
                                                (f = y ? (n.duration() * (h.offsetWidth / 2)) / _ : 0),
                                                    y &&
                                                    s.forEach((e, t) => {
                                                        s[t] = v(
                                                            n.labels["label" + t] +
                                                            (n.duration() * c[t]) / 2 / _ -
                                                            f
                                                        );
                                                    });
                                            },
                                            b = (e, t, r) => {
                                                let o = e.length,
                                                    a = 1e10,
                                                    n = 0,
                                                    i;
                                                for (; o--;)
                                                    (i = Math.abs(e[o] - t)) > r / 2 && (i = r - i),
                                                        i < a && ((a = i), (n = o));
                                                return n;
                                            },
                                            O = () => {
                                                let e, r, o, a, u;
                                                for (n.clear(), e = 0; e < i; e++)
                                                    (r = t[e]),
                                                        (o = (p[e] / 100) * c[e]),
                                                        (u =
                                                            (a = r.offsetTop + o - l + d[0]) +
                                                            c[e] * gsap.getProperty(r, "scaleY")),
                                                        n
                                                            .to(
                                                                r,
                                                                {
                                                                    yPercent: g(((o - u) / c[e]) * 100),
                                                                    duration: u / $,
                                                                },
                                                                0
                                                            )
                                                            .fromTo(
                                                                r,
                                                                { yPercent: g(((o - u + _) / c[e]) * 100) },
                                                                {
                                                                    yPercent: p[e],
                                                                    duration: (o - u + _ - o) / $,
                                                                    immediateRender: !1,
                                                                },
                                                                u / $
                                                            )
                                                            .add("label" + e, a / $),
                                                        (s[e] = a / $);
                                                v = gsap.utils.wrap(0, n.duration());
                                            },
                                            x = () => {
                                                let { enterAnimation: e, leaveAnimation: o } = r,
                                                    a = n.duration() / t.length;
                                                t.forEach((t, r) => {
                                                    let i = e && e(t, a, r),
                                                        l =
                                                            i &&
                                                            n.duration() - v(s[r] - Math.min(a, i.duration())) <
                                                            a - 0.05;
                                                    i && n.add(i, l ? 0 : v(s[r] - i.duration())),
                                                        (i = o && o(t, a, r)),
                                                        (l = s[r] === n.duration()),
                                                        i && i.duration() > a && i.duration(a),
                                                        i && n.add(i, l ? 0 : s[r]);
                                                });
                                            },
                                            k = (e) => {
                                                let t = n.progress();
                                                n.progress(0, !0),
                                                    E(),
                                                    e && O(),
                                                    S(),
                                                    x(),
                                                    e && n.draggable ? n.time(s[u], !0) : n.progress(t, !0);
                                            },
                                            q = () => k(!0),
                                            L;
                                        function A(e, t) {
                                            (t = m(t)), Math.abs(e - u) > i / 2 && (e += e > u ? -i : i);
                                            let r = gsap.utils.wrap(0, i, e),
                                                o = s[r];
                                            return (
                                                o > n.time() != e > u && (o += n.duration() * (e > u ? 1 : -1)),
                                                t.revolutions &&
                                                ((o += n.duration() * Math.round(t.revolutions)),
                                                    delete t.revolutions),
                                                (o < 0 || o > n.duration()) && (t.modifiers = { time: v }),
                                                (u = r),
                                                (t.overwrite = !0),
                                                gsap.killTweensOf(L),
                                                n.tweenTo(o, t)
                                            );
                                        }
                                        if (
                                            (gsap.set(t, { y: 0 }),
                                                E(),
                                                O(),
                                                S(),
                                                x(),
                                                window.addEventListener("resize", q),
                                                (n.elements = t),
                                                (n.next = (e) => A(u + 1, e)),
                                                (n.previous = (e) => A(u - 1, e)),
                                                (n.current = () => u),
                                                (n.toIndex = (e, t) => A(e, t)),
                                                (n.closestIndex = (e) => {
                                                    let t = b(s, n.time(), n.duration());
                                                    return e && (u = t), t;
                                                }),
                                                (n.times = s),
                                                n.progress(1, !0).progress(0, !0),
                                                r.reversed && (n.vars.onReverseComplete(), n.reverse()),
                                                r.draggable && "function" == typeof Draggable)
                                        ) {
                                            L = document.createElement("div");
                                            let C = gsap.utils.wrap(0, 1),
                                                T,
                                                P,
                                                j,
                                                R = () => n.progress(C(P + (j.startY - j.y) * T)),
                                                I = () => n.closestIndex(!0);
                                            "undefined" == typeof InertiaPlugin &&
                                                console.warn(
                                                    "InertiaPlugin required for momentum-based scrolling and snapping. https://gsap.com/pricing"
                                                ),
                                                (j = Draggable.create(L, {
                                                    trigger: t[0].parentNode,
                                                    type: "y",
                                                    onPressInit() {
                                                        gsap.killTweensOf(n),
                                                            (P = n.progress()),
                                                            k(),
                                                            (T = 1 / _),
                                                            gsap.set(L, { y: -(P / T) });
                                                    },
                                                    onDrag: R,
                                                    onThrowUpdate: R,
                                                    inertia: !0,
                                                    snap(e) {
                                                        let t = -(e * T) * n.duration(),
                                                            r = v(t),
                                                            o = s[b(s, r, n.duration())] - r;
                                                        return (
                                                            Math.abs(o) > n.duration() / 2 &&
                                                            (o += o < 0 ? n.duration() : -n.duration()),
                                                            -((t + o) / n.duration() / T)
                                                        );
                                                    },
                                                    onRelease: I,
                                                    onThrowComplete: I,
                                                })[0]),
                                                (n.draggable = j);
                                        }
                                        return (
                                            n.closestIndex(!0),
                                            e && e(t[u], u),
                                            (o = n),
                                            () => window.removeEventListener("resize", q)
                                        );
                                    }),
                                    o);
                        return (a._layer = { ...e, velocity: 0, currentScale: e.baseSpeed, direction: 1 }), a;
                    }),
                        t = Observer.create({
                            type: "wheel",
                            wheelSpeed: 1,
                            onChangeY(t) {
                                let r = t.deltaY;
                                e.forEach((e) => {
                                    let t = e._layer;
                                    r > 0 ? (t.direction = 1) : r < 0 && (t.direction = -1),
                                        (t.velocity += r * t.speedFactor);
                                });
                            },
                        });
                    gsap.ticker.add(() => {
                        e.forEach((e) => {
                            let t = e._layer;
                            t.velocity *= t.friction;
                            let r = t.baseSpeed * t.direction + t.velocity;
                            (t.currentScale = gsap.utils.interpolate(t.currentScale, r, 0.15)),
                                e.timeScale(t.currentScale);
                        });
                    }),
                        mediaQuery.matches && t.disable();
                },
                onComplete() {
                    let e = document.querySelector(".m_follow"),
                        t = new SplitText(".m_follow p", { type: "words" });
                    gsap.set(t.words, { y: "100%" }), gsap.set(e, { display: "block" });
                    let r = gsap
                        .timeline({ paused: !0 })
                        .to(t.words, { y: "0%", ease: "power3.inOut", duration: 0.65, stagger: { amount: 0.05 } }, "<");
                    document.querySelectorAll(".m_follow--trigger").forEach((e) => {
                        e.addEventListener("pointerenter", () => {
                            r.timeScale(1).play();
                        }),
                            e.addEventListener("pointerleave", () => {
                                r.timeScale(2).reverse();
                            });
                    }),
                        gsap.set(e, { xPercent: -50, yPercent: -100 });
                    let o = gsap.quickSetter(e, "x", "px"),
                        n = gsap.quickSetter(e, "y", "px");
                    window.addEventListener("mousemove", (e) => {
                        o(e.x), n(e.y);
                    });
                    let i = document.querySelector(".page_slider"),
                        l = i.querySelectorAll(".slide_wrap"),
                        s = document.querySelector(".nav");
                    l.forEach((e) => {
                        let t = e.querySelector("h2, h1"),
                            r = e.querySelector("p");
                        new SplitText(t, { type: "lines, words", wordsClass: "split_chars", mask: "lines" }),
                            new SplitText(r, { type: "lines, words", wordsClass: "split_chars", mask: "lines" });
                    });
                    let c = !1,
                        d = document.querySelectorAll(".next_slide");
                    d.forEach((e) => {
                        e.addEventListener("click", () => {
                            !(function e() {
                                if (!c) {
                                    c = !0;
                                    let t = Flip.getState(l);
                                    gsap.timeline({
                                        onStart() {
                                            i.firstElementChild.nextElementSibling.classList.add("autoplay"),
                                                i.firstElementChild.classList.remove("autoplay"),
                                                document.querySelectorAll(".head_image").forEach((e) => {
                                                    e.style.pointerEvents = "none";
                                                }),
                                                document.querySelectorAll(".m_follow--trigger").forEach((e) => {
                                                    e.style.pointerEvents = "none";
                                                });
                                        },
                                    })
                                        .fromTo(
                                            i.firstElementChild,
                                            { transformOrigin: "right" },
                                            { x: "-100%", scaleX: 1.5, duration: 2, ease: "power3.inOut" }
                                        )
                                        .fromTo(
                                            i.firstElementChild.nextElementSibling,
                                            { transformOrigin: "left", scaleX: 1.5 },
                                            {
                                                x: "-100%",
                                                scaleX: 1,
                                                duration: 2,
                                                ease: "power3.inOut",
                                                onComplete() {
                                                    gsap.to(i.children, { clearProps: "all", duration: 0 }),
                                                        i.appendChild(i.firstElementChild),
                                                        l.forEach((e) => {
                                                            e.classList.remove("active");
                                                        }),
                                                        i.firstElementChild.classList.add("active"),
                                                        i.firstElementChild.classList.contains("home")
                                                            ? s.classList.remove("white")
                                                            : s.classList.add("white"),
                                                        i.firstElementChild.classList.contains("home")
                                                            ? window.verticalLoops.forEach((e) => e.play())
                                                            : window.verticalLoops.forEach((e) => e.pause()),
                                                        Flip.from(t, { duration: 0 }),
                                                        (c = !1),
                                                        document.querySelectorAll(".head_image").forEach((e) => {
                                                            e.style.pointerEvents = "auto";
                                                        }),
                                                        document.querySelectorAll(".m_follow--trigger").forEach((e) => {
                                                            e.style.pointerEvents = "auto";
                                                        });
                                                },
                                            },
                                            "<"
                                        )
                                        .fromTo(
                                            i.firstElementChild.nextElementSibling.querySelectorAll(".split_chars"),
                                            { y: "100%" },
                                            { y: "0%", duration: 2, ease: "power3.inOut", stagger: { amount: 0.25 } },
                                            "<+=.4"
                                        )
                                        .fromTo(
                                            i.firstElementChild.nextElementSibling.querySelector(".content_block"),
                                            { x: "-100%" },
                                            { x: "0%", duration: 2, ease: "power3.inOut" },
                                            "<"
                                        )
                                        .fromTo(
                                            i.firstElementChild.nextElementSibling.querySelector(".link"),
                                            { y: "0.5em", opacity: 0 },
                                            { y: "0em", opacity: 1, duration: 2, ease: "power3.inOut" },
                                            "<"
                                        );
                                }
                            })();
                        });
                    }),
                        a.eventCallback("onComplete", () => {
                            document.querySelector(".site_wrap").classList.remove("animating");
                        });
                    let p = document.querySelectorAll(".project_slide--inner>*:not(.project_content)"),
                        u = document.querySelectorAll(".project_slide--inner");
                    u.length > 0 &&
                        u.forEach((t) => {
                            let r = t.querySelector(".open_pc"),
                                o = t.querySelector(".close_project"),
                                a = t.querySelector(".project_content"),
                                n = gsap
                                    .timeline({ paused: !0 })
                                    .to(a, { display: "flex", duration: 0 })
                                    .to(
                                        ".popup_overlay.project",
                                        { opacity: 1, duration: 0.25, ease: "power3.inOut" },
                                        "<"
                                    )
                                    .to(e, { opacity: 0, duration: 0.15, ease: "power2.inOut" })
                                    .to(d, { pointerEvents: "none", duration: 0 })
                                    .to(
                                        ".nav",
                                        { opacity: 0, pointerEvents: "none", duration: 0.2, ease: "power1.inOut" },
                                        "<"
                                    )
                                    .to(
                                        ".nsb_wrap",
                                        { opacity: 0, pointerEvents: "none", duration: 0.2, ease: "power1.inOut" },
                                        "<"
                                    )
                                    .fromTo(
                                        a,
                                        { scaleX: 2, x: "-100%", transformOrigin: "right" },
                                        { x: "0%", scaleX: 1, duration: 1, ease: "power3.inOut" },
                                        "<"
                                    )
                                    .fromTo(
                                        a.children,
                                        { y: "2em", opacity: 0 },
                                        { y: "0em", opacity: 1, stagger: 0.1, duration: 1, ease: "power3.inOut" },
                                        "<"
                                    );
                            r.addEventListener("click", () => {
                                n.play(), Observer.getAll().forEach((e) => e.disable());
                            }),
                                o.addEventListener("click", () => {
                                    n.reverse(), Observer.getAll().forEach((e) => e.enable());
                                }),
                                p.forEach((e) => {
                                    e.addEventListener("click", () => {
                                        n.progress() > 0.1 &&
                                            (n.reverse(), Observer.getAll().forEach((e) => e.enable()));
                                    });
                                }),
                                document.addEventListener("keydown", (e) => {
                                    "Escape" === e.key &&
                                        n.progress() > 0.1 &&
                                        (n.reverse(), Observer.getAll().forEach((e) => e.enable()));
                                });
                        });
                    let y = document.querySelectorAll(".open_cp"),
                        m = document.querySelectorAll(".close_popup, .site_wrap>*:not(.contact_popup)"),
                        $ = gsap
                            .timeline({
                                paused: !0,
                                onComplete() {
                                    document.querySelector(".contact_popup .input_wrap:first-child input").focus();
                                },
                            })
                            .to(d, { pointerEvents: "none", duration: 0 }, "<")
                            .to(
                                ".popup_overlay:not(.project)",
                                { opacity: 1, duration: 0.25, ease: "power3.inOut" },
                                "<"
                            )
                            .to(".head_image", { pointerEvents: "none", duration: 0 }, "<")
                            .fromTo(
                                ".contact_popup",
                                { scaleX: 2, x: "100%", transformOrigin: "left" },
                                { x: "0%", scaleX: 1, duration: 1, ease: "power3.inOut" }
                            )
                            .to(
                                ".site_wrap>*:not(.contact_popup)",
                                { pointerEvents: "none", duration: 1, ease: "power3.inOut" },
                                "<"
                            )
                            .fromTo(
                                ".contact_popup>*",
                                { opacity: 0 },
                                { opacity: 1, stagger: 0.1, duration: 1, ease: "power3.inOut" },
                                "<"
                            );
                    y.length > 0 &&
                        (y.forEach((e) => {
                            e.addEventListener("click", () => {
                                $.play(), Observer.getAll().forEach((e) => e.disable());
                            });
                        }),
                            m.forEach((e) => {
                                e.addEventListener("click", () => {
                                    $.progress() > 0.1 && ($.reverse(), Observer.getAll().forEach((e) => e.enable()));
                                });
                            }),
                            document.addEventListener("keydown", (e) => {
                                "Escape" === e.key && ($.reverse(), Observer.getAll().forEach((e) => e.enable()));
                            }));
                    let g = document.querySelectorAll(".open_ap"),
                        f = document.querySelector(".close_ap"),
                        h = gsap
                            .timeline({ paused: !0 })
                            .to(
                                ".about_popup",
                                { opacity: 1, pointerEvents: "auto", duration: 1, ease: "power3.inOut" },
                                "<"
                            );
                    g.length > 0 &&
                        (g.forEach((e) => {
                            e.addEventListener("click", () => {
                                h.play(), Observer.getAll().forEach((e) => e.disable());
                            });
                        }),
                            f.addEventListener("click", () => {
                                h.reverse(), Observer.getAll().forEach((e) => e.enable());
                            }),
                            document.addEventListener("keydown", (e) => {
                                "Escape" === e.key && (h.reverse(), Observer.getAll().forEach((e) => e.enable()));
                            }));
                },
                duration: 1.5,
                ease: "power2.inOut",
            },
            "<+=.25"
        )
        .to(".nsb_wrap", { opacity: 1, duration: 1.25, ease: "power2.inOut" }, "<")
        .to(r.words, { y: "0%", stagger: { amount: 0.1 }, duration: 1.25, ease: "power2.inOut" }, "<")
        .to(o.words, { y: "0%", stagger: { amount: 0.1 }, duration: 1.25, ease: "power2.inOut" }, "<")
        .to(".home_cb .link", { opacity: 1, duration: 1.25, ease: "power2.inOut" }, "<")
        .to(".home_cb", { y: "0%", duration: 1.25, ease: "power2.inOut" }, "<");
    document.querySelectorAll(".project_content").forEach((e) => {
        let t = e.querySelector(".success_message");
        if (t) {
            let r = new MutationObserver(() => {
                "block" === window.getComputedStyle(t).display &&
                    ((t.closest(".project_content").scrollTop = t.closest(".project_content").scrollHeight),
                        r.disconnect());
            });
            r.observe(t, { attributes: !0, attributeFilter: ["style", "class"] });
        }
    });
}
(window.verticalLoops = window.verticalLoops || []), fontsReady();