From 5ae9647465975dcfd3a49a0724d520560f7ecbe2 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Thu, 28 May 2026 22:57:05 +0800
Subject: [PATCH] Add header reveal animations

---
 src/components/SearchPanel.tsx |  2 +-
 src/index.css                  | 18 ++++++++++++++++--
 src/layouts/PublicLayout.tsx   |  6 +++---
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/SearchPanel.tsx b/src/components/SearchPanel.tsx
index d8b7555..8e43d67 100644
--- a/src/components/SearchPanel.tsx
+++ b/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)]">
diff --git a/src/index.css b/src/index.css
index ffdfa63..c0438b7 100644
--- a/src/index.css
+++ b/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 單列) */
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 2086f34..68a6f15 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/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