style: 加強時間軸鑽石動畫

assets/css/style.css

@@ -1559,43 +1559,46 @@ a {
     background: #fffdf5;
     color: #e0b400;
     z-index: 2;
+    box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.35);
 }
 
 @media (prefers-reduced-motion: no-preference) {
     .merged-storyline .story-node::before {
-        animation: timeline-diamond-enter 0.55s ease-out backwards;
+        animation:
+            timeline-diamond-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards,
+            timeline-diamond-glow 2.1s ease-in-out 0.65s infinite;
     }
 
     .merged-storyline .story-node:nth-of-type(1)::before {
-        animation-delay: 0.06s;
+        animation-delay: 0.05s, 0.7s;
     }
 
     .merged-storyline .story-node:nth-of-type(2)::before {
-        animation-delay: 0.14s;
+        animation-delay: 0.12s, 0.9s;
     }
 
     .merged-storyline .story-node:nth-of-type(3)::before {
-        animation-delay: 0.22s;
+        animation-delay: 0.19s, 1.1s;
     }
 
     .merged-storyline .story-node:nth-of-type(4)::before {
-        animation-delay: 0.3s;
+        animation-delay: 0.26s, 1.3s;
     }
 
     .merged-storyline .story-node:nth-of-type(5)::before {
-        animation-delay: 0.38s;
+        animation-delay: 0.33s, 1.5s;
     }
 
     .merged-storyline .story-node:nth-of-type(6)::before {
-        animation-delay: 0.46s;
+        animation-delay: 0.4s, 1.7s;
     }
 
     .merged-storyline .story-node:nth-of-type(7)::before {
-        animation-delay: 0.54s;
+        animation-delay: 0.47s, 1.9s;
     }
 
     .merged-storyline .story-node:nth-of-type(8)::before {
-        animation-delay: 0.62s;
+        animation-delay: 0.54s, 2.1s;
     }
 }
 
@@ -1766,14 +1769,44 @@ a {
 }
 
 @keyframes timeline-diamond-enter {
-    from {
+    0% {
         opacity: 0;
-        transform: scale(0.72);
+        transform: scale(0.45);
+        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0);
+        color: #c9a000;
     }
 
-    to {
+    70% {
+        transform: scale(1.18);
+        box-shadow:
+            0 0 0 3px rgba(255, 204, 0, 0.55),
+            0 0 16px 4px rgba(255, 204, 0, 0.45);
+        color: #ffdd33;
+    }
+
+    100% {
         opacity: 1;
         transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.35);
+        color: #e0b400;
+    }
+}
+
+@keyframes timeline-diamond-glow {
+
+    0%,
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.3);
+        color: #e0b400;
+    }
+
+    50% {
+        transform: scale(1.14);
+        box-shadow:
+            0 0 0 3px rgba(255, 204, 0, 0.5),
+            0 0 14px 5px rgba(255, 204, 0, 0.55);
+        color: #ffea4d;
     }
 }