fix: enlarge carousel screenshots and add hover zoom on active image

Author: cwx

docs/index.html

@@ -93,8 +93,8 @@
 .screenshots { padding: 100px 2rem; overflow: hidden; }
 .screenshots h2 { text-align: center; font-size: 2rem; margin-bottom: 3rem; }
 .carousel {
-  position: relative; height: 520px; perspective: 1200px;
-  max-width: 900px; margin: 0 auto;
+  position: relative; height: 650px; perspective: 1200px;
+  max-width: 1000px; margin: 0 auto;
 }
 .carousel-track {
   position: absolute; width: 100%; height: 100%;
@@ -103,14 +103,22 @@
 }
 .carousel-item {
   position: absolute; left: 50%; top: 0;
-  width: 220px; height: 440px;
+  width: 280px; height: 560px;
   transform-style: preserve-3d;
   transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.6s;
 }
 .carousel-item img {
   width: 100%; height: 100%; object-fit: cover;
   border-radius: 16px; border: 1px solid var(--border);
   box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  cursor: pointer;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.carousel-item.active img:hover {
+  transform: scale(1.8);
+  box-shadow: 0 30px 80px rgba(67,230,195,0.2);
+  z-index: 200;
+  position: relative;
 }
 .carousel-item .caption {
   text-align: center; margin-top: 16px;
@@ -121,7 +129,7 @@
 .carousel-item.active img { border-color: var(--brand); }
 .carousel-nav {
   display: flex; justify-content: center; gap: 12px; margin-top: 24px;
-  position: relative; top: 490px;
+  position: relative; top: 600px;
 }
 .carousel-dot {
   width: 10px; height: 10px; border-radius: 50%;
@@ -344,7 +352,7 @@ <h3 data-en="Start coding!" data-zh="开始编程！">Start coding!</h3>
 
 function updateCarousel() {
   const angleStep = 360 / total;
-  const radius = 320;
+  const radius = 380;
   items.forEach((item, i) => {
     const offset = ((i - current) % total + total) % total;
     const angle = offset * angleStep;