优化解决方案幻灯片为堆叠滑动效果

- 改为从右到左的堆叠滑动切换效果
- 当前幻灯片向左滑出，新幻灯片从右侧滑入
- 添加 z-index 层级控制，实现堆叠视觉效果
- 使用 CSS 关键帧动画替代 transition
- 添加 isAnimating 锁，防止动画期间重复触发
- 动画时长 0.8s，使用 cubic-bezier 缓动函数
- 保持自动播放和悬停暂停功能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

css/index.css

@@ -2703,16 +2703,17 @@ html {
   overflow: hidden;
 }
 
-/* 单个幻灯片 */
+/* 单个幻灯片 - 堆叠效果 */
 .solution-slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   opacity: 0;
-  transform: translateX(100px);
-  transition: opacity 0.6s ease, transform 0.6s ease;
+  transform: translateX(-100%);
+  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
+  z-index: 1;
 }
 
 .solution-slide.active {
@@ -2720,6 +2721,39 @@ html {
   opacity: 1;
   transform: translateX(0);
   pointer-events: auto;
+  z-index: 10;
+}
+
+/* 即将离开的幻灯片 */
+.solution-slide.leaving {
+  position: absolute;
+  opacity: 1;
+  transform: translateX(0);
+  z-index: 5;
+  animation: slideOutLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes slideOutLeft {
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+/* 即将进入的幻灯片 */
+.solution-slide.entering {
+  position: absolute;
+  opacity: 0;
+  transform: translateX(100%);
+  z-index: 8;
+  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes slideInRight {
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
 /* 幻灯片内容区域 */