[deploy] fix: Start podcast record spinning animation from where it paused (#10343)

* fix: Start podcast record spinning animation from where it paused

* fix: Use CSS custom property for podcast spinning animation

* fix: Apply podcast animation fix on podcast liquid tag

app/assets/stylesheets/ltags/PodcastTag.scss

@@ -165,6 +165,9 @@
       height: 130px;
       background: $black;
       margin: auto;
+      animation: var(--podcast-spinning-animation);
+      -webkit-backface-visibility: hidden;
+      animation-play-state: paused;
 
       @media screen and (min-width: 830px) {
         height: inherit;
@@ -188,6 +191,10 @@
   }
 
   .playing {
+    .podcastliquidtag__podcastimage {
+      animation-play-state: running;
+    }
+
     .play-butt {
       display: none;
     }
@@ -195,11 +202,6 @@
     .pause-butt {
       display: block;
     }
-
-    .podcastliquidtag__podcastimage {
-      animation: spin 20s linear infinite;
-      -webkit-backface-visibility: hidden;
-    }
   }
 }
 

app/assets/stylesheets/podcast-episodes-show.scss

@@ -1,5 +1,9 @@
 @import 'variables';
 
+:root {
+  --podcast-spinning-animation: spin 20s linear infinite;
+}
+
 .podcast-episode-container {
   font-family: var(--ff-sans-serif);
 
@@ -126,8 +130,7 @@
     .playing {
       .record {
         .main-image {
-          animation: spin 20s linear infinite;
-          -webkit-backface-visibility: hidden;
+          animation-play-state: running;
         }
         .play-butt {
           display: none;
@@ -161,6 +164,9 @@
         width: 100%;
         height: 100%;
         min-height: 160px;
+        animation: var(--podcast-spinning-animation);
+        animation-play-state: paused;
+        -webkit-backface-visibility: hidden;
         @media screen and (min-width: 680px) {
           width: 290px;
           min-height: 290px;
@@ -181,8 +187,7 @@
       }
       &.playing {
         .main-image {
-          animation: spin 20s linear infinite;
-          -webkit-backface-visibility: hidden;
+          animation-play-state: running;
         }
         .play-butt {
           display: none;