feat: enhance visual polish and blog experience

- Add CSS variables for typography, easing, and durations
- Add pulsing glow effect behind hero logo
- Implement staggered text reveal with blur animation
- Add shimmer animation to CTA button and floating hero panel
- Enhance cards with inner glow, gradient borders, layered shadows
- Improve prose typography with 70ch max-width and styled elements
- Add syntax highlighting color variables for code blocks
- Enhance PostCard with hero images, reading time, animated arrows
- Improve TableOfContents with scroll indicator and active states
- Create RelatedPosts component with relevance scoring algorithm
- Add prefers-reduced-motion support throughout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Kosthi

src/components/blog/PostCard.astro

@@ -19,14 +19,40 @@ const formattedDate = post.data.pubDate.toLocaleDateString(
 );
 
 const categoryLabel = t(`blog.categories.${post.data.category}`);
+
+// Calculate reading time (roughly 200 words per minute for CJK, 250 for English)
+const content = post.body || '';
+const wordCount = content.length;
+const wordsPerMinute = lang === 'en' ? 250 : 200;
+const readingTime = Math.max(1, Math.ceil(wordCount / wordsPerMinute));
+const readingTimeLabel = lang === 'zh' ? `${readingTime} 分钟` : lang === 'ja' ? `${readingTime} 分` : `${readingTime} min`;
+
+// Check for hero image
+const heroImage = post.data.heroImage;
 ---
 
-<article class="post-card">
+<article class={`post-card ${heroImage ? 'has-hero' : ''}`}>
   <a href={`/${lang}/blog/${slug}/`} class="post-card-link">
+    {heroImage && (
+      <div class="post-card-image">
+        <img src={heroImage} alt={post.data.title} loading="lazy" />
+        <div class="post-card-image-overlay"></div>
+      </div>
+    )}
+
     <div class="post-card-content">
       <div class="post-card-meta">
         <span class="post-card-category">{categoryLabel}</span>
+        <span class="post-card-divider">·</span>
         <span class="post-card-date">{formattedDate}</span>
+        <span class="post-card-divider">·</span>
+        <span class="post-card-reading-time">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+          </svg>
+          {readingTimeLabel}
+        </span>
       </div>
 
       <h2 class="post-card-title">{post.data.title}</h2>
@@ -41,7 +67,12 @@ const categoryLabel = t(`blog.categories.${post.data.category}`);
         </div>
       )}
 
-      <span class="post-card-read-more">{t('blog.readMore')} →</span>
+      <span class="post-card-read-more">
+        {t('blog.readMore')}
+        <svg class="read-more-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M5 12h14M12 5l7 7-7 7"/>
+        </svg>
+      </span>
     </div>
   </a>
 </article>
@@ -51,28 +82,89 @@ const categoryLabel = t(`blog.categories.${post.data.category}`);
     background: rgba(10, 14, 32, 0.62);
     border: 1px solid rgba(240, 246, 255, 0.12);
     border-radius: 18px;
-    transition: all 0.3s ease;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     overflow: hidden;
+    position: relative;
+  }
+
+  .post-card::before {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    background: linear-gradient(
+      135deg,
+      rgba(34, 211, 238, 0.4),
+      rgba(168, 85, 247, 0.3),
+      rgba(96, 165, 250, 0.3)
+    );
+    border-radius: inherit;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   .post-card:hover {
-    transform: translateY(-4px);
+    transform: translateY(-6px);
     border-color: rgba(34, 211, 238, 0.3);
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+    box-shadow:
+      0 4px 6px rgba(0, 0, 0, 0.1),
+      0 10px 20px rgba(0, 0, 0, 0.15),
+      0 20px 50px rgba(34, 211, 238, 0.1);
+  }
+
+  .post-card:hover::before {
+    opacity: 1;
   }
 
   .post-card-link {
     display: block;
     text-decoration: none;
+  }
+
+  /* Hero Image Styles */
+  .post-card-image {
+    position: relative;
+    height: 180px;
+    overflow: hidden;
+  }
+
+  .post-card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .post-card:hover .post-card-image img {
+    transform: scale(1.08);
+  }
+
+  .post-card-image-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(10, 14, 32, 0.4) 60%,
+      rgba(10, 14, 32, 0.9) 100%
+    );
+  }
+
+  .post-card-content {
     padding: 1.5rem;
   }
 
+  .has-hero .post-card-content {
+    padding-top: 1rem;
+  }
+
   .post-card-meta {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.5rem;
     margin-bottom: 0.75rem;
     font-size: 0.85rem;
+    flex-wrap: wrap;
   }
 
   .post-card-category {
@@ -82,17 +174,32 @@ const categoryLabel = t(`blog.categories.${post.data.category}`);
     letter-spacing: 0.05em;
   }
 
+  .post-card-divider {
+    color: var(--text-3);
+  }
+
   .post-card-date {
     color: var(--text-3);
   }
 
+  .post-card-reading-time {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    color: var(--text-3);
+  }
+
+  .post-card-reading-time svg {
+    opacity: 0.7;
+  }
+
   .post-card-title {
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 0.75rem;
     line-height: 1.3;
-    transition: color 0.2s ease;
+    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   .post-card:hover .post-card-title {
@@ -118,19 +225,34 @@ const categoryLabel = t(`blog.categories.${post.data.category}`);
   }
 
   .post-card-tag {
-    color: var(--text-3);
+    background: rgba(168, 85, 247, 0.1);
+    color: var(--c2);
     font-size: 0.8rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    border: 1px solid rgba(168, 85, 247, 0.2);
+    transition: all 0.3s ease;
+  }
+
+  .post-card:hover .post-card-tag {
+    background: rgba(168, 85, 247, 0.15);
+    border-color: rgba(168, 85, 247, 0.3);
   }
 
   .post-card-read-more {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
     color: var(--c1);
     font-size: 0.9rem;
     font-weight: 600;
-    transition: transform 0.2s ease;
-    display: inline-block;
   }
 
-  .post-card:hover .post-card-read-more {
+  .read-more-arrow {
+    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  .post-card:hover .read-more-arrow {
     transform: translateX(4px);
   }
 </style>