Sync from GitHub via hub-sync

src/app/globals.css

@@ -111,3 +111,40 @@ body {
 .animate-fade-in-up {
   animation: fadeInUp 0.55s ease-out forwards;
 }
+
+/* Late entry — used for elements that should arrive after the hero stack
+   has settled, so they read as a quiet afterthought rather than another
+   simultaneous CTA. `both` fill mode keeps the element invisible during
+   the delay so it doesn't briefly flash with the parent's animation. */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-late {
+  animation: fadeIn 0.45s ease-out 0.55s both;
+}
+
+/* Pop animation for dropdowns — anchors at top-right and scales up
+   slightly while fading in. Short enough (140ms) to feel snappy. */
+@keyframes menuPop {
+  from {
+    opacity: 0;
+    transform: translateY(-2px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.animate-menu-pop {
+  animation: menuPop 0.14s ease-out forwards;
+  transform-origin: top right;
+}

src/app/page.tsx

@@ -283,7 +283,7 @@ function HomeInner() {
           </button>
         </form>
 
-        <div className="mt-3">
+        <div className="mt-3 animate-fade-in-late">
           <HfAuthButton variant="ghost" />
         </div>
 

src/components/hf-auth-button.tsx

@@ -74,7 +74,7 @@ export default function HfAuthButton({ variant = "badge" }: HfAuthButtonProps) {
       onClick={signIn}
       title="Sign in with Hugging Face to access your private datasets"
       aria-label="Sign in with Hugging Face to access your private datasets"
-      className="cursor-pointer inline-flex items-center h-6 rounded-md transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
+      className="cursor-pointer inline-flex items-center h-6 rounded-md transition-all duration-150 hover:opacity-90 motion-safe:hover:-translate-y-px focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
@@ -154,7 +154,7 @@ function SignedInMenu({
       {open && (
         <div
           role="menu"
-          className="absolute right-0 top-full mt-1.5 min-w-[10rem] panel-raised bg-[var(--surface-1)]/98 backdrop-blur shadow-xl p-1 z-50 text-[11px]"
+          className="absolute right-0 top-full mt-1.5 min-w-[10rem] panel-raised bg-[var(--surface-1)]/98 backdrop-blur shadow-xl p-1 z-50 text-[11px] animate-menu-pop"
         >
           <button
             role="menuitem"