Update style.css

style.css

@@ -89,27 +89,30 @@ button:hover {
     }
 }
 
-/* Pulsing SHODAN Avatar Effect */
+/* container never pulses by default */
 #avatar {
-    width: 150px;
-    height: 150px;
-    border: 2px solid #00ffcc;
-    border-radius: 50%;
-    animation: pulse 2s infinite;
-    background-size: cover;
-    background-position: center;
-    margin-bottom: 1rem;
-    align-self: center;
+  width: 150px;
+  height: 150px;
+  border: 2px solid #00ffcc;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 1rem;
+  align-self: center;
+}
+
+/* only pulse while speaking */
+#avatar.speaking {
+  animation: pulse 2s infinite;
+}
+
+/* also scale the img inside when speaking */
+#avatar.speaking img {
+  animation: pulse 2s infinite;
 }
 
 @keyframes pulse {
-    0% {
-        box-shadow: 0 0 5px #00ffcc;
-    }
-    50% {
-        box-shadow: 0 0 25px #00ffccaa;
-    }
-    100% {
-        box-shadow: 0 0 5px #00ffcc;
-    }
+  0%   { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
+  50%  { box-shadow: 0 0 25px #00ffccaa; transform: scale(1.05); }
+  100% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
 }
+