/*! 2024. 5. 2. 오후 4:59:11 */
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
(() => {
  // TODO: 메인 페이지 초기화
  const { utils, EventManager } = ShopbySkin;

  const { createPageScriptInstance } = utils;
  const pageScriptInstance = createPageScriptInstance('PC');
  // 외부스크립트 등록 기능. 삭제금지
  pageScriptInstance.appendPageScript('PAGE_SCRIPT', 'MAIN');

  EventManager.on('ON_API', (data) => {
    const { mallName = '' } = data?.mallConfig?.mall || {};

    const titleEl = document.head.querySelector('title');

    if (titleEl instanceof HTMLElement) {
      titleEl.innerText = mallName;
    }
  });
})();

/******/ })()
;
setTimeout(() => {
    const apBrand = (function () {
        let currentIndex = null;
        let wheelObserver = null;
        let anchorTrigger = null;
        let isScrolling = false;
        let isWheelSlides = false;

        const anchorAttr = '[data-scroll-anchor]';
        const anchorSections = document.querySelectorAll(`#main ${anchorAttr}`);
        const inner = document.querySelector('.ap-post__inner');
        const kv = document.querySelector('.ap-section--kv');
        //const intro = document.querySelector('.ap-section--intro');
        const videoS = document.querySelector('.ap-section--video');
        //const info = document.querySelector('.ap-section--info');
        //const pillar = document.querySelector('.ap-section--pillar');
        // const product = document.querySelector(".ap-section--product");
        const end = document.querySelector('.ap-section--end');
        const productClassName = 'ap-section--product';
        const productImgSwipers = [];
        const scrollToOffsetY = 0;

        // 誘몃뵒�댁옘由� 泥댄겕
        const mm = gsap.matchMedia();
        const options = {
            isMobile: "(max-width: 720px)",
            isDesktop: "(min-width: 721px)",
            isTablet: "(max-width: 1440px) and (orientation: portrait)",
        };

        const isAnchor = function (section) {
            if (section) {
                const dataAnchor = section.dataset.scrollAnchor;
                const dataIgnore = section.dataset.anchorIgnore;
                const dataAnchorAutoTarget = section.dataset.anchorAutoTarget;
                let result = null;

                mm.add(options, (ctx) => {
                    ctx.revert();
                    const { isMobile, isDesktop, isTablet } = ctx.conditions;
                    
                    if (dataAnchor && dataAnchor === 'true') {
                        const targetSection = section.querySelector(dataAnchorAutoTarget);
                        const getPos = targetSection && targetSection.getBoundingClientRect();
                        const deviceCheck = (isMobile && dataIgnore === 'mobile') || (isTablet && dataIgnore === 'mobile') || (isDesktop && dataIgnore === 'pc');

                        if (deviceCheck || dataIgnore === 'auto' && Math.trunc(info.offsetHeight) > window.innerHeight) {
                            result = false;
                        } else {
                            result = true;
                        }
                    }
                });
                
                return result;
            }
        };

        const isTouchEvt = function (e) {
            return e.touches && e.touches.length > 0;
        };

        const preventScroll = {
            disableObserver: function () {
                if (wheelObserver.isEnabled) {
                    wheelObserver.disable();
                    
                    debugConsole.update();
                }
            },
            enableObserver: function () {
                if (!wheelObserver.isEnabled) {
                    wheelObserver.enable();
                    
                    debugConsole.update();
                }
            }
        }

        const setCurrentIndex = function () {
            anchorSections.forEach((section, index) => {
                anchorTrigger = ScrollTrigger.create({
                    trigger: section,
                    id: `section${index}`,
                    start: `top-=1px top`,
                    end: 'bottom top',
                    onToggle: (self) => {
                        if (self.isActive) {
                            setToggleObserver(self);

                            debugConsole.update();
                        }
                    },
                    onUpdate: (self) => {
                        if (self.isActive) {
                            if (currentIndex !== index) {
                                currentIndex = index;
            
                                debugConsole.update();
                            }
                        }
                    },
                    onRefresh: (self) => {
                        if (self.isActive) {
                            currentIndex = index;
            
                            debugConsole.update();
                        }
                    },
                    invalidateOnRefresh: true,
                    preventOverlaps: true,
                    // markers: true

                });
            });
        };

        const setToggleObserver = function(st) {
            if (isScrolling) return;

            if (st.direction === -1) {
                if (!isAnchor(anchorSections[currentIndex])) {
                    // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                    preventScroll.disableObserver();
                } else {
                    preventScroll.enableObserver();
                }
            } else {
                if (!isAnchor(anchorSections[currentIndex]) || currentIndex === anchorSections.length - 1) {
                    // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                    preventScroll.disableObserver();
                } else {
                    preventScroll.enableObserver();
                }
            }
        };

        const setAnimateEffect = (function() {
            const createScrollTrigger = function(trigger, start, end, scrub = false, pin = false, animation = null) {
                ScrollTrigger.create({
                    trigger,
                    start,
                    end,
                    scrub,
                    pin,
                    animation,
                    toggleActions: 'play pause play reverse',
                    invalidateOnRefresh: true,
                    // markers:true,
                });
            }
            
            const kvEffect = function() {
            const header = kv.querySelector('.ap-section__header');
            const logo = header.querySelector('.ap-logo');
            const svg = logo.querySelector('svg');
            const paths = svg.querySelectorAll('.st0'); // Select all path elements
            const title = kv.querySelector('.ap-section__title');

                mm.add(options, (ctx) => {
                    ctx.revert();
                    const { isMobile } = ctx.conditions;

                    gsap.set(kv, { position: 'relative' });
                    gsap.set(logo, { zIndex: 1 });

                    const tl = gsap
                    .timeline()
                    .to(svg, {
                        scale: isMobile ? 1.6 : 3.76,
                        opacity: 0,
                        duration: 10,
                        ease: 'none',
                        delay: 0,
                        zIndex: 1,
                    })
                    .to(gsap.utils.toArray(paths), { // Convert NodeList to array
                        fill: '#fff',
                        duration: 10,
                        stagger: 0.1, // Add stagger effect to animate each path separately
                    }, '<')
                    //.fromTo(title, { yPercent: 20, opacity: 0}, { yPercent: 0, opacity: 1 }, '+=0.1');

                    createScrollTrigger(header, "top top", "bottom top", 1, logo, tl);
                });
            }

            const introEffect = function() {
                //const body = intro.querySelector('.ap-section__body');
                //const h2 = intro.querySelector('.ap-section__title');
                const videoWrapper = videoS.querySelector('.ap-video__wrapper');
                const videoEle = videoS.querySelector('.ap-video img');
                //const videoEleMo = videoS.querySelector('.ap-video video.only-mo');

                // const pauseVideo = function(video) {
                //     video.pause();
                //     video.currentTime = 0;
                // };

                const createST = function(clipPath, videoEle) {
                    const playAnimation = () => gsap.to(videoWrapper, { clipPath: 'circle(80% at 50% 50%)', ease: 'none' });
                    const resetClipPath = () => gsap.to(videoWrapper, {clipPath});

                    gsap.set(videoWrapper, { clipPath });

                    
                    ScrollTrigger.create({
                        trigger: videoS.querySelector('.ap-video'),
                        start: 'top-=2px top',
                        end: 'bottom top',
                        //onLeave: () => pauseVideo(videoEle),
                        onLeaveBack: () => {
                            //pauseVideo(videoEle);
                            resetClipPath();
                        },
                        onEnter: () => {
                            //videoEle.play();
                            playAnimation();
                        },
                        //onEnterBack: () => videoEle.play(),
                    });
                }

                //gsap.fromTo(h2, { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, ease: 'power2.out', scrollTrigger: h2 });

                mm.add(options, (ctx) => {
                    ctx.revert();
                    const { isMobile } = ctx.conditions;

                    if (isMobile) {
                        //videoEleMo.pause();
                        //createST("inset(10% round 2rem)", videoEleMo);
                    } else {
                        createST("circle(21% at 50% 50%)", videoEle);
                    }
                });
            };

            // const infoEffect = function() {
            //     const wrapper = info.querySelectorAll('.ap-section__body');
            //     const textWrapper = info.querySelector('.ap-text__wrapper');
            //     const imgBox = info.querySelector('.ap-img');

            //     ScrollTrigger.matchMedia({
            //         "(min-width: 1025px)": function(){
            //             // ScrollTrigger.getAll().forEach(trigger => trigger.kill());
            //             const end = () => `+=${textWrapper.querySelector(".ap-text__inner").scrollHeight} bottom`;
            //             createScrollTrigger(textWrapper, "top top", end, false, imgBox, null);
            //     },
            //         "(max-width: 1024px)": function(){
            //             // ScrollTrigger.getAll().forEach(trigger => trigger.kill());
            //             createScrollTrigger(wrapper, "top top", "bottom 80%", false, false, null);
            //         },
            //     })
            // };

            // const pillarEffect = function() {
            //     const body = pillar.querySelector(".ap-section__body");
            //     const inner = pillar.querySelector(".ap-section__inner");
            //     const text = pillar.querySelector(".ap-section__text");

            //     gsap.set(text, { yPercent: 20, opacity: 0 })
            //     const tl = gsap.timeline({
            //         onStart: () => {
            //             if (!wheelObserver.isEnabled && isAnchor(pillar.querySelector(anchorAttr))) {
            //                 scrollToSection(currentIndex + 1);
            //             }
            //         }
            //     });
            //     tl.fromTo(inner.querySelector(".ap-img"), { opacity: 1 }, { opacity: 0.3 }, "<").fromTo(text, { yPercent: 20, opacity: 0 }, { yPercent: 0, opacity: 1 }, "<");

            //     createScrollTrigger(body, "top-=60% top", "bottom top", false, false, tl);
            // }

            const endEffect = function() {
                createScrollTrigger(end.querySelector(".ap-section__body"), "top top", "bottom top", null, false, null);
            }

            const onInit = function() {
                kvEffect();
                introEffect();
                //pillarEffect();
                //infoEffect();
                endEffect();
            }
            
            return {
                init: onInit
            }
        })();

        const scrollToSection = function (index) {
            const targetSection = anchorSections[index] || anchorSections[currentIndex];
            let setOffsetObj = { y: targetSection, offsetY: scrollToOffsetY };

            if (isScrolling && !isAnchor(targetSection)) return;
            
            gsap.to(window, {
                duration: 1,
                scrollTo: setOffsetObj,
                ease: 'power2.inOut', // 遺��쒕윭�� �ㅽ겕濡ㅼ쓣 �꾪븳 easing
                onStart: () => {
                    isScrolling = true;

                    debugConsole.update();
                },
                onComplete: () => {
                    currentIndex = index;
                    isScrolling = false;

                    if (!isAnchor(anchorSections[currentIndex]) || currentIndex === anchorSections.length - 1) {
                        // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                        preventScroll.disableObserver();
                    } else {
                        preventScroll.enableObserver();
                    }

                    debugConsole.update();
                },
            });
        };

        // const scrollToPrevSection = function (observer) {
        //     if (currentIndex >= 0) {
        //         const currentSection = anchorSections[currentIndex];
        //         const isProductSection = currentSection && currentSection.classList.contains(productClassName);
        //         const isSectionInView = Math.trunc(currentSection.getBoundingClientRect().top) < scrollToOffsetY;

        //         const goPrevSection = function () {
        //             const prevIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
                    
        //             if (isSectionInView) {
        //                 scrollToSection(currentIndex);
        //             } else {
        //                 scrollToSection(prevIndex);
        //             }
        //         };

        //         if (isProductSection) {
        //             // product pillars �곸뿭 �덉쇅泥섎━
        //             const dataIndex = Number(currentSection.dataset.productSectionIndex);
        //             const imgSwiper = currentSection.querySelector('.swiper');
        //             const linkBtn = currentSection.querySelector('.ap-link.is-active');
        //             const textContent = currentSection.querySelector('.ap-text__content');

        //             const changeSlide = function () {
        //                 if (productImgSwipers[dataIndex].slides.length > 0) {
        //                     if (isWheelSlides) return;
                            
        //                     // wheel濡� �щ씪�대뱶 �섍린湲�
        //                     if (productImgSwipers[dataIndex].isBeginning || isSectionInView) {
        //                         // �щ씪�대뱶 泥ル쾲吏몄옣�쇰븣 �ㅼ쓬 �뱀뀡�쇰줈 �대룞
        //                         goPrevSection();
        //                     } else {
        //                         // �댁쟾 �щ씪�대뱶 蹂닿린
        //                         isWheelSlides = true;
        //                         productImgSwipers[dataIndex].slidePrev(1000, true);
        //                     }

        //                     debugConsole.update();
        //                 }
        //             };

        //             if (isAnchor(currentSection)) {
        //                 changeSlide();
        //             }
        //         } else {
        //             goPrevSection();
        //         }
        //     }
        // };

        // const scrollToNextSection = function (observer) {
        //     if (currentIndex < anchorSections.length - 1) {
        //         const currentSection = anchorSections[currentIndex];
        //         const isProductSection = currentSection && currentSection.classList.contains(productClassName);
        //         const isSectionInView = Math.trunc(currentSection.getBoundingClientRect().top) < scrollToOffsetY;

        //         const goNextSection = function () {
        //             const nextIndex = currentIndex + 1;
        //             scrollToSection(nextIndex);
        //         };

        //         if (isProductSection) {
        //             // product pillars �곸뿭 �덉쇅泥섎━
        //             const dataIndex = Number(currentSection.dataset.productSectionIndex);
        //             const imgSwiper = currentSection.querySelector('.swiper');
        //             const linkBtn = currentSection.querySelector('.ap-link.is-active');
        //             const textContent = currentSection.querySelector('.ap-text__content');

        //             const changeSlide = function () {
        //                 if (productImgSwipers[dataIndex].slides.length > 0) {
        //                     if (isWheelSlides) return;
                            
        //                     // wheel濡� �щ씪�대뱶 �섍린湲�
        //                     if (productImgSwipers[dataIndex].isEnd || isSectionInView) {
        //                         // �щ씪�대뱶 留덉�留됱옣�쇰븣�� �ㅼ쓬 �뱀뀡�쇰줈 �대룞
        //                         goNextSection();
        //                     } else {
        //                         // �ㅼ쓬 �щ씪�대뱶 蹂닿린
        //                         isWheelSlides = true;
        //                         productImgSwipers[dataIndex].slideNext(1000, true);
        //                     }

        //                     debugConsole.update();
        //                 }
        //             };

        //             if (isAnchor(currentSection)) {
        //                 changeSlide();
        //             }
        //         } else {
        //             goNextSection();
        //         }
        //     }
        // };

        const wheelEvt = function () {
            wheelObserver = ScrollTrigger.observe({
                target: window,
                type: 'wheel,touch,pointer',
                dragMinimum: 30,
                tolerance: 30,
                lockAxis: true, // drag �쒗븳 - �띿뒪�� �좏깮�� �꾪븳 �붾㈃ �쒕옒洹� �됱쐞 �� 怨좊젮
                preventDefault: true,
                onUp: (self) => {
                    const e = self.event;

                    if (isScrolling) return;

                    if (currentIndex !== null) {
                        if (isTouchEvt(e)) {
                            // touch �대깽�� �쇰븣�� 諛섎� 諛⑺뼢 - mobile only
                            //scrollToNextSection(self);
                        } else {
                            //scrollToPrevSection(self);
                        }
                        
                        debugConsole.update();
                    }
                },
                onDown: (self) => {
                    const e = self.event;

                    if (isScrolling) return;

                    if (currentIndex !== null) {
                        if (isTouchEvt(e)) {
                            // touch �대깽�� �쇰븣�� 諛섎� 諛⑺뼢 - mobile only
                            //scrollToPrevSection(self);
                        } else {
                            if (wheelObserver.isEnabled) {
                                //scrollToNextSection(self);
                            }
                        }

                        debugConsole.update();
                    }
                }
            });
        };

        // �붾쾭源낆슜 �ㅽ겕由쏀듃
        const debugConsole = (function () {
            let consoleEl = null;

            const onUpdate = function () {
                if (consoleEl) {
                    if (consoleEl.querySelector('.log')) {
                        consoleEl.querySelector('.log').textContent = `
                            currentIndex: ${currentIndex} / 
                            isScrolling : ${isScrolling} / 
                            isWheelSlides : ${isWheelSlides} / 
                            wheelObserver.isEnabled : ${wheelObserver && wheelObserver.isEnabled}
                        `;
                    }

                    if (consoleEl.querySelectorAll('button').length > 0) {
                        consoleEl.querySelectorAll('button').forEach((button, index) => {
                            if (index === currentIndex) {
                                button.classList.add('is-active');
                            } else {
                                button.classList.remove('is-active');
                            }
                        });
                    }
                }
            };

            const onInit = function () {
                const newEl = document.createElement('div');
                newEl.classList.add('debug-console');
                document.body.appendChild(newEl);
                consoleEl = document.querySelector('.debug-console');

                if (consoleEl) {
                    let html = '';

                    html += '<p class="log"></p>';
                    anchorSections.forEach((section, index) => {
                        const isActive = index === currentIndex ? 'is-active' : '';
                        html += `<button type="button" onclick="apBrand.toSection(${index})" class="${isActive}">${index}</button>`;
                    });
                    consoleEl.insertAdjacentHTML('beforeend', html);
                    onUpdate();
                }
            };

            return {
                init: onInit,
                update: onUpdate,
            };
        })();

        const onInit = function () {
            gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
            
            setAnimateEffect.init();
            //setProductPillars();
            wheelEvt();
            setCurrentIndex();
            AOS.init();

            // debugConsole.init(); // 媛쒕컻 �묒뾽�� - 諛고룷�쒖뿉�� 二쇱꽍 泥섎━
        };

        ScrollTrigger.config({
            autoRefreshEvents: 'visibilitychange,DOMContentLoaded,load',
            limitCallbacks: true
        });
        
        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);

            resizeTimer = setTimeout(() => {
                ScrollTrigger.refresh();
                AOS.refresh()
            }, 250);
        });
        
        return {
            init: onInit,
            toSection: scrollToSection,
        };
    })();
   apBrand.init();
}, 500);