feat: add glitch effect to article list page H1

Add .section-title class with chromatic-aberration glitch mechanics
mirroring .hero-name. Extend hero-glitch.js to target both classes
independently. Load glitch script on IsHome and IsSection pages.
Title styled uppercase, centered, white.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

4 files changed, 56 insertions, 11 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 29f7f6e..05e491e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -2055,7 +2055,52 @@ html.theme-light .hero-name {
   100% { transform: translate(0);          clip-path: inset(0 0 100% 0); opacity: 0; }
 }
 
+/* Section title glitch effect (article list pages) */
+.section-title {
+  font-family: var(--font-head);
+  font-size: clamp(2rem, 6vw, 3rem);
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  color: var(--text);
+  text-transform: uppercase;
+  text-align: center;
+  display: block;
+  position: relative;
+  width: 100%;
+  margin-bottom: 3rem;
+}
+
+.section-title::before,
+.section-title::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
+
+.section-title::before { color: #ff2b6d; }
+.section-title::after  { color: #00e5ff; }
+
+.section-title.is-glitching::before {
+  opacity: 0.8;
+  animation: glitch-red 0.45s steps(3) forwards;
+}
+.section-title.is-glitching::after {
+  opacity: 0.8;
+  animation: glitch-cyn 0.45s steps(3) forwards;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .hero-name::before,
   .hero-name::after { display: none; }
+  .section-title::before,
+  .section-title::after { display: none; }
 }
diff --git a/assets/js/hero-glitch.js b/assets/js/hero-glitch.js
index 1b39b2f..94ba4a0 100644
--- a/assets/js/hero-glitch.js
+++ b/assets/js/hero-glitch.js
@@ -1,12 +1,14 @@
 (function () {
-  var name = document.querySelector('.hero-name');
-  if (!name) return;
   if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
 
-  function glitch() {
-    name.classList.add('is-glitching');
-    setTimeout(function () { name.classList.remove('is-glitching'); }, 500);
-    setTimeout(glitch, 4000 + Math.random() * 7000);
+  function attachGlitch(el) {
+    function glitch() {
+      el.classList.add('is-glitching');
+      setTimeout(function () { el.classList.remove('is-glitching'); }, 500);
+      setTimeout(glitch, 4000 + Math.random() * 7000);
+    }
+    setTimeout(glitch, 3500);
   }
-  setTimeout(glitch, 3500);
+
+  document.querySelectorAll('.hero-name, .section-title').forEach(attachGlitch);
 })();
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 20f428d..cb17c1d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -139,7 +139,7 @@
   <script src="{{ $contribScript.RelPermalink }}"></script>
 
   <!-- Hero glitch effect (homepage only) -->
-  {{ if .IsHome }}
+  {{ if or .IsHome .IsSection }}
   {{ $heroScript := resources.Get "js/hero-glitch.js" | minify }}
   <script src="{{ $heroScript.RelPermalink }}"></script>
   {{ end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 09c0cbb..c99e930 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,8 +1,6 @@
 {{ define "main" }}
 <div class="mx-auto px-4 py-12 max-w-5xl">
-  <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12">
-    {{ .Title }}
-  </h1>
+  <h1 class="section-title" data-text="{{ .Title }}">{{ .Title }}</h1>
 
   {{ $pinned := where .Pages "Params.pinned" true }}
   {{ $unpinned := where .Pages "Params.pinned" false }}