Add seasonal effects for Pi Day, Pride, Rain, and Storm; enhance existing styles

- Introduced new CSS and JS files for Pi Day, Pride, Rain, and Storm effects.
- Updated existing seasonal styles (e.g., Halloween, Hearts, Resurrection) to improve performance with 'contain: layout paint'.
- Enhanced animations for seasonal effects, including adjustments to keyframes and element creation logic.
- Added configuration options for new effects in the main seasonals.js file.
- Updated test-site.html to include new seasonal options in the dropdown.

Jellyfin.Plugin.Seasonals/Web/spring.css

@@ -8,6 +8,7 @@
     height: 100vh;
     pointer-events: none;
     z-index: 1000; 
+    contain: layout paint;
 }
 
 /* Pollen */
@@ -37,7 +38,7 @@
     opacity: 0; 
 }
 
-/* Grass */
+/* Grass Container (Wrapper) */
 .spring-grass-container {
     position: absolute;
     bottom: 0;
@@ -45,8 +46,10 @@
     width: 100%;
     height: 80px; 
     pointer-events: none;
+    transform-origin: bottom;
 }
 
+/* HTML Grass Overlayer */
 .spring-grass {
     position: absolute;
     bottom: 0;
@@ -61,6 +64,45 @@
     animation-iteration-count: infinite;
 }
 
+@keyframes spring-grass-sway {
+    0% { transform: rotate(0deg); }
+    50% { transform: rotate(8deg); }
+    100% { transform: rotate(0deg); }
+}
+
+/* SVG Meadow Layer */
+.spring-meadow-layer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    animation: spring-grow-meadow 3s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
+}
+
+.spring-meadow {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+@keyframes spring-grow-meadow {
+    0%   { transform: translateY(100%); opacity: 0; }
+    100% { transform: translateY(0); opacity: 0.95; }
+}
+
+.spring-sway {
+    transform-origin: bottom center;
+    animation: spring-meadow-sway 4s ease-in-out infinite alternate;
+}
+
+@keyframes spring-meadow-sway {
+    0%   { transform: skewX(-2deg); }
+    100% { transform: skewX(2deg); }
+}
+
 /* Birds */
 .spring-bird {
     position: static !important; 
@@ -123,6 +165,11 @@
     top: 0; left: 0;
 }
 
+.spring-align-y {
+    width: 100%; height: 100%;
+    will-change: transform;
+}
+
 .spring-mirror-wrapper {
     width: 100%; height: 100%;
     will-change: transform;
@@ -144,11 +191,7 @@
     100% { opacity: 0; transform: rotate(var(--beam-rotation, 45deg)) scaleX(0.8); }
 }
 
-@keyframes spring-grass-sway {
-    0% { transform: rotate(0deg); }
-    50% { transform: rotate(8deg); }
-    100% { transform: rotate(0deg); }
-}
+
 
 /* Wrapper animations (Flight across screen) */
 @keyframes spring-fly-right-wrapper {
@@ -163,8 +206,8 @@
 
 /* Vertical Drift for Sloped Flight */
 @keyframes spring-vertical-drift {
-    0% { top: var(--start-y, 10%); }
-    100% { top: var(--end-y, 10%); }
+    0% { transform: translateY(var(--start-y, 10vh)); }
+    100% { transform: translateY(var(--end-y, 10vh)); }
 }
 
 /* Inner animations (Bobbing/Fluttering) */