feat: celebrate employee ornament on activation

makeitwork.cloud/index.html

@@ -180,18 +180,36 @@
 
       .koan-ornament {
         display: block;
+        position: relative;
         width: 1rem;
         height: 2rem;
         flex: 0 0 auto;
+        padding: 0;
+        border: none;
+        background: none;
+        color: inherit;
+        cursor: pointer;
         animation: employeeFloat 2.8s ease-in-out infinite alternate;
       }
 
+      /* Transparent hit-area expansion: keeps the visible 16x32 sprite
+         unchanged while widening the pointer target to 24px. */
+      .koan-ornament::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -4px;
+        right: -4px;
+      }
+
       .koan-ornament svg {
         display: block;
         width: 100%;
         height: 100%;
         overflow: hidden;
         image-rendering: pixelated;
+        transform-origin: 50% 100%;
       }
 
       .koan-ornament .koan-skin,
@@ -216,6 +234,10 @@
         fill: var(--bg);
       }
 
+      .koan-ornament.koan-celebrating svg {
+        animation: employeeCelebrate 280ms ease-out;
+      }
+
       .subheader {
         margin: 0;
         max-width: 34ch;
@@ -394,6 +416,7 @@
 
       .resource:focus-visible,
       .contact-icon:focus-visible,
+      .koan-ornament:focus-visible,
       .install-btn:focus-visible,
       .install-dismiss:focus-visible {
         outline: 2px solid var(--focus-ring);
@@ -424,6 +447,25 @@
         }
       }
 
+      @keyframes employeeCelebrate {
+        0% {
+          transform: scale(1, 1);
+          filter: none;
+        }
+        30% {
+          transform: scale(1.15, 0.85);
+          filter: drop-shadow(0 0 4px var(--accent));
+        }
+        60% {
+          transform: scale(0.92, 1.1);
+          filter: drop-shadow(0 0 2px var(--accent));
+        }
+        100% {
+          transform: scale(1, 1);
+          filter: none;
+        }
+      }
+
       @keyframes flicker {
         0% {
           opacity: 0.75;
@@ -501,6 +543,11 @@
           animation: none;
         }
 
+        .koan-ornament.koan-celebrating svg {
+          animation: none;
+          filter: none;
+        }
+
         .resource,
         .contact-icon,
         .install-banner,
@@ -666,10 +713,16 @@
       <h1 class="site-title" itemprop="name">MAKE IT WORK</h1>
       <div class="koan-rule" aria-hidden="true"></div>
       <div class="koan-copy">
-        <span class="koan-ornament" aria-hidden="true">
+        <button
+          type="button"
+          class="koan-ornament"
+          id="koanOrnament"
+          aria-label="Celebrate enlightenment"
+        >
           <svg
             viewBox="0 0 16 32"
             focusable="false"
+            aria-hidden="true"
             shape-rendering="crispEdges"
           >
             <g class="koan-hair">
@@ -713,7 +766,7 @@ <h1 class="site-title" itemprop="name">MAKE IT WORK</h1>
               <rect x="7" y="21" width="2" height="1" />
             </g>
           </svg>
-        </span>
+        </button>
         <p class="subheader">
           Upon hearing this, the employee was enlightened.
         </p>
@@ -966,6 +1019,31 @@ <h1 class="site-title" itemprop="name">MAKE IT WORK</h1>
         navigator.serviceWorker.register("/sw.js").catch(() => {});
       }
 
+      (() => {
+        const ornament = document.getElementById("koanOrnament");
+        if (!ornament) return;
+        let celebrateTimer = null;
+
+        ornament.addEventListener("click", () => {
+          // Replay the one-shot effect: remove, force reflow, re-add.
+          ornament.classList.remove("koan-celebrating");
+          void ornament.offsetWidth;
+          ornament.classList.add("koan-celebrating");
+          clearTimeout(celebrateTimer);
+          celebrateTimer = setTimeout(
+            () => ornament.classList.remove("koan-celebrating"),
+            300,
+          );
+        });
+
+        ornament.addEventListener("animationend", (e) => {
+          if (e.animationName === "employeeCelebrate") {
+            ornament.classList.remove("koan-celebrating");
+            clearTimeout(celebrateTimer);
+          }
+        });
+      })();
+
       (() => {
         const banner = document.getElementById("installBanner");
         const installBtn = document.getElementById("installBtn");