From 20406c5dcf8205ffc9743f3dc70f4402bc9994eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 1 Mar 2026 16:38:28 +0100
Subject: [PATCH] feat: stamp+glitch logo animation, move keyframes outside
 @theme

logoStamp and pathFlicker defined at global CSS scope (outside @theme)
so they are always emitted. Logo uses sharp stamp+bounce entrance with
flickering path reveals.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/globals.css     | 21 +++++++++++++++++++++
 components/Logo.tsx |  6 +++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 73a6d34..7b3768d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -84,6 +84,27 @@
     from { transform: scale(0.95); opacity: 0; }
     to { transform: scale(1); opacity: 1; }
   }
+
+}
+
+@keyframes logoStamp {
+  0%   { opacity: 0; transform: scale(2) rotate(15deg); }
+  38%  { opacity: 1; transform: scale(0.82) rotate(-5deg); }
+  58%  { transform: scale(1.14) rotate(3deg); }
+  74%  { transform: scale(0.94) rotate(-1deg); }
+  88%  { transform: scale(1.04) rotate(0.3deg); }
+  100% { transform: scale(1) rotate(0deg); }
+}
+
+@keyframes pathFlicker {
+  0%        { opacity: 0; }
+  28%, 30%  { opacity: 0; }
+  31%, 33%  { opacity: 1; }
+  34%, 40%  { opacity: 0; }
+  41%, 44%  { opacity: 1; }
+  45%, 49%  { opacity: 0; }
+  50%       { opacity: 1; }
+  100%      { opacity: 1; }
 }
 
 :root {
diff --git a/components/Logo.tsx b/components/Logo.tsx
index 0f722e8..092113e 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -7,12 +7,12 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
-      style={{ animation: 'scaleIn 0.6s ease-out both' }}
+      style={{ animation: 'logoStamp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both' }}
     >
       {/* Wrench (Lucide) - vertical */}
       <g
         transform="translate(32, 32) rotate(0) scale(3.15) translate(-12.5, -11.5)"
-        style={{ animation: 'fadeIn 1.2s ease-in-out both' }}
+        style={{ animation: 'pathFlicker 0.9s ease-out 0.15s both' }}
       >
         <path
           d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
@@ -28,7 +28,7 @@ export default function Logo({ className = '', size = 120 }: { className?: strin
       {/* Brush (Lucide) - horizontal flipped */}
       <g
         transform="translate(32, 30) rotate(90) scale(3.025) translate(-11.25, -11)"
-        style={{ animation: 'fadeIn 1.2s ease-in-out 0.3s both' }}
+        style={{ animation: 'pathFlicker 0.9s ease-out 0.35s both' }}
       >
         <path
           d="m11 10l3 3m-7.5 8A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z"