优化动画

public/css/style.css

@@ -1992,14 +1992,18 @@ input:checked+.slider:before {
     width: 95vw !important;
     height: 90vh !important;
     z-index: 9999;
-    transform: none !important; /* Remove translate to avoid coordinate issues */
-    transition: none !important; /* Avoid transition conflicts during state jump */
-    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9), 0 0 0 100vh rgba(0, 0, 0, 0.7);
+    box-shadow: 0 0 80px rgba(0, 0, 0, 0.8), 0 0 0 100vh rgba(0, 0, 0, 0.65);
     backdrop-filter: blur(20px);
     margin: 0 !important;
     display: flex !important;
     flex-direction: column;
     border-color: var(--accent-indigo);
+    animation: globeExpandIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Collapse animation (plays while .expanded is still active to keep fixed positioning) */
+.globe-card.expanded.globe-collapsing {
+    animation: globeCollapseOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
 /* Ensure children are visible */
@@ -2007,14 +2011,25 @@ input:checked+.slider:before {
     opacity: 1 !important;
 }
 
-@keyframes globeExpand {
+@keyframes globeExpandIn {
     from {
         opacity: 0;
-        transform: translate(-50%, -45%) scale(0.95);
+        transform: scale(0.82);
     }
     to {
         opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
+        transform: scale(1);
+    }
+}
+
+@keyframes globeCollapseOut {
+    from {
+        opacity: 1;
+        transform: scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.82);
     }
 }