From d967dd261a2b00be6dbb0233df505f82da4d4414 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 10 Apr 2026 18:38:14 +0200
Subject: [PATCH] polish: smooth hover transitions on nav and footer links

- Desktop nav: underline uses scaleX transform (origin-left) instead of
  width, now shows on hover for inactive links too
- Mobile nav: link text slides translateX on hover for directional feel
- Footer nav: matching scaleX underline on hover
- Footer social: external arrow icon nudges diagonally on hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 layouts/partials/footer.html |  9 ++++++---
 layouts/partials/nav.html    | 10 +++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 97ae9ba..ebb439f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -23,14 +23,17 @@
       <ul class="flex flex-wrap gap-x-8 gap-y-4">
         {{- range .Site.Menus.footer -}}
         <li>
-          <a href="{{ .URL }}" class="label text-fog hover:text-heat transition-colors">{{ .Name }}</a>
+          <a href="{{ .URL }}" class="group label relative text-fog hover:text-heat transition-colors duration-200">
+            {{ .Name }}
+            <span class="absolute -bottom-0.5 left-0 h-px w-full bg-heat origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
+          </a>
         </li>
         {{- end -}}
         {{- with .Site.Params.social -}}
           {{- range $platform, $url := . -}}
           <li>
-            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="label text-fog hover:text-frost transition-colors">
-              {{- $platform | upper -}} {{ partial "icon.html" "arrow-external" }}
+            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="group label text-fog hover:text-frost transition-colors duration-200">
+              {{- $platform | upper -}}<span class="inline-block transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">{{ partial "icon.html" "arrow-external" }}</span>
             </a>
           </li>
           {{- end -}}
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index b8b3356..e41b850 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -23,14 +23,13 @@
       {{- $href := .URL -}}
       <a
         href="{{ $href }}"
-        class="label relative transition-colors"
+        class="group label relative transition-colors duration-200"
         :class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'text-heat' : 'text-fog hover:text-chalk'"
       >
         {{ .Name }}
         <span
-          class="absolute -bottom-0.5 left-0 h-px bg-heat transition-all duration-300 ease-out"
-          :style="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'width: 100%' : 'width: 0'"
-          style="width: 0"
+          class="absolute -bottom-0.5 left-0 h-px w-full bg-heat origin-left transition-transform duration-300 ease-out"
+          :class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"
         ></span>
       </a>
       {{- end -}}
@@ -92,7 +91,8 @@
             <span class="absolute inset-y-0 left-0 w-0 group-hover:w-full transition-all duration-300 ease-out"
               style="background: linear-gradient(90deg, rgba(255,26,140,0.07), transparent);"></span>
             <!-- Link text -->
-            <span class="relative transition-colors duration-200 text-paper group-hover:text-heat uppercase"
+            <span class="relative text-paper group-hover:text-heat group-hover:translate-x-2 uppercase"
+              style="transition: color 0.2s ease, transform 0.3s var(--ease-out-expo);"
               :class="($store.nav.path === '{{ $href }}' || ('{{ $href }}' !== '/' && $store.nav.path.startsWith('{{ $href }}'))) ? 'text-gradient' : ''"
             >{{ .Name }}</span>
             <!-- Index number -->