From e1adfbcd06affb8b2d44efef1187cf06726389a8 Mon Sep 17 00:00:00 2001
From: Jer Miller <jeremie.miller@gmail.com>
Date: Sun, 15 Feb 2026 08:50:26 -0700
Subject: [PATCH] add vitality hover easter egg to site title

Hovering (desktop) or tapping (mobile) the "vit" heading on v-it.org
smoothly fades in "ality" in light grey, revealing the word "vitality."
---
 docs/index.html | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/docs/index.html b/docs/index.html
index 2ef60f9..a0ac5b4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -28,6 +28,21 @@
       margin: 0;
       font-size: 2rem;
       line-height: 1.2;
+      cursor: default;
+    }
+
+    .egg {
+      opacity: 0;
+      transition: opacity 200ms ease;
+      color: #9ca3af;
+    }
+
+    header h1:hover .egg {
+      opacity: 1;
+    }
+
+    header h1.tapped .egg {
+      opacity: 1;
     }
 
     .tagline {
@@ -142,7 +157,7 @@
   <div class="container">
     <header>
       <div class="header-bar">
-        <h1>vit</h1>
+        <h1>vit<span class="egg">ality</span></h1>
         <nav>
           <a href="#">home</a>
           <a href="#doctrine">doctrine</a>
@@ -232,6 +247,18 @@
 
     window.addEventListener('hashchange', navigate);
     navigate();
+
+    // Easter egg tap toggle
+    document.querySelector('header h1').addEventListener('touchstart', function(e) {
+      this.classList.toggle('tapped');
+    });
+
+    document.addEventListener('touchstart', function(e) {
+      const h1 = document.querySelector('header h1');
+      if (!h1.contains(e.target)) {
+        h1.classList.remove('tapped');
+      }
+    });
   </script>
 </body>
 </html>
-- 
2.51.2