feat(ui): 实现ACG风格UI改造和动画效果

添加樱花飘落和表情点击特效组件，优化卡片动画和背景模糊效果
更新主题色为粉色并添加动漫风格背景图
引入圆角字体提升可爱风格
新增开发文档记录改造计划

.trae/documents/ACG Animation Enhancement Plan.md

@@ -0,0 +1,24 @@
+I will implement several interactive animations and visual enhancements to meet the user's request for a "prettier" and more "animated" ACG-style blog.
+
+### 1. Emoji Click Burst Effect
+I will create a new component `EmojiCursor.astro` that listens for click events and spawns floating emojis that fade out.
+- **Implementation**: A client-side script that creates `span` elements with random emojis at the cursor position, animates them upwards, and removes them.
+- **Emojis**: 🌸, 💖, ✨, 🍬, 🎀, 🍭, 🍡 (ACG/cute themed).
+
+### 2. Falling Sakura (Cherry Blossom) Effect
+I will create a `Sakura.astro` component using a lightweight canvas script to simulate falling cherry blossom petals.
+- **Placement**: A fixed-position canvas covering the screen, with `pointer-events: none` so it doesn't interfere with clicks.
+- **Visuals**: Pink/White petals gently drifting down.
+
+### 3. Fade-in & Slide-up Animations
+I will add global CSS keyframes to `src/styles/main.css` to animate elements when they appear.
+- **Target**: `.card-base`, `.btn-card`
+- **Effect**: `fade-in-up` (opacity 0 -> 1, translate-y 20px -> 0).
+- **Stagger**: I'll try to use CSS nth-child selectors or a simple JS script to stagger the animation for a cascading effect.
+
+### 4. Integration
+I will import `EmojiCursor` and `Sakura` components into `src/layouts/Layout.astro` so they are available on every page.
+
+### 5. Polishing
+- **Live2D Suggestion**: I will add a comment/placeholder for Live2D in the layout, as a full implementation might be heavy, but I'll focus on the requested "emoji animations" first.
+- **Link Hover**: Add a "rubber band" or "pulse" animation to navigation links.

.trae/documents/ACG Style UI Makeover Plan.md

@@ -0,0 +1,20 @@
+I will modify the project's configuration and CSS to implement an "ACG (Anime/Manga) Style" makeover. The changes will make the UI cuter, softer, and more translucent with an anime-style background.
+
+### 1. Global Theme Configuration (`src/config.ts`)
+- **Theme Color**: Change the primary hue to **Pink** (`340`) for a soft, cute look.
+- **Background Image**: Enable the background and set it to a high-quality random anime wallpaper API (`https://t.alcy.cc/acg`) to ensure every visit feels fresh and "ACG".
+- **Background Opacity**: Ensure the background is fully visible (`opacity: 1`).
+
+### 2. Styling Overhaul (`src/styles/variables.styl` & `src/styles/main.css`)
+- **Rounded Corners**: Increase the global border radius (`--radius-large`) to `1.75rem` to make all cards and elements look bubblier and softer.
+- **Translucency (Glassmorphism)**:
+  - Reduce the opacity of the **Card Background** (`--card-bg`) and **Float Panel** (`--float-panel-bg`) to `0.6` (60% opacity) for light mode.
+  - This creates a "frosted glass" effect, allowing the anime background to show through the content.
+- **Blur Effect**: Increase the `backdrop-filter` blur in `main.css` to `16px` to enhance the glass effect and ensure text readability.
+
+### 3. Typography (`src/layouts/Layout.astro` & `tailwind.config.cjs`)
+- **Cute Font**: Import the **"M PLUS Rounded 1c"** font from Google Fonts. This is a popular rounded font often used in anime/manga designs.
+- **Font Integration**: Update Tailwind configuration to prioritize this new rounded font for the entire website.
+
+### 4. Interactive Animations (`src/styles/main.css`)
+- **Hover Effects**: Add a gentle "floating" animation (slight lift and shadow increase) to all cards (`.card-base`) when hovered, making the interface feel more alive and playful.