打磨细节

app/globals.css

@@ -17,7 +17,7 @@
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: var(--font-inter), Arial, Helvetica, sans-serif;
+  font-family: var(--font-noto-sans-sc), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
 }
 
 @layer utilities {
@@ -26,6 +26,19 @@ body {
   }
 }
 
+/* Font family utilities with Chinese support */
+.font-inter {
+  font-family: var(--font-noto-sans-sc), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+}
+
+.font-domine {
+  font-family: var(--font-noto-serif-sc), var(--font-domine), Georgia, "Noto Serif", serif;
+}
+
+.font-jetbrains {
+  font-family: var(--font-jetbrains), "Courier New", monospace;
+}
+
 /* Calculator card wiggle animation */
 @keyframes wiggle {
   0% { transform: rotate(0deg); }
@@ -37,6 +50,10 @@ body {
   100% { transform: rotate(0deg); }
 }
 
+.calculator-card-container {
+  cursor: pointer;
+}
+
 .calculator-card-container:hover {
   animation: wiggle 2.5s ease-in-out infinite;
 }
@@ -69,3 +86,75 @@ body {
 .animate-slide-down {
   animation: slideDown 0.3s ease-out;
 }
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-10px);
+  }
+}
+
+@keyframes fadeOutFast {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.animate-slide-up {
+  animation: slideUp 0.3s ease-out forwards;
+}
+
+.animate-fade-out-fast {
+  animation: fadeOutFast 0.3s ease-out forwards;
+}
+
+/* Shatter transition animation - 3D effect */
+@keyframes shatter {
+  0%, 20% {
+    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(var(--tx), var(--ty), -200px)
+               rotateX(var(--rx))
+               rotateY(var(--ry))
+               scale(var(--s));
+    opacity: 0;
+  }
+}
+
+.shatter-fragment {
+  animation: shatter 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+  animation-delay: var(--delay);
+  will-change: transform, opacity;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+}
+
+.glass-shard {
+  transform-style: preserve-3d;
+  transition: all 0.3s ease;
+  /* 确保在动画开始时完全不透明 */
+  background-color: rgba(255, 255, 255, 1) !important;
+}
+
+/* Fade out animation for background mask */
+@keyframes fadeOut {
+  0%, 30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-fade-out {
+  animation: fadeOut 1.5s ease-out forwards;
+}