window.__STYLEGALLERY_ASSETS__={};
gsap.registerPlugin(Draggable, InertiaPlugin, Physics2DPlugin);
const emitter = document.getElementById("emitter");
const container = document.createElement("div");
const emitterSize = 100;
const dotQuantity = 25;
const dotSizeMax = 20;
const dotSizeMin = 10;
const speed = 3;
const gravity = 3;
container.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;";
document.body.appendChild(container);
const explosion = createExplosion(container);
function createExplosion(container2) {
  const tl = gsap.timeline();
  for (let i = 0; i < dotQuantity; i++) {
    const dot = document.createElement("div");
    dot.className = "dot";
    const size = gsap.utils.random(dotSizeMin, dotSizeMax, 1);
    container2.appendChild(dot);
    const angle = Math.random() * Math.PI * 2;
    const length = Math.random() * (emitterSize / 2 - size / 2);
    gsap.set(dot, {
      x: Math.cos(angle) * length,
      y: Math.sin(angle) * length,
      width: size,
      height: size,
      xPercent: -50,
      yPercent: -50,
      force3D: true
    });
    tl.to(
      dot,
      {
        physics2D: {
          angle: angle * 180 / Math.PI,
          velocity: (100 + Math.random() * 250) * speed,
          gravity: 500 * gravity
        },
        duration: 1 + Math.random()
      },
      0
    ).to(
      dot,
      {
        opacity: 0,
        duration: 0.2,
        ease: "power2.inOut"
      },
      0.7
    );
  }
  return tl;
}
function explode(element) {
  const bounds = element.getBoundingClientRect();
  gsap.set(container, { x: bounds.left + bounds.width / 2, y: bounds.top + bounds.height / 2 });
  explosion.play(0);
}
explode(emitter);
emitter.addEventListener("click", () => explode(emitter));
Draggable.create("#emitter", {
  inertia: true,
  bounds: window,
  edgeResistance: 0.7
});