Revert to CSS stroke-based glow approach (pre-SVG)

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

Author: 3 people

docs/projects/nthpartyfinder/index.html

@@ -161,28 +161,27 @@
 }
 
 .hero-title {
+  font-family: var(--font-display);
+  font-size: clamp(4.05rem, 10.5vw, 7.75rem);
+  font-weight: 400;
+  letter-spacing: 6px;
+  text-transform: uppercase;
+  line-height: 1.15;
+  color: #fff;
   margin-bottom: 12px;
   position: relative;
   z-index: 1;
-  line-height: 0;
-}
-.hero-title-svg {
-  width: 100%;
-  max-width: 820px;
-  height: auto;
-  display: block;
-  margin: 0 auto;
-  overflow: visible;
   filter: drop-shadow(1px 1px 0px #000);
 }
-.hero-title-svg text {
-  font-family: var(--font-display);
-  font-weight: 400;
-  letter-spacing: 6px;
-  text-transform: uppercase;
+@keyframes lava-flow {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
 }
-.svg-fill {
-  animation: neon-flicker 4s infinite;
+@keyframes lava-flow-reverse {
+  0%   { background-position: 100% 50%; }
+  50%  { background-position: 0% 50%; }
+  100% { background-position: 100% 50%; }
 }
 @keyframes neon-flicker {
   0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
@@ -192,6 +191,35 @@
     opacity: 0.82;
   }
 }
+.lava-text { display: inline; }
+.lava-letter {
+  display: inline-block;
+  position: relative;
+  background: linear-gradient(90deg, #FF8C00, #FF9A1F, #00A8E8, #00C2FF, #FF8C00);
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: lava-flow 8s ease-in-out infinite, neon-flicker 4s infinite;
+  animation-delay: calc(var(--i) * -0.6s), 0s;
+}
+.lava-letter::before {
+  content: attr(data-letter);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: linear-gradient(90deg, #FF8C00, #FF9A1F, #00A8E8, #00C2FF, #FF8C00);
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-text-stroke: 4px transparent;
+  paint-order: stroke fill;
+  animation: lava-flow-reverse 8s ease-in-out infinite;
+  animation-delay: calc(var(--i) * -0.6s);
+  filter: blur(1.5px);
+}
 
 .hero-tagline {
   font-family: var(--font-mono);
@@ -577,7 +605,7 @@
 
 @media (max-width: 768px) {
   .hero { padding: 80px 0 60px; }
-  .hero-title-svg { max-width: 600px; }
+  .hero-title { font-size: clamp(3.2rem, 12vw, 5.5rem); letter-spacing: 4px; }
   .nav-links { gap: 16px; }
   .features-grid { grid-template-columns: 1fr; }
   .install-grid { grid-template-columns: 1fr; }
@@ -597,7 +625,7 @@
 @media (max-width: 520px) {
   .nav-links { display: none; }
   .hero-ctas { flex-direction: column; align-items: center; }
-  .hero-title-svg { max-width: 500px; }
+  .hero-title { font-size: clamp(2.8rem, 11vw, 4.5rem); letter-spacing: 3px; }
   .container { padding: 0 16px; }
 }
 </style>
@@ -624,38 +652,8 @@
   <div class="container">
     <div class="hero-eyebrow"><span class="dot"></span> GRC Engineering Open Source</div>
     <h1 class="hero-title">
-      <svg class="hero-title-svg" viewBox="0 0 900 240" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <!-- Main lava gradient (flows left to right) -->
-          <linearGradient id="lava-grad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="2700" y2="0">
-            <stop offset="0%" stop-color="#FF8C00"/>
-            <stop offset="25%" stop-color="#FF9A1F"/>
-            <stop offset="50%" stop-color="#00A8E8"/>
-            <stop offset="75%" stop-color="#00C2FF"/>
-            <stop offset="100%" stop-color="#FF8C00"/>
-            <animateTransform attributeName="gradientTransform" type="translate" values="0 0; -1800 0; 0 0" dur="8s" repeatCount="indefinite"/>
-          </linearGradient>
-          <!-- Reverse lava gradient for glow (flows right to left) -->
-          <linearGradient id="lava-grad-rev" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="2700" y2="0">
-            <stop offset="0%" stop-color="#FF8C00"/>
-            <stop offset="25%" stop-color="#FF9A1F"/>
-            <stop offset="50%" stop-color="#00A8E8"/>
-            <stop offset="75%" stop-color="#00C2FF"/>
-            <stop offset="100%" stop-color="#FF8C00"/>
-            <animateTransform attributeName="gradientTransform" type="translate" values="-1800 0; 0 0; -1800 0" dur="8s" repeatCount="indefinite"/>
-          </linearGradient>
-          <!-- Glow blur filter -->
-          <filter id="glow-blur" x="-10%" y="-10%" width="120%" height="120%">
-            <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" result="blur"/>
-          </filter>
-        </defs>
-        <!-- Glow layer: stroke only, reverse gradient, blurred -->
-        <text class="svg-glow" x="450" y="105" text-anchor="middle" font-size="110" fill="none" stroke="url(#lava-grad-rev)" stroke-width="4" filter="url(#glow-blur)">NTH PARTY</text>
-        <text class="svg-glow" x="450" y="220" text-anchor="middle" font-size="110" fill="none" stroke="url(#lava-grad-rev)" stroke-width="4" filter="url(#glow-blur)">FINDER</text>
-        <!-- Crisp fill layer on top -->
-        <text class="svg-fill" x="450" y="105" text-anchor="middle" font-size="110" fill="url(#lava-grad)">NTH PARTY</text>
-        <text class="svg-fill" x="450" y="220" text-anchor="middle" font-size="110" fill="url(#lava-grad)">FINDER</text>
-      </svg>
+      <span class="lava-text"><span class="lava-letter" style="--i:0" data-letter="N">N</span><span class="lava-letter" style="--i:1" data-letter="t">t</span><span class="lava-letter" style="--i:2" data-letter="h">h</span><span class="lava-letter" style="--i:3" data-letter=" ">&nbsp;</span><span class="lava-letter" style="--i:4" data-letter="P">P</span><span class="lava-letter" style="--i:5" data-letter="a">a</span><span class="lava-letter" style="--i:6" data-letter="r">r</span><span class="lava-letter" style="--i:7" data-letter="t">t</span><span class="lava-letter" style="--i:8" data-letter="y">y</span></span><br>
+      <span class="lava-text"><span class="lava-letter" style="--i:9" data-letter="F">F</span><span class="lava-letter" style="--i:10" data-letter="i">i</span><span class="lava-letter" style="--i:11" data-letter="n">n</span><span class="lava-letter" style="--i:12" data-letter="d">d</span><span class="lava-letter" style="--i:13" data-letter="e">e</span><span class="lava-letter" style="--i:14" data-letter="r">r</span></span>
     </h1>
     <p class="hero-tagline">Every party has an Nth degree</p>
     <p class="hero-desc">