window.__STYLEGALLERY_ASSETS__={};
console.clear();
const erToggle = document.querySelector("#erToggle");
const exitSlider = document.querySelector("#exitSlider");
const exitVal = document.querySelector("#exitVal");
let exitTs = 2.5;
exitSlider.addEventListener("input", () => {
  exitTs = parseFloat(exitSlider.value);
  exitVal.textContent = exitTs + "×";
});
function er(val) {
  return erToggle.checked ? val || true : false;
}
let btnTl;
function initBtn() {
  if (btnTl) {
    btnTl.kill();
  }
  gsap.set("#hoverBtn", { clearProps: "all" });
  btnTl = gsap.timeline({ paused: true }).to("#hoverBtn", {
    scale: 1.35,
    duration: 1.2,
    ease: "elastic.out(1.2, 0.3)",
    easeReverse: er("power2.out")
  }, 0);
}
initBtn();
document.querySelector("#hoverBtn").addEventListener("mouseenter", () => {
  btnTl.timeScale(1).play();
});
document.querySelector("#hoverBtn").addEventListener("mouseleave", () => {
  btnTl.timeScale(erToggle.checked ? exitTs : 1).reverse();
});
let ddOpen = false;
let ddTl;
const ddMenu = document.querySelector("#dropdownMenu");
const ddTrigger = document.querySelector("#dropdownTrigger");
const ddArrow = document.querySelector(".dd-arrow");
function initDD() {
  if (ddTl) {
    ddTl.kill();
  }
  gsap.set(ddMenu, { autoAlpha: 0, yPercent: -30, scale: 0.7 });
  gsap.set(ddArrow, { rotation: 0 });
  gsap.set(".dropdown-item", { opacity: 1, x: 0 });
  ddMenu.classList.remove("open");
  ddOpen = false;
  ddTl = gsap.timeline({ paused: true }).to(ddArrow, {
    rotation: 180,
    duration: 0.9,
    ease: "elastic.out(1.2, 0.3)",
    easeReverse: er("power2.inOut")
  }, 0).to(ddMenu, {
    autoAlpha: 1,
    yPercent: 0,
    scale: 1,
    duration: 1,
    ease: "elastic.out(1.2, 0.3)",
    easeReverse: er("power3.out")
  }, 0).from(".dropdown-item", {
    opacity: 0,
    x: -20,
    duration: 0.5,
    ease: "back.out(3)",
    easeReverse: er("power2.out"),
    stagger: 0.07
  }, 0.1);
}
initDD();
ddTrigger.addEventListener("click", (e) => {
  e.stopPropagation();
  ddOpen = !ddOpen;
  if (ddOpen) {
    ddMenu.classList.add("open");
    ddTl.timeScale(1).play();
  } else {
    ddTl.eventCallback("onReverseComplete", () => ddMenu.classList.remove("open"));
    ddTl.timeScale(erToggle.checked ? exitTs : 1).reverse();
  }
});
document.addEventListener("click", () => {
  if (ddOpen) {
    ddOpen = false;
    ddTl.eventCallback("onReverseComplete", () => ddMenu.classList.remove("open"));
    ddTl.timeScale(erToggle.checked ? exitTs : 1).reverse();
  }
});
let tipTl;
const tipBubble = document.querySelector("#tooltipBubble");
const tipWrap = document.querySelector("#tooltipWrap");
const tipTarget = document.querySelector(".tooltip-target");
function initTip() {
  if (tipTl) {
    tipTl.kill();
  }
  gsap.set(tipBubble, { autoAlpha: 0, y: 14, scale: 0.4 });
  gsap.set(tipTarget, { scale: 1 });
  tipTl = gsap.timeline({ paused: true }).to(tipBubble, {
    autoAlpha: 1,
    y: 0,
    scale: 1,
    duration: 1,
    ease: "elastic.out(1.2, 0.3)",
    easeReverse: er("power3.in")
  }, 0).to(tipTarget, {
    scale: 1.3,
    duration: 0.8,
    ease: "elastic.out(1.2, 0.3)",
    easeReverse: er("power3.in")
  }, 0);
}
initTip();
tipWrap.addEventListener("mouseenter", () => {
  tipTl.timeScale(1).play();
});
tipWrap.addEventListener("mouseleave", () => {
  tipTl.timeScale(erToggle.checked ? exitTs : 1).reverse();
});
erToggle.addEventListener("change", () => {
  initBtn();
  initDD();
  initTip();
});