Add header reveal animations

src/components/SearchPanel.tsx

@@ -117,7 +117,7 @@ export function SearchPanel({
   };
 
   return (
-    <div className="fixed inset-x-0 bottom-0 top-[64px] z-50 overflow-y-auto bg-[#0f0f13] md:hidden">
+    <div className="ark-header-menu-enter fixed inset-x-0 bottom-0 top-[64px] z-50 overflow-y-auto bg-[#0f0f13] md:hidden">
       <div className="border-t border-white/10 px-5 pb-6 pt-3 max-[360px]:px-3">
         <div className="flex h-12 items-center gap-2">
           <div className="flex h-11 min-w-0 flex-1 items-center gap-2 rounded-full border border-ark-gold bg-[#191921] px-3 shadow-[0_0_0_2px_rgba(245,180,53,0.12)]">

src/index.css

@@ -30,9 +30,23 @@ header button {
   -webkit-tap-highlight-color: transparent;
 }
 
-.ark-dropdown-enter {
-  --animate-duration: 220ms;
+.ark-header-menu-enter,
+.ark-header-popover-enter {
+  animation: ark-header-menu-enter 180ms ease-out both;
   transform-origin: top center;
+  will-change: clip-path, opacity;
+}
+
+@keyframes ark-header-menu-enter {
+  from {
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+
+  to {
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
 }
 
 /* Desktop header nav: thin scrollbar when links overflow (still 單列) */

src/layouts/PublicLayout.tsx

@@ -61,8 +61,8 @@ function navClassName(active: boolean) {
   ].join(" ");
 }
 
-const dropdownAnimationClass =
-  "animate__animated animate__fadeInDown ark-dropdown-enter";
+const dropdownAnimationClass = "ark-header-popover-enter";
+const headerMenuAnimationClass = "ark-header-menu-enter";
 
 const publicMenuOpenChangeEvent = "ark:public-menu-open-change";
 
@@ -508,7 +508,7 @@ export function PublicLayout() {
         {open ? (
           <div
             ref={menuRef}
-            className={`${dropdownAnimationClass} fixed inset-x-0 top-[64px] z-50 grid gap-2 border-y border-ark-line bg-ark-nav px-4 py-3 shadow-2xl shadow-black/50 min-[440px]:px-5 sm:px-6 md:top-[70px] md:px-9 min-[1200px]:hidden`}
+            className={`${headerMenuAnimationClass} fixed inset-x-0 top-[64px] z-50 grid gap-2 bg-[#08070c] px-4 py-3 shadow-2xl shadow-black/50 min-[440px]:px-5 sm:px-6 md:top-[70px] md:px-9 min-[1200px]:hidden`}
           >
             <div className="mb-1 hidden items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2 md:flex">
               <button