feat: add bloom pulse animation to header logo, glitch text-only

- Counter-rotating rings now also pulse outward from center (inner→outer ripple)
- Use standalone `rotate`/`scale` CSS properties so animations don't conflict
- Glitch animation scoped to logo text span only, not the SVG
- Footer logo remains static (logo-static)

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

assets/css/main.css

@@ -573,7 +573,7 @@
   94%  { transform: translate(0);          clip-path: none; }
 }
 
-.logo-glitch:hover {
+a:hover .logo-glitch {
   animation: glitch-clip 2.5s steps(1) infinite;
 }
 
@@ -630,13 +630,39 @@ footer nav a.label:hover svg {
   transform-box: fill-box;
   transform-origin: 50% 50%;
 }
-.logo-bloom:not(.logo-static) .logo-r1 { animation: logo-cw  30s linear infinite; }
-.logo-bloom:not(.logo-static) .logo-r2 { animation: logo-ccw 20s linear infinite; }
-.logo-bloom:not(.logo-static) .logo-r3 { animation: logo-cw  12s linear infinite; }
 
-.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s; }
+/* Rotation — use standalone `rotate` so `scale` can animate independently */
-.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s; }
+.logo-bloom:not(.logo-static) .logo-r1 {
-.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s; }
+  animation: logo-cw 30s linear infinite, logo-bloom-r1 6s ease-in-out 2s infinite;
+}
+.logo-bloom:not(.logo-static) .logo-r2 {
+  animation: logo-ccw 20s linear infinite, logo-bloom-r2 6s ease-in-out 1s infinite;
+}
+.logo-bloom:not(.logo-static) .logo-r3 {
+  animation: logo-cw 12s linear infinite, logo-bloom-r3 6s ease-in-out 0s infinite;
+}
 
-@keyframes logo-cw  { to { transform: rotate(360deg);  } }
+/* Speed up rotation on hover */
-@keyframes logo-ccw { to { transform: rotate(-360deg); } }
+.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s, 6s; }
+.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s, 6s; }
+.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s, 6s; }
+
+@keyframes logo-cw  { to { rotate: 360deg;  } }
+@keyframes logo-ccw { to { rotate: -360deg; } }
+
+/* Bloom pulse — inner first, ripples outward */
+@keyframes logo-bloom-r3 {
+  0%, 100% { scale: 1;    }
+  40%       { scale: 1.06; }
+  60%       { scale: 1.06; }
+}
+@keyframes logo-bloom-r2 {
+  0%, 100% { scale: 1;    }
+  40%       { scale: 1.05; }
+  60%       { scale: 1.05; }
+}
+@keyframes logo-bloom-r1 {
+  0%, 100% { scale: 1;    }
+  40%       { scale: 1.04; }
+  60%       { scale: 1.04; }
+}

layouts/partials/footer.html

@@ -12,7 +12,7 @@
 
     <!-- Brand -->
     <div>
-      <a href="/" class="logo-glitch block mb-4 hover:opacity-90 transition-opacity w-fit" aria-label="{{ .Site.Title }} Home">
+      <a href="/" class="block mb-4 hover:opacity-90 transition-opacity w-fit" aria-label="{{ .Site.Title }} Home">
         {{- partial "logo.html" (dict "id" "footer" "class" "h-10 w-auto logo-static") -}}
       </a>
       <p class="label text-fog max-w-xs leading-loose">{{ .Site.Params.description }}</p>

layouts/partials/nav.html

@@ -10,9 +10,9 @@
     :class="$store.nav.open || scrolled ? 'bg-ink/95 backdrop-blur-md shadow-[0_1px_0_var(--color-zinc)]' : ''"
   >
     <!-- Logotype -->
-    <a href="/" class="logo-glitch flex items-center gap-3 hover:opacity-90 transition-opacity" aria-label="{{ .Site.Params.logoText }} Home">
+    <a href="/" class="flex items-center gap-3 hover:opacity-90 transition-opacity" aria-label="{{ .Site.Params.logoText }} Home">
       {{- partial "logo.html" (dict "id" "nav" "class" "h-10 w-auto flex-shrink-0") -}}
-      <span class="font-display text-2xl md:text-3xl leading-none tracking-wide">
+      <span class="logo-glitch font-display text-2xl md:text-3xl leading-none tracking-wide">
         {{- .Site.Params.logoText -}}
       </span>
     </a>