Add summer animation effects with CSS and JavaScript implementation

Jellyfin.Plugin.Seasonals/Web/summer.css

@@ -0,0 +1,80 @@
+.summer-container {
+    display: block;
+    position: fixed;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.summer-bubble {
+    position: fixed;
+    bottom: -50px;
+    z-index: 15;
+    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.05));
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+    
+    will-change: transform, bottom;
+    animation-name: summer-rise, summer-wobble;
+    animation-timing-function: linear, ease-in-out;
+    animation-iteration-count: infinite, infinite;
+    animation-duration: 10s, 3s;
+}
+
+.summer-dust {
+    position: fixed;
+    bottom: -10px;
+    z-index: 12;
+    background-color: rgba(255, 223, 186, 0.6);
+    border-radius: 50%;
+    box-shadow: 0 0 5px rgba(255, 223, 186, 0.4);
+    
+    will-change: transform, bottom;
+    animation-name: summer-rise, summer-drift;
+    animation-timing-function: linear, ease-in-out;
+    animation-iteration-count: infinite, infinite;
+    animation-duration: 20s, 5s;
+}
+
+@keyframes summer-rise {
+    0% {
+        bottom: -10%;
+    }
+    100% {
+        bottom: 110%;
+    }
+}
+
+@keyframes summer-wobble {
+    0% {
+        transform: translateX(0);
+    }
+    33% {
+        transform: translateX(15px);
+    }
+    66% {
+        transform: translateX(-15px);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+@keyframes summer-drift {
+    0% {
+        transform: translateX(0) translateY(0);
+    }
+    50% {
+        transform: translateX(30px) translateY(-20px);
+    }
+    100% {
+        transform: translateX(0) translateY(0);
+    }
+}
+
+