Enhance CSS animations and performance across seasonal styles; add will-change property for smoother transitions and optimize keyframes. [skip ci]

Jellyfin.Plugin.Seasonals/Web/halloween.css

@@ -12,20 +12,12 @@
 }
 
 .halloween {
+    will-change: transform;
     position: fixed;
     bottom: -10%;
     z-index: 15;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
-    -webkit-user-select: none;
     cursor: default;
-    -webkit-animation-name: halloween-fall, halloween-shake;
-    -webkit-animation-duration: 10s, 3s;
-    -webkit-animation-timing-function: linear, ease-in-out;
-    -webkit-animation-iteration-count: infinite, infinite;
-    -webkit-animation-play-state: running, running;
     animation-name: halloween-fall, halloween-shake;
     animation-duration: 10s, 3s;
     animation-timing-function: linear, ease-in-out;
@@ -33,29 +25,7 @@
     animation-play-state: running, running
 }
 
-@-webkit-keyframes halloween-fall {
-    0% {
-        bottom: -10%;
-    }
 
-    100% {
-        bottom: 110%;
-    }
-}
-
-@-webkit-keyframes halloween-shake {
-
-    0%,
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0)
-    }
-
-    50% {
-        -webkit-transform: translateX(80px);
-        transform: translateX(80px)
-    }
-}
 
 @keyframes halloween-fall {
     0% {
@@ -81,73 +51,61 @@
 
 .halloween:nth-of-type(0) {
     left: 1%;
-    -webkit-animation-delay: 0s, 0s;
     animation-delay: 0s, 0s;
 }
 
 .halloween:nth-of-type(1) {
     left: 10%;
-    -webkit-animation-delay: -1s, -1s;
     animation-delay: -1s, -1s;
 }
 
 .halloween:nth-of-type(2) {
     left: 20%;
-    -webkit-animation-delay: -2s, -2s;
     animation-delay: -2s, -2s;
 }
 
 .halloween:nth-of-type(3) {
     left: 30%;
-    -webkit-animation-delay: -3s, -3s;
     animation-delay: -3s, -3s;
 }
 
 .halloween:nth-of-type(4) {
     left: 40%;
-    -webkit-animation-delay: -4s, -4s;
     animation-delay: -4s, -4s;
 }
 
 .halloween:nth-of-type(5) {
     left: 50%;
-    -webkit-animation-delay: -5s, -5s;
     animation-delay: -5s, -5s;
 }
 
 .halloween:nth-of-type(6) {
     left: 60%;
-    -webkit-animation-delay: -6s, -6s;
     animation-delay: -6s, -6s;
 }
 
 .halloween:nth-of-type(7) {
     left: 70%;
-    -webkit-animation-delay: -7s, -7s;
     animation-delay: -7s, -7s;
 }
 
 .halloween:nth-of-type(8) {
     left: 80%;
-    -webkit-animation-delay: -8s, -8s;
     animation-delay: -8s, -8s;
 }
 
 .halloween:nth-of-type(9) {
     left: 90%;
-    -webkit-animation-delay: -9s, -9s;
     animation-delay: -9s, -9s;
 }
 
 .halloween:nth-of-type(10) {
     left: 25%;
-    -webkit-animation-delay: -10s, -10s;
     animation-delay: -10s, -10s;
 }
 
 .halloween:nth-of-type(11) {
     left: 65%;
-    -webkit-animation-delay: -11s, -11s;
     animation-delay: -11s, -11s;
 }
 
@@ -162,7 +120,6 @@
     z-index: 1000;
     overflow: hidden;
     mask-image: linear-gradient(to top, black, transparent);
-    -webkit-mask-image: linear-gradient(to top, black, transparent);
 }
 .halloween-fog-blob {
     position: absolute;
@@ -174,10 +131,12 @@
     filter: blur(15px);
 }
 .halloween-fog-blob:nth-child(1) {
+    will-change: transform;
     left: -20vw;
     animation: fog-float1 25s ease-in-out infinite alternate;
 }
 .halloween-fog-blob:nth-child(2) {
+    will-change: transform;
     left: -50vw;
     background: radial-gradient(ellipse at center, rgba(100, 110, 120, 0.3) 0%, transparent 65%);
     animation: fog-float2 35s ease-in-out infinite alternate;
@@ -196,7 +155,7 @@
 /* --- Spiders --- */
 .halloween-spider-wrapper {
     position: absolute;
-    top: -50px;
+    top: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -204,8 +163,10 @@
     transform-origin: top;
     will-change: transform;
     pointer-events: auto;
-    padding: 20px; /* Increase hit area safely */
+    padding: 20px; /* Increase hit area */
+   translate: 0 -50px;
 }
+
 .halloween-thread {
     width: 30px; /* Wider hit area for mouse interaction */
     height: 100vh;
@@ -223,12 +184,12 @@
     background: linear-gradient(to bottom, rgba(200, 200, 200, 0.1), rgba(200, 200, 200, 0.6));
 }
 .halloween-spider {
+    will-change: transform;
     animation: spider-swing 3s ease-in-out infinite alternate;
     transform-origin: top center;
 }
 
 /* MARK: SPIDER SWAY CONFIGURATION */
-/* Adjust degrees in 'rotate(...)' to change how far spider and thread swing in wind. */
 @keyframes wind-sway {
     0% { transform: rotate(0deg); }
     25% { transform: rotate(2deg); }