Better tentacles

src/App.vue

@@ -168,6 +168,7 @@
                 class="pulse-orb"
                 :class="{
                   active: isPlaying,
+                  playing: isPlaying && !isAnswerClip,
                   answer: isPlaying && isAnswerClip,
                   idle: !currentClipUrl
                 }"
@@ -179,6 +180,11 @@
               ></div>
               <div
                 class="pulse-tentacles"
+                :class="{
+                  playing: isPlaying && !isAnswerClip,
+                  answer: isPlaying && isAnswerClip,
+                  idle: !currentClipUrl
+                }"
                 :style="{ '--pulse': pulseLevel.toFixed(3) }"
               >
                 <span

src/styles.css

@@ -445,10 +445,25 @@ audio.hidden-audio {
     scaleX(calc(0.7 + var(--level, 0) * 0.5));
   transition: height 0.08s ease-out, opacity 0.08s ease-out, transform 0.08s ease-out, filter 0.08s ease-out;
   mix-blend-mode: screen;
+  color: currentColor;
+}
+
+.pulse-tentacles.playing {
   color: #7df9ff;
+}
+
+.pulse-tentacles.playing .tentacle {
   animation: planetShift 4s linear infinite;
 }
 
+.pulse-tentacles.answer {
+  color: #2bdc7b;
+}
+
+.pulse-tentacles.idle {
+  color: #000;
+}
+
 
 @keyframes pulseGlow {
   0%,