diff --git a/src/styles.css b/src/styles.css index 4c30e8d..effd524 100644 --- a/src/styles.css +++ b/src/styles.css @@ -396,8 +396,9 @@ audio.hidden-audio { } .pulse-orb.playing { - background: #7df9ff; - animation: hueShift 10s linear infinite; + color: #7df9ff; + background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.35), currentColor 65%); + animation: planetShift 4s linear infinite; } .pulse-orb.answer { @@ -445,11 +446,7 @@ audio.hidden-audio { 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: #7df9ff; -} - -.pulse-orb.playing, -.pulse-tentacles .tentacle { - animation: hueShift 10s linear infinite; + animation: planetShift 4s linear infinite; } @@ -463,18 +460,21 @@ audio.hidden-audio { } } -@keyframes hueShift { +@keyframes planetShift { 0% { - filter: hue-rotate(0deg); + color: #2ea8ff; } - 33% { - filter: hue-rotate(120deg); + 25% { + color: #fbd72b; } - 66% { - filter: hue-rotate(240deg); + 50% { + color: #ff4b4b; + } + 75% { + color: #8a5bff; } 100% { - filter: hue-rotate(360deg); + color: #2ea8ff; } }