From a35463eabf380d4ff4adcd5d648714f9f984706d Mon Sep 17 00:00:00 2001
From: the3ash <24548223+the3ash@users.noreply.github.com>
Date: Fri, 9 Jan 2026 22:04:57 +0800
Subject: [PATCH] style: improve gradient mask with smoother fade transition

---
 src/components/ui/GradientMask.astro | 36 +++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/GradientMask.astro b/src/components/ui/GradientMask.astro
index 0d67d83..b1cdeed 100644
--- a/src/components/ui/GradientMask.astro
+++ b/src/components/ui/GradientMask.astro
@@ -27,13 +27,43 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 1.75rem;
+    height: 1.5rem;
     z-index: 99;
     pointer-events: none;
     background-color: var(--bg);
     backdrop-filter: blur(1px);
-    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
-    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+    mask-image: linear-gradient(
+      to bottom,
+      black 0%,
+      rgba(0, 0, 0, 0.738) 19%,
+      rgba(0, 0, 0, 0.541) 34%,
+      rgba(0, 0, 0, 0.382) 47%,
+      rgba(0, 0, 0, 0.278) 56.5%,
+      rgba(0, 0, 0, 0.194) 65%,
+      rgba(0, 0, 0, 0.126) 73%,
+      rgba(0, 0, 0, 0.075) 80.2%,
+      rgba(0, 0, 0, 0.042) 86.1%,
+      rgba(0, 0, 0, 0.021) 91%,
+      rgba(0, 0, 0, 0.008) 95.2%,
+      rgba(0, 0, 0, 0.002) 98.2%,
+      transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      black 0%,
+      rgba(0, 0, 0, 0.738) 19%,
+      rgba(0, 0, 0, 0.541) 34%,
+      rgba(0, 0, 0, 0.382) 47%,
+      rgba(0, 0, 0, 0.278) 56.5%,
+      rgba(0, 0, 0, 0.194) 65%,
+      rgba(0, 0, 0, 0.126) 73%,
+      rgba(0, 0, 0, 0.075) 80.2%,
+      rgba(0, 0, 0, 0.042) 86.1%,
+      rgba(0, 0, 0, 0.021) 91%,
+      rgba(0, 0, 0, 0.008) 95.2%,
+      rgba(0, 0, 0, 0.002) 98.2%,
+      transparent 100%
+    );
     opacity: 0;
     transition: background-color 0.2s ease-out;
   }
-- 
2.51.2