feat(ai): Make logo jump on click

frontend/src/scenes/max/Intro.tsx

@@ -1,4 +1,5 @@
 import { useValues } from 'kea'
+import { useState } from 'react'
 
 import { Link, Tooltip } from '@posthog/lemon-ui'
 
@@ -8,19 +9,44 @@ import { userLogic } from 'scenes/userLogic'
 
 import { maxLogic } from './maxLogic'
 
+const LOGOMARK_AIRTIME_MS = 400 // Sync with --logomark-airtime in base.scss
+
 export function Intro(): JSX.Element {
     const { headline } = useValues(maxLogic)
     const { user } = useValues(userLogic)
+    const [hedgehogLastJumped, setHedgehogLastJumped] = useState<number | null>(Date.now())
+    const [hedgehogJumpIteration, setHedgehogJumpIteration] = useState(0)
 
     const shouldShowMaxRebrandMessage: boolean = !!user && dayjs(user.date_joined).isBefore('2025-10-21')
 
+    const handleLogomarkClick = (): void => {
+        const now = Date.now()
+        if (hedgehogLastJumped && now - hedgehogLastJumped < LOGOMARK_AIRTIME_MS) {
+            return // Disallows interrupting the jump animation!
+        }
+        setHedgehogJumpIteration(hedgehogJumpIteration + 1)
+        setHedgehogLastJumped(null)
+        requestAnimationFrame(() => setHedgehogLastJumped(now))
+    }
+
     return (
         <>
-            <div className="flex *:h-full *:w-12 animate-logomark-jump">
+            <div
+                className={`flex *:h-full *:w-12 p-2 cursor-pointer ${hedgehogLastJumped ? 'animate-logomark-jump' : ''}`}
+                // eslint-disable-next-line react/forbid-dom-props
+                style={
+                    {
+                        '--logomark-jump-magnitude': hedgehogJumpIteration
+                            ? 1.5 ** ((hedgehogJumpIteration % 8) - 2)
+                            : 1,
+                    } as React.CSSProperties
+                }
+                onClick={handleLogomarkClick}
+            >
                 <Logomark />
             </div>
             <div className="text-center mb-1">
-                <h2 className="text-xl @md/max-welcome:text-2xl font-bold my-2 text-balance">{headline}</h2>
+                <h2 className="text-xl @md/max-welcome:text-2xl font-bold mb-2 text-balance">{headline}</h2>
                 <div className="text-sm italic text-tertiary text-pretty py-0.5">
                     {shouldShowMaxRebrandMessage ? (
                         <Tooltip

frontend/src/styles/base.scss

@@ -1778,7 +1778,8 @@
     }
 
     .animate-logomark-jump {
-        --logomark-airtime: 0.4s;
+        --logomark-jump-magnitude: 1;
+        --logomark-airtime: 0.4s; // Sync with LOGOMARK_AIRTIME_MS in Intro.tsx
 
         svg {
             overflow: visible;
@@ -1792,7 +1793,9 @@
             @for $i from 1 through 4 {
                 > *:nth-child(#{$i}) {
                     // Dividing by 15 just because it feels good
-                    animation-delay: calc(var(--logomark-airtime) / 15 * ($i - 1));
+                    animation-delay: calc(
+                        var(--logomark-airtime) / 15 / calc(sqrt(var(--logomark-jump-magnitude))) * ($i - 1)
+                    );
                 }
             }
         }
@@ -1804,7 +1807,7 @@
             }
 
             2% {
-                transform: translateY(-10px);
+                transform: translateY(calc(-10px * var(--logomark-jump-magnitude)));
             }
 
             4% {