Add initial animation for popping balloons

src/components/blog/Balloon.astro

···
           --timing: ${utils.getRandom(blog.balloons.timing)}s;
           `}
 >
-  <div
+  <button
     class="balloon"
     style={`--width: ${utils.getRandom(blog.balloons.size[0])}rem;
             --height: ${utils.getRandom(blog.balloons.size[1])}rem;`}
+    tabindex="-1"
+    data-min-time={blog.balloons.time[0]}
+    data-max-time={blog.balloons.time[1]}
   >
     <div class="cable-tie"></div>
     <div class="tie"></div>
-  </div>
+  </button>
 </div>
+
+<script>
+  const balloons = document.querySelectorAll(".balloon");
+  console.log(balloons);
+  balloons.forEach((el) => {
+    if (!(el instanceof HTMLButtonElement)) return;
+
+    // reenable tab index as functional
+    el.tabIndex = 0;
+
+    const mintime = Number(el.dataset["minTime"] ?? "0");
+    const maxtime = Number(el.dataset["maxTime"] ?? "0");
+
+    el.addEventListener("click", () => {
+      const postParent = el.parentElement?.parentElement;
+      if (!postParent) throw new Error("No parent 2 levels up!!!");
+      console.log("clicked! popping", el, "with post", postParent);
+
+      el.blur();
+
+      el.animate(
+        [
+          {
+            opacity: 1,
+          },
+          {
+            opacity: 0,
+          },
+          {
+            duration: 500,
+          },
+        ],
+        {}
+      ).finished.then(() =>
+        el.animate(
+          [
+            { opacity: 0, scale: 0 },
+            { opacity: 1, offset: 0.001 },
+            { scale: 1 },
+          ],
+          {
+            duration: (mintime + Math.random() * (maxtime - mintime)) * 1000,
+            easing: "ease-out",
+          }
+        )
+      );
+    });
+  });
+</script>
 
 <style>
   @property --rot-0 {
···
   }
 
   .balloon {
+    border: none;
+
     width: var(--width);
     height: var(--height);
     border-radius: calc(var(--width) / 2);
···
     background: var(--colour);
     /* 95% instead of 100% to prevent gaps between cable */
     translate: -50% -95%;
+    transform-origin: bottom;
     rotate: calc(-1 * var(--rot-0));
 
     @media (prefers-reduced-motion: no-preference) {
       animation: infinite var(--timing) linear inv-tilt;
     }
+
+    transition: scale 0.2s;
+
+    &:focus {
+      outline: none;
+      scale: 1.1;
+    }
   }
 
   .cable-tie {
     width: 1.75rem;
-    height: .5rem;
+    height: 0.5rem;
 
     position: absolute;
-    bottom: -.25rem;
+    bottom: -0.25rem;
     left: 50%;
     translate: -50%;
     z-index: 1;

src/config.ts

···
       [10, 20],
     ],
     opacity: [0.6, 0.9],
+    time: [2, 5],
   },
 } as const;