From 3383b384a15bdc0046c706f5d340989da243de38 Mon Sep 17 00:00:00 2001
From: Steven Welch <steven@makeitwork.cloud>
Date: Mon, 7 Sep 2026 22:59:49 -0600
Subject: [PATCH 1/2] Add click/tap celebration interaction to employee koan
 ornament

Replace the decorative aria-hidden span with a semantic button that plays
a one-shot squash/bounce celebration with blue-accent glow on activation,
while keeping the continuous float animation, sprite geometry, and all
surrounding copy, layout, tokens, and assets unchanged.

- button.koan-ornament with aria-label "Celebrate enlightenment"; SVG aria-hidden
- 280ms employeeCelebrate keyframes on the SVG (wrapper float untouched)
- focus-visible outline using the existing --focus-ring token
- prefers-reduced-motion: float and celebration animation/glow disabled,
  button and focus behavior retained
- minimal JS replays the class on each activation and removes it after
  the effect (animationend + timeout fallback)
---
 makeitwork.cloud/index.html | 72 +++++++++++++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 3 deletions(-)

diff --git a/makeitwork.cloud/index.html b/makeitwork.cloud/index.html
index f59b905..feb1984 100644
--- a/makeitwork.cloud/index.html
+++ b/makeitwork.cloud/index.html
@@ -183,6 +183,11 @@
         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;
       }
 
@@ -192,6 +197,7 @@
         height: 100%;
         overflow: hidden;
         image-rendering: pixelated;
+        transform-origin: 50% 100%;
       }
 
       .koan-ornament .koan-skin,
@@ -216,6 +222,10 @@
         fill: var(--bg);
       }
 
+      .koan-ornament.koan-celebrating svg {
+        animation: employeeCelebrate 280ms ease-out;
+      }
+
       .subheader {
         margin: 0;
         max-width: 34ch;
@@ -394,6 +404,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 +435,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 +531,11 @@
           animation: none;
         }
 
+        .koan-ornament.koan-celebrating svg {
+          animation: none;
+          filter: none;
+        }
+
         .resource,
         .contact-icon,
         .install-banner,
@@ -666,10 +701,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 +754,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>
@@ -925,7 +966,7 @@ <h1 class="site-title" itemprop="name">MAKE IT WORK</h1>
         <a class="contact-icon" href="https://mega.nz/C!Kws3DD7J" title="MEGA"
           ><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path
-              d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6 18h-3.5v-7.5L12 15l-2.5-4.5V18H6V6h3.5l2.5 4.5L14.5 6H18v12z"
+              d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12 12-5.373 12-12S18.627 0 12 0zm6 18h-3.5v-7.5L12 15l-2.5-4.5V18H6V6h3.5l2.5 4.5L14.5 6H18v12z"
             /></svg
         ></a>
         <a
@@ -966,6 +1007,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");

From 7c7ed1698f1c3b594081e820b1f99ac3f8f80326 Mon Sep 17 00:00:00 2001
From: Steven Welch <steven@makeitwork.cloud>
Date: Mon, 7 Sep 2026 23:28:25 -0600
Subject: [PATCH 2/2] Fix MEGA contact SVG path regression and widen ornament
 hit area

Commit 3383b384 accidentally inserted a duplicated "12-5.373 12-12 "
segment into the MEGA contact icon's path data. Restore the path d
attribute exactly to its base-main value.

Also expand the koan-ornament button's pointer target to 24px wide with
a transparent ::before pseudo-element (4px horizontal outsets), without
scaling or repositioning the visible 16x32 SVG. Celebration behavior,
semantics, keyboard/focus, reduced-motion, and PWA behavior unchanged.
---
 makeitwork.cloud/index.html | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/makeitwork.cloud/index.html b/makeitwork.cloud/index.html
index feb1984..28a2ac3 100644
--- a/makeitwork.cloud/index.html
+++ b/makeitwork.cloud/index.html
@@ -180,6 +180,7 @@
 
       .koan-ornament {
         display: block;
+        position: relative;
         width: 1rem;
         height: 2rem;
         flex: 0 0 auto;
@@ -191,6 +192,17 @@
         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%;
@@ -966,7 +978,7 @@ <h1 class="site-title" itemprop="name">MAKE IT WORK</h1>
         <a class="contact-icon" href="https://mega.nz/C!Kws3DD7J" title="MEGA"
           ><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path
-              d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12 12-5.373 12-12S18.627 0 12 0zm6 18h-3.5v-7.5L12 15l-2.5-4.5V18H6V6h3.5l2.5 4.5L14.5 6H18v12z"
+              d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm6 18h-3.5v-7.5L12 15l-2.5-4.5V18H6V6h3.5l2.5 4.5L14.5 6H18v12z"
             /></svg
         ></a>
         <a