Reduce z-index of matrix-container to improve stacking context and prevent overlap issues [skip ci]

Add checks for container presence in animation functions to prevent errors when elements are removed from the DOM [skip ci]
Fix positioning of olympia-symbol and adjust ring CSS for improved alignment [skip ci]
2026-02-27 04:08:00 +01:00 · 2026-02-27 04:07:29 +01:00 · 2026-02-27 03:59:19 +01:00 · 2026-02-27 03:58:34 +01:00 · 2026-02-27 03:53:05 +01:00 · 2026-02-27 03:42:23 +01:00
38 changed files with 556 additions and 702 deletions
--- a/Jellyfin.Plugin.Seasonals/Web/autumn.css
+++ b/Jellyfin.Plugin.Seasonals/Web/autumn.css
@@ -1,164 +1,139 @@
-.autumn-container {
-  display: block;
-  position: fixed;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-  contain: layout paint;
-}
-
-.leaf {
-  position: fixed;
-  z-index: 15;
-  top: 0;
-  will-change: transform;
-  translate: 0 -10vh;
-  font-size: 1em;
-  color: #fff;
-  font-family: Arial, sans-serif;
-  text-shadow: 0 0 5px #000;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: default;
-  -webkit-animation-name: leaf-fall, leaf-shake;
-  -webkit-animation-duration: 7s, 4s;
-  -webkit-animation-timing-function: linear, ease-in-out;
-  -webkit-animation-iteration-count: infinite, infinite;
-  -webkit-user-select: none;
-  animation-name: leaf-fall, leaf-shake;
-  animation-duration: 7s, 4s;
-  animation-timing-function: linear, ease-in-out;
-  animation-iteration-count: infinite, infinite;
-}
-
-/* Class to disable rotation */
-.no-rotation {
-  --rotate-start: 0deg !important;
-  --rotate-end: 0deg !important;
-}
-
-@-webkit-keyframes leaf-fall {
-  0% {
-    translate: 0 -10vh;
-  }
-
-  100% {
-    translate: 0 100vh;
-  }
-}
-
-@keyframes leaf-fall {
-  0% {
-    translate: 0 -10vh;
-  }
-
-  100% {
-    translate: 0 100vh;
-  }
-}
-
-@-webkit-keyframes leaf-shake {
-  0%, 100% {
-    transform: translateX(0) rotate(var(--rotate-start, -20deg));
-  }
-  50% {
-    transform: translateX(80px) rotate(var(--rotate-end, 20deg));
-  }
-}
-
-@keyframes leaf-shake {
-  0%, 100% {
-    transform: translateX(0) rotate(var(--rotate-start, -20deg));
-  }
-  50% {
-    transform: translateX(80px) rotate(var(--rotate-end, 20deg));
-  }
-}
-
-.leaf:nth-of-type(0) {
-  left: 0%;
-  animation-delay: 0s, 0s;
-  --rotate-start: -25deg;
-  --rotate-end: 22deg;
-}
-
-.leaf:nth-of-type(1) {
-  left: 10%;
-  animation-delay: 1s, 0.5s;
-  --rotate-start: -32deg;
-  --rotate-end: 35deg;
-}
-
-.leaf:nth-of-type(2) {
-  left: 20%;
-  animation-delay: 6s, 1s;
-  --rotate-start: -28deg;
-  --rotate-end: 28deg;
-}
-
-.leaf:nth-of-type(3) {
-  left: 30%;
-  animation-delay: 4s, 1.5s;
-  --rotate-start: -38deg;
-  --rotate-end: 32deg;
-}
-
-.leaf:nth-of-type(4) {
-  left: 40%;
-  animation-delay: 2s, 0.8s;
-  --rotate-start: -22deg;
-  --rotate-end: 38deg;
-}
-
-.leaf:nth-of-type(5) {
-  left: 50%;
-  animation-delay: 8s, 2s;
-  --rotate-start: -35deg;
-  --rotate-end: 25deg;
-}
-
-.leaf:nth-of-type(6) {
-  left: 60%;
-  animation-delay: 6s, 1.2s;
-  --rotate-start: -40deg;
-  --rotate-end: 40deg;
-}
-
-.leaf:nth-of-type(7) {
-  left: 70%;
-  animation-delay: 2.5s, 0.3s;
-  --rotate-start: -30deg;
-  --rotate-end: 30deg;
-}
-
-.leaf:nth-of-type(8) {
-  left: 80%;
-  animation-delay: 1s, 1.8s;
-  --rotate-start: -26deg;
-  --rotate-end: 36deg;
-}
-
-.leaf:nth-of-type(9) {
-  left: 90%;
-  animation-delay: 3s, 0.7s;
-  --rotate-start: -34deg;
-  --rotate-end: 24deg;
-}
-
-.leaf:nth-of-type(10) {
-  left: 25%;
-  animation-delay: 2s, 2.3s;
-  --rotate-start: -29deg;
-  --rotate-end: 33deg;
-}
-
-.leaf:nth-of-type(11) {
-  left: 65%;
-  animation-delay: 4s, 1.4s;
-  --rotate-start: -37deg;
-  --rotate-end: 27deg;
+.autumn-container {
+  display: block;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+  contain: layout paint;
+}
+
+.leaf {
+  position: fixed;
+  z-index: 15;
+  top: 0;
+  will-change: transform;
+  translate: 0 -10vh;
+  font-size: 1em;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  text-shadow: 0 0 5px #000;
+  user-select: none;
+  cursor: default;
+  animation-name: leaf-fall, leaf-shake;
+  animation-duration: 7s, 4s;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
+}
+
+/* Class to disable rotation */
+.no-rotation {
+  --rotate-start: 0deg !important;
+  --rotate-end: 0deg !important;
+}
+
+
+@keyframes leaf-fall {
+  0% {
+    translate: 0 -10vh;
+  }
+
+  100% {
+    translate: 0 100vh;
+  }
+}
+
+
+@keyframes leaf-shake {
+  0%, 100% {
+    transform: translateX(0) rotate(var(--rotate-start, -20deg));
+  }
+  50% {
+    transform: translateX(80px) rotate(var(--rotate-end, 20deg));
+  }
+}
+
+.leaf:nth-of-type(0) {
+  left: 0%;
+  animation-delay: 0s, 0s;
+  --rotate-start: -25deg;
+  --rotate-end: 22deg;
+}
+
+.leaf:nth-of-type(1) {
+  left: 10%;
+  animation-delay: 1s, 0.5s;
+  --rotate-start: -32deg;
+  --rotate-end: 35deg;
+}
+
+.leaf:nth-of-type(2) {
+  left: 20%;
+  animation-delay: 6s, 1s;
+  --rotate-start: -28deg;
+  --rotate-end: 28deg;
+}
+
+.leaf:nth-of-type(3) {
+  left: 30%;
+  animation-delay: 4s, 1.5s;
+  --rotate-start: -38deg;
+  --rotate-end: 32deg;
+}
+
+.leaf:nth-of-type(4) {
+  left: 40%;
+  animation-delay: 2s, 0.8s;
+  --rotate-start: -22deg;
+  --rotate-end: 38deg;
+}
+
+.leaf:nth-of-type(5) {
+  left: 50%;
+  animation-delay: 8s, 2s;
+  --rotate-start: -35deg;
+  --rotate-end: 25deg;
+}
+
+.leaf:nth-of-type(6) {
+  left: 60%;
+  animation-delay: 6s, 1.2s;
+  --rotate-start: -40deg;
+  --rotate-end: 40deg;
+}
+
+.leaf:nth-of-type(7) {
+  left: 70%;
+  animation-delay: 2.5s, 0.3s;
+  --rotate-start: -30deg;
+  --rotate-end: 30deg;
+}
+
+.leaf:nth-of-type(8) {
+  left: 80%;
+  animation-delay: 1s, 1.8s;
+  --rotate-start: -26deg;
+  --rotate-end: 36deg;
+}
+
+.leaf:nth-of-type(9) {
+  left: 90%;
+  animation-delay: 3s, 0.7s;
+  --rotate-start: -34deg;
+  --rotate-end: 24deg;
+}
+
+.leaf:nth-of-type(10) {
+  left: 25%;
+  animation-delay: 2s, 2.3s;
+  --rotate-start: -29deg;
+  --rotate-end: 33deg;
+}
+
+.leaf:nth-of-type(11) {
+  left: 65%;
+  animation-delay: 4s, 1.4s;
  --rotate-start: -37deg;
--- a/Jellyfin.Plugin.Seasonals/Web/birthday.css
+++ b/Jellyfin.Plugin.Seasonals/Web/birthday.css
@@ -5,12 +5,14 @@
    width: 100vw;
    height: 100vh;
    pointer-events: none;
-    z-index: 9999;
+    z-index: 10;
    overflow: hidden;
    contain: strict;
+    contain: layout paint;
 }

 .birthday-symbol {
+    will-change: opacity;
    position: fixed;
    top: 0;
    left: 0;
@@ -29,7 +31,7 @@
 }

 .birthday-inner {
-    pointer-events: auto; /* Allow hover over the actual item */
+    pointer-events: auto;
    cursor: crosshair;
    display: inline-block;
 }
@@ -138,7 +140,7 @@
        opacity: 1;
    }
    100% {
-        transform: translateY(calc(var(--burst-y) + 150px)); /* Gravity pull downwards */
+        transform: translateY(calc(var(--burst-y) + 150px));
        opacity: 0;
    }
 }
--- a/Jellyfin.Plugin.Seasonals/Web/birthday.js
+++ b/Jellyfin.Plugin.Seasonals/Web/birthday.js
@@ -228,7 +228,19 @@ function createBirthday() {
                    // Ensure the burst container is appended to the main document body or the birthday container
                    createBalloonPopConfetti(document.body, cx, cy, balloonColors[randomItem]);
                }
-            }, { once: true });
+            });
+
+            // Reset the balloon when it reappears at the bottom of the screen
+            symbol.addEventListener('animationiteration', function(e) {
+                // Ignore bubbling events from the inner sway animation
+                if (e.animationName === 'birthday-rise' || e.target === symbol) {
+                    if (innerDiv.classList.contains('popped')) {
+                        innerDiv.classList.remove('popped');
+                        innerDiv.style.animation = '';
+                        innerDiv.style.pointerEvents = 'auto';
+                    }
+                }
+            });
        }

        const startRot = (Math.random() * 20) - 10; // -10 to +10 spread
--- a/Jellyfin.Plugin.Seasonals/Web/christmas.css
+++ b/Jellyfin.Plugin.Seasonals/Web/christmas.css
@@ -1,138 +1,112 @@
-.christmas-container {
-  display: block;
-  position: fixed;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-  contain: layout paint;
-}
-
-.christmas {
-  position: fixed;
-  z-index: 15;
-  top: 0;
-  will-change: transform;
-  translate: 0 -10vh;
-  font-size: 1em;
-  color: #fff;
-  font-family: Arial, sans-serif;
-  text-shadow: 0 0 5px #000;
-  user-select: none;
-  cursor: default;
-  -webkit-user-select: none;
-  -webkit-animation-name: christmas-fall, christmas-shake;
-  -webkit-animation-duration: 10s, 3s;
-  -webkit-animation-timing-function: linear, ease-in-out;
-  -webkit-animation-iteration-count: infinite, infinite;
-  animation-name: christmas-fall, christmas-shake;
-  animation-duration: 10s, 3s;
-  animation-timing-function: linear, ease-in-out;
-  animation-iteration-count: infinite, infinite;
-}
-
-@-webkit-keyframes christmas-fall {
-  0% {
-    translate: 0 -10vh;
-  }
-
-  100% {
-    translate: 0 110vh;
-  }
-}
-
-@-webkit-keyframes christmas-shake {
-
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-
-  50% {
-    transform: translateX(80px);
-  }
-}
-
-@keyframes christmas-fall {
-  0% {
-    translate: 0 -10vh;
-  }
-
-  100% {
-    translate: 0 110vh;
-  }
-}
-
-@keyframes christmas-shake {
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-
-  50% {
-    transform: translateX(80px);
-  }
-}
-
-.christmas:nth-of-type(0) {
-  left: 0%;
-  animation-delay: 0s, 0s;
-}
-
-.christmas:nth-of-type(1) {
-  left: 10%;
-  animation-delay: 1s, 1s;
-}
-
-.christmas:nth-of-type(2) {
-  left: 20%;
-  animation-delay: 6s, 0.5s;
-}
-
-.christmas:nth-of-type(3) {
-  left: 30%;
-  animation-delay: 4s, 2s;
-}
-
-.christmas:nth-of-type(4) {
-  left: 40%;
-  animation-delay: 2s, 2s;
-}
-
-.christmas:nth-of-type(5) {
-  left: 50%;
-  animation-delay: 8s, 3s;
-}
-
-.christmas:nth-of-type(6) {
-  left: 60%;
-  animation-delay: 6s, 2s;
-}
-
-.christmas:nth-of-type(7) {
-  left: 70%;
-  animation-delay: 2.5s, 1s;
-}
-
-.christmas:nth-of-type(8) {
-  left: 80%;
-  animation-delay: 1s, 0s;
-}
-
-.christmas:nth-of-type(9) {
-  left: 90%;
-  animation-delay: 3s, 1.5s;
-}
-
-.christmas:nth-of-type(10) {
-  left: 25%;
-  animation-delay: 2s, 0s;
-}
-
-.christmas:nth-of-type(11) {
-  left: 65%;
-  animation-delay: 4s, 2.5s;
+.christmas-container {
+  display: block;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+  contain: layout paint;
+}
+
+.christmas {
+  position: fixed;
+  z-index: 15;
+  top: 0;
+  will-change: transform;
+  translate: 0 -10vh;
+  font-size: 1em;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  text-shadow: 0 0 5px #000;
+  user-select: none;
+  cursor: default;
+  animation-name: christmas-fall, christmas-shake;
+  animation-duration: 10s, 3s;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
+}
+
+
+
+@keyframes christmas-fall {
+  0% {
+    translate: 0 -10vh;
+  }
+
+  100% {
+    translate: 0 110vh;
+  }
+}
+
+@keyframes christmas-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(80px);
+  }
+}
+
+.christmas:nth-of-type(0) {
+  left: 0%;
+  animation-delay: 0s, 0s;
+}
+
+.christmas:nth-of-type(1) {
+  left: 10%;
+  animation-delay: 1s, 1s;
+}
+
+.christmas:nth-of-type(2) {
+  left: 20%;
+  animation-delay: 6s, 0.5s;
+}
+
+.christmas:nth-of-type(3) {
+  left: 30%;
+  animation-delay: 4s, 2s;
+}
+
+.christmas:nth-of-type(4) {
+  left: 40%;
+  animation-delay: 2s, 2s;
+}
+
+.christmas:nth-of-type(5) {
+  left: 50%;
+  animation-delay: 8s, 3s;
+}
+
+.christmas:nth-of-type(6) {
+  left: 60%;
+  animation-delay: 6s, 2s;
+}
+
+.christmas:nth-of-type(7) {
+  left: 70%;
+  animation-delay: 2.5s, 1s;
+}
+
+.christmas:nth-of-type(8) {
+  left: 80%;
+  animation-delay: 1s, 0s;
+}
+
+.christmas:nth-of-type(9) {
+  left: 90%;
+  animation-delay: 3s, 1.5s;
+}
+
+.christmas:nth-of-type(10) {
+  left: 25%;
+  animation-delay: 2s, 0s;
+}
+
+.christmas:nth-of-type(11) {
+  left: 65%;
  animation-delay: 4s, 2.5s;
--- a/Jellyfin.Plugin.Seasonals/Web/earthday.css
+++ b/Jellyfin.Plugin.Seasonals/Web/earthday.css
@@ -7,9 +7,11 @@
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
+    contain: layout paint;
 }

 .earthday-meadow {
+    will-change: transform;
    position: absolute;
    bottom: 0;
    left: 0;
@@ -25,6 +27,7 @@
 }

 .earthday-sway {
+    will-change: transform;
    transform-origin: bottom center;
    animation: sway-grass 4s ease-in-out infinite alternate;
 }
--- a/Jellyfin.Plugin.Seasonals/Web/easter.css
+++ b/Jellyfin.Plugin.Seasonals/Web/easter.css
@@ -9,6 +9,7 @@
    z-index: 10000;
    contain: strict;
    overflow: hidden;
+    contain: layout paint;
 }

 .easter-grass-container {
@@ -38,6 +39,7 @@

 /* sway */
 .easter-sway {
+    will-change: transform;
    transform-origin: bottom center;
    animation: easter-wind-sway 6s ease-in-out infinite alternate;
 }
--- a/Jellyfin.Plugin.Seasonals/Web/easter.js
+++ b/Jellyfin.Plugin.Seasonals/Web/easter.js
@@ -197,6 +197,8 @@ function animateRabbit(rabbit) {

    rabbit.style.transition = 'none';
    const transformScale = startFromLeft ? 'scaleX(-1)' : '';
+    // Fix bounding box center-of-gravity shift when graphic is flipped
+    rabbit.style.transformOrigin = startFromLeft ? '59% 50%' : '50% 50%';
    rabbit.style.transform = `translateX(${currentX}vw) ${transformScale}`;

    const loopDurationMs = jumpDurationMs + pauseDurationMs;
@@ -211,10 +213,10 @@ function animateRabbit(rabbit) {

        if (!startTime) {
            startTime = timestamp;
-            // resetting gif, forces the browser to restart the GIF from the first frame (crucial for syncing hops with movement)
+            // resetting gif, appending a timestamp cache-buster forces the browser 
+            // to reload and start the GIF strictly from the first frame.
            const currSrc = rabbit.src.split('?')[0];
-            rabbit.src = '';
-            rabbit.src = currSrc;
+            rabbit.src = currSrc + '?t=' + Date.now();
        }

        const elapsed = timestamp - startTime;
@@ -243,6 +245,7 @@ function animateRabbit(rabbit) {

            isAnimating = false;
            rabbitTimeout = setTimeout(() => {
+                if (!document.body.contains(rabbit)) return;
                animateRabbit(document.querySelector('#rabbit'));
            }, restTime);
            return;
--- a/Jellyfin.Plugin.Seasonals/Web/eid.css
+++ b/Jellyfin.Plugin.Seasonals/Web/eid.css
@@ -9,6 +9,7 @@
    z-index: 10;
    contain: strict;
    overflow: hidden;
+    contain: layout paint;
 }

 .eid-symbol {
@@ -18,12 +19,14 @@
 }

 .eid-symbol.floating-star {
+    will-change: opacity;
    opacity: 0;
    animation: eid-twinkle 4s ease-in-out infinite;
    mix-blend-mode: screen;
 }

 .lantern-rope {
+    will-change: transform;
    position: absolute;
    top: 0;
    width: 2px;
--- a/Jellyfin.Plugin.Seasonals/Web/filmnoir.css
+++ b/Jellyfin.Plugin.Seasonals/Web/filmnoir.css
@@ -22,8 +22,9 @@

 /* Film grain */
 .filmnoir-grain {
+    will-change: transform, opacity;
    position: absolute;
-    top: -50%;
+    top: 0;
    left: -50%;
    width: 200%;
    height: 200%;
@@ -32,6 +33,7 @@
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.3;
+    translate: 0 -50vh;
 }

 /* Vignette */
@@ -48,6 +50,7 @@

 /* Occasional flicker and scratch */
 .filmnoir-scratches {
+    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
--- a/Jellyfin.Plugin.Seasonals/Web/fireworks.css
+++ b/Jellyfin.Plugin.Seasonals/Web/fireworks.css
@@ -11,9 +11,10 @@
 }

 .rocket-trail {
+  will-change: transform;
  position: absolute;
  left: var(--trailX);
-  top: var(--trailStartY);
+  top: 0;
  width: 4px;

  /* activate the following for rocket trail */
@@ -28,6 +29,7 @@
  box-shadow: 0 0 8px 2px white;*/

  animation: rocket-trail-animation 1s linear forwards;
+  translate: 0 var(--trailStartY);
 }

@keyframes rocket-trail-animation {
@@ -56,6 +58,7 @@
 }

 .firework {
+  will-change: transform;
  position: absolute;
  width: 5px;
  height: 5px;
--- a/Jellyfin.Plugin.Seasonals/Web/fireworks.js
+++ b/Jellyfin.Plugin.Seasonals/Web/fireworks.js
@@ -162,6 +162,7 @@ function startFireworks() {
  }

  fireworksInterval = setInterval(() => {
+    if (!document.body.contains(fireworkContainer)) { clearInterval(fireworksInterval); return; }
    const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks;
    for (let i = 0; i < randomCount; i++) {
      setTimeout(() => {
--- a/Jellyfin.Plugin.Seasonals/Web/friday13.js
+++ b/Jellyfin.Plugin.Seasonals/Web/friday13.js
@@ -61,12 +61,12 @@ function createFriday13(container) {
                cat.parentNode.removeChild(cat);
            }
            // Respawn with random delay between 5 to 25 seconds
-            setTimeout(spawnCat, Math.random() * 20000 + 5000);
+            setTimeout(() => { if (document.body.contains(container)) spawnCat(); }, Math.random() * 20000 + 5000);
        }, (catWalkDurationSeconds * 1000) + 500); // Wait for duration + 500ms safety margin
    }
    
    // Initial spawn with random delay
-    setTimeout(spawnCat, Math.random() * 5000);
+    setTimeout(() => { if (document.body.contains(container)) spawnCat(); }, Math.random() * 5000);
 }

 function initializeFriday13() {
--- a/Jellyfin.Plugin.Seasonals/Web/frost.css
+++ b/Jellyfin.Plugin.Seasonals/Web/frost.css
@@ -9,16 +9,17 @@
    z-index: 10;
    overflow: hidden;
    contain: strict;
+    contain: layout paint;
 }

 .frost-layer {
+    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
-    /* A glowing white-blue gradient from edges */
    background: radial-gradient(ellipse at center, transparent 60%, rgba(180, 220, 255, 0.4) 100%);
    box-shadow: inset 0 0 60px rgba(200, 230, 255, 0.5), inset 0 0 120px rgba(255, 255, 255, 0.3);
    
@@ -27,14 +28,13 @@
    animation: frost-creep 4s ease-out forwards;
 }

-/* Subtle repeating star/crystal pattern */
 .frost-crystals {
+    will-change: transform;
    position: absolute;
-    top: -5%;
+    top: 0;
    left: -5%;
    width: 110%;
    height: 110%;
-    /* Use multi-layered star patterns for a random, crystalline spread */
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.2)"/><circle cx="40" cy="30" r="1" fill="rgba(255,255,255,0.15)"/><circle cx="20" cy="50" r="2" fill="rgba(255,255,255,0.1)"/><path d="M50 10 L51 15 L56 16 L51 17 L50 22 L49 17 L44 16 L49 15 Z" fill="rgba(255,255,255,0.2)"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="5" cy="20" r="1" fill="rgba(255,255,255,0.15)"/><circle cx="25" cy="5" r="1.5" fill="rgba(255,255,255,0.1)"/><path d="M20 20 L21 23 L24 24 L21 25 L20 28 L19 25 L16 24 L19 23 Z" fill="rgba(255,255,255,0.15)"/></svg>'),
@@ -43,12 +43,9 @@
    background-size: 110px 110px, 60px 60px, 30px 30px;
    background-position: 0 0, 15px 15px, 5px 10px;
    mix-blend-mode: overlay;
-    
-    /* Mask out the center so crystals only appear strongly on the edges */
-    -webkit-mask-image: radial-gradient(ellipse at center, transparent 50%, black 100%);
    mask-image: radial-gradient(ellipse at center, transparent 50%, black 100%);
-    
    animation: frost-shimmer 6s infinite alternate ease-in-out;
+    translate: 0 -5vh;
 }

@keyframes frost-creep {
--- a/Jellyfin.Plugin.Seasonals/Web/halloween.css
+++ b/Jellyfin.Plugin.Seasonals/Web/halloween.css
@@ -7,25 +7,17 @@
    width: 100%;
    height: 100%;
    pointer-events: none;
-    z-index: 10000;
+    z-index: 10;
    contain: layout paint;
 }

 .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); }
--- a/Jellyfin.Plugin.Seasonals/Web/halloween.js
+++ b/Jellyfin.Plugin.Seasonals/Web/halloween.js
@@ -182,14 +182,18 @@ function createSpider(container) {
        
        setTimeout(() => {
            wrapper.remove();
-            setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+            if (document.body.contains(container)) {
+                setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+            }
        }, 500);
    });
    
    wrapper.addEventListener('animationend', () => {
        if (isRetreating) return;
        wrapper.remove();
-        setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+        if (document.body.contains(container)) {
+            setTimeout(() => createSpider(container), Math.random() * 5000 + 1000);
+        }
    });
    
    container.appendChild(wrapper);
@@ -223,7 +227,9 @@ function createMouse(container) {
    
    mouse.addEventListener('animationend', () => {
        mouse.remove();
-        setTimeout(() => createMouse(container), Math.random() * 4000 + 2000);
+        if (document.body.contains(container)) {
+            setTimeout(() => createMouse(container), Math.random() * 4000 + 2000);
+        }
    });
    
    container.appendChild(mouse);
--- a/Jellyfin.Plugin.Seasonals/Web/hearts.css
+++ b/Jellyfin.Plugin.Seasonals/Web/hearts.css
@@ -12,48 +12,21 @@
 }

 .heart {
+    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: heart-fall, heart-shake;
-    -webkit-animation-duration: 14s, 5s;
-    -webkit-animation-timing-function: linear, ease-in-out;
-    -webkit-animation-iteration-count: infinite, infinite;
    animation-name: heart-fall, heart-shake;
    animation-duration: 14s, 5s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
 }

-@-webkit-keyframes heart-fall {
-    0% {
-        bottom: -10%;
-    }

-    100% {
-        bottom: 110%;
-    }
-}
-
-@-webkit-keyframes heart-shake {
-
-    0%,
-    100% {
-        -webkit-transform: translateX(0);
-        transform: translateX(0)
-    }
-
-    50% {
-        -webkit-transform: translateX(80px);
-        transform: translateX(80px)
-    }
-}

@keyframes heart-fall {
    0% {
@@ -79,72 +52,60 @@

 .heart:nth-of-type(0) {
    left: 1%;
-    -webkit-animation-delay: 0s, 0s;
    animation-delay: 0s, 0s
 }

 .heart:nth-of-type(1) {
    left: 10%;
-    -webkit-animation-delay: 1s, 1s;
    animation-delay: 1s, 1s
 }

 .heart:nth-of-type(2) {
    left: 20%;
-    -webkit-animation-delay: 6s, .5s;
    animation-delay: 6s, .5s
 }

 .heart:nth-of-type(3) {
    left: 30%;
-    -webkit-animation-delay: 4s, 2s;
    animation-delay: 4s, 2s
 }

 .heart:nth-of-type(4) {
    left: 40%;
-    -webkit-animation-delay: 2s, 2s;
    animation-delay: 2s, 2s
 }

 .heart:nth-of-type(5) {
    left: 50%;
-    -webkit-animation-delay: 8s, 3s;
    animation-delay: 8s, 3s
 }

 .heart:nth-of-type(6) {
    left: 60%;
-    -webkit-animation-delay: 6s, 2s;
    animation-delay: 6s, 2s
 }

 .heart:nth-of-type(7) {
    left: 70%;
-    -webkit-animation-delay: 2.5s, 1s;
    animation-delay: 2.5s, 1s
 }

 .heart:nth-of-type(8) {
    left: 80%;
-    -webkit-animation-delay: 1s, 0s;
    animation-delay: 1s, 0s
 }

 .heart:nth-of-type(9) {
    left: 90%;
-    -webkit-animation-delay: 3s, 1.5s;
    animation-delay: 3s, 1.5s
 }

 .heart:nth-of-type(10) {
    left: 25%;
-    -webkit-animation-delay: 2s, 0s;
    animation-delay: 2s, 0s
 }

 .heart:nth-of-type(11) {
    left: 65%;
-    -webkit-animation-delay: 4s, 2.5s;
    animation-delay: 4s, 2.5s
 }
--- a/Jellyfin.Plugin.Seasonals/Web/marioday.css
+++ b/Jellyfin.Plugin.Seasonals/Web/marioday.css
@@ -29,11 +29,13 @@
 }

 .mario-jump {
+    will-change: transform;
    animation: jump-arc 0.8s ease-in-out;
 }

 /* 8-bit coin styling */
 .mario-coin {
+    will-change: transform;
    position: absolute;
    width: 32px;
    height: 32px;
@@ -47,11 +49,12 @@
 .mario-coin::after {
    content: '';
    position: absolute;
-    top: 6px;
+    top: 0;
    left: 10px;
    width: 4px;
    height: 12px;
    background: #daa520;
+    translate: 0 6px;
 }

@keyframes mario-run {
--- a/Jellyfin.Plugin.Seasonals/Web/marioday.js
+++ b/Jellyfin.Plugin.Seasonals/Web/marioday.js
@@ -51,8 +51,9 @@ function createMarioDay(container) {
    container.appendChild(wrapper);
    
    // Periodically throw out an 8-bit coin
-    setInterval(() => {
-        if (!document.querySelector('.marioday-container')) return;
+    const intervalId = setInterval(() => {
+        if (!document.body.contains(container)) { clearInterval(intervalId); return; }
+        if (container.style.display === 'none') return;
        const coin = document.createElement('div');
        coin.className = 'mario-coin';
        
--- a/Jellyfin.Plugin.Seasonals/Web/matrix.css
+++ b/Jellyfin.Plugin.Seasonals/Web/matrix.css
@@ -5,7 +5,7 @@
    width: 100vw;
    height: 100vh;
    pointer-events: none;
-    z-index: 1000;
+    z-index: 10;
    overflow: hidden;
    contain: layout paint;
 }
--- a/Jellyfin.Plugin.Seasonals/Web/matrix.js
+++ b/Jellyfin.Plugin.Seasonals/Web/matrix.js
@@ -136,6 +136,7 @@ function createElements() {
  for(let i=0; i<maxTrails; i++) trails.push(new Trail());

  function loop() {
+      if (!document.body.contains(container)) { clearInterval(window.matrixInterval); return; }
      if (isHidden) return; // Pause drawing when hidden
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.font = 'bold ' + fontSize + 'px monospace';
--- a/Jellyfin.Plugin.Seasonals/Web/oktoberfest.css
+++ b/Jellyfin.Plugin.Seasonals/Web/oktoberfest.css
@@ -12,13 +12,15 @@
 }

 .oktoberfest-symbol {
+    will-change: transform;
    position: absolute;
-    top: -10%;
+    top: 0;
    font-size: 2.2em;
    user-select: none;
    animation-name: oktoberfest-fall, oktoberfest-sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
+    translate: 0 -10vh;
 }

@keyframes oktoberfest-fall {
--- a/Jellyfin.Plugin.Seasonals/Web/olympia.css
+++ b/Jellyfin.Plugin.Seasonals/Web/olympia.css
@@ -12,10 +12,11 @@

 .olympia-symbol {
    position: absolute;
-    top: -10vh;
+    top: 0;
    opacity: 0.95;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
    z-index: 40;
+    translate: 0 -10vh;
 }

 .olympia-flame {
@@ -34,8 +35,8 @@
 .olympia-ring-css::before {
    content: '';
    position: absolute;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    translate: -50% -50%;
    width: 30px;
    height: 30px;
    border: 5px solid #0081C8; /* Default blue ring */
@@ -46,13 +47,15 @@
 }
 .olympia-symbol {
    position: absolute;
-    top: -10vh;
+    top: 0;
    opacity: 0.95;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
    z-index: 40;
+    translate: 0 -10vh;
 }

 .olympia-inner {
+    will-change: transform;
    display: inline-block;
    animation: olympia-sway linear infinite alternate;
 }
--- a/Jellyfin.Plugin.Seasonals/Web/oscar.css
+++ b/Jellyfin.Plugin.Seasonals/Web/oscar.css
@@ -6,7 +6,7 @@
    width: 100%;
    height: 100%;
    pointer-events: none;
-    z-index: 10; /* Behind popups but over background */
+    z-index: 10;
    contain: strict;
    overflow: hidden;
 }
@@ -30,8 +30,9 @@
 }

 .oscar-spotlight {
+    will-change: transform;
    position: absolute;
-    top: -10vh;
+    top: 0;
    /* MARK: SPOTLIGHT WIDTH CONFIGURATION */
    /* To adjust bottom width (spread), change 'width' property (e.g., 20vw for narrow, 40vw for wide). */
    /* To adjust top width (origin), modify first two percentages in 'clip-path' (e.g., 48% 0, 52% 0 for a very thin start). */
@@ -42,9 +43,11 @@
    transform-origin: top center;
    animation: spotlight-sweep 12s infinite alternate ease-in-out;
    mix-blend-mode: screen;
+     translate: 0 -10vh;
 }

 .oscar-flash {
+    will-change: transform;
    position: absolute;
    width: 10px;
    height: 10px;
--- a/Jellyfin.Plugin.Seasonals/Web/oscar.js
+++ b/Jellyfin.Plugin.Seasonals/Web/oscar.js
@@ -56,9 +56,9 @@ function createOscar(container) {
    container.appendChild(carpet);
    container.appendChild(spotlights);
    
-    // Paparazzi flashes with randomized intervals
    function flashLoop() {
-        if (!document.querySelector('.oscar-container')) {
+        if (!document.body.contains(container)) return; // Kill the loop if container is removed
+        if (container.style.display === 'none') {
            setTimeout(flashLoop, 1000); // Check again later if hidden
            return;
        }
--- a/Jellyfin.Plugin.Seasonals/Web/pride.css
+++ b/Jellyfin.Plugin.Seasonals/Web/pride.css
@@ -5,7 +5,7 @@
    width: 100vw;
    height: 100vh;
    pointer-events: none;
-    z-index: 9999;
+    z-index: 10;
    overflow: hidden;
    contain: layout paint;
 }
--- a/Jellyfin.Plugin.Seasonals/Web/pride.js
+++ b/Jellyfin.Plugin.Seasonals/Web/pride.js
@@ -1,4 +1,3 @@
-// 1. Read Configuration
 const config = window.SeasonalsPluginConfig?.Pride || {};

 const enabled = config.EnablePride !== undefined ? config.EnablePride : true;
@@ -8,8 +7,6 @@ const colorHeader = config.ColorHeader !== undefined ? config.ColorHeader : true

 let msgPrinted = false;

-// 2. Toggle Function
-// Hides the effect when a video player, trailer (in full width mode), dashboard, or user menu is active.
 function togglePride() {
  const container = document.querySelector('.pride-container');
  if (!container) return;
@@ -34,8 +31,6 @@ function togglePride() {
  }
 }

-// 3. MutationObserver
-// Watches the DOM for changes so the effect can auto-hide/show.
 const observer = new MutationObserver(togglePride);
 observer.observe(document.body, {
  childList: true,
@@ -43,8 +38,6 @@ observer.observe(document.body, {
  attributes: true
 });

-// 4. Element Creation
-// Create and append your animated elements to the container.
 function createElements() {
  const container = document.querySelector('.pride-container') || document.createElement('div');

@@ -82,7 +75,6 @@ function createElements() {
  }
 }

-// 5. Initialization
 function initializePride() {
  if (!enabled) return;
  createElements();
--- a/Jellyfin.Plugin.Seasonals/Web/resurrection.css
+++ b/Jellyfin.Plugin.Seasonals/Web/resurrection.css
@@ -1,68 +1,66 @@
-.resurrection-container {
-    display: block;
-    position: fixed;
-    overflow: hidden;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 10;
-    contain: layout paint;
-}
-
-.resurrection-symbol {
-    position: fixed;
-    z-index: 15;
-    top: 0;
-    translate: 0 -15vh;
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: default;
-    animation-name: resurrection-fall;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    will-change: transform;
-}
-
-.resurrection-sway-wrapper {
-    will-change: transform;
-    animation-name: resurrection-sway;
-    animation-timing-function: ease-in-out;
-    animation-iteration-count: infinite;
-}
-
-.resurrection-symbol img {
-    z-index: 15;
-    height: auto;
-    width: 56px;
-    opacity: 0.95;
-    filter: drop-shadow(0 0 8px rgba(255, 215, 130, 0.5));
-}
-
-@media (max-width: 768px) {
-    .resurrection-symbol img {
-        width: 42px;
-    }
-}
-
-@keyframes resurrection-fall {
-    0% {
-        transform: translate3d(0, -15vh, 0);
-    }
-
-    100% {
-        transform: translate3d(0, 105vh, 0);
-    }
-}
-
-@keyframes resurrection-sway {
-    0%,
-    100% {
-        transform: translateX(0);
-    }
-
-    50% {
-        transform: translateX(65px);
-    }
-}
+.resurrection-container {
+    display: block;
+    position: fixed;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+    contain: layout paint;
+}
+
+.resurrection-symbol {
+    position: fixed;
+    z-index: 15;
+    top: 0;
+    translate: 0 -15vh;
+    user-select: none;
+    cursor: default;
+    animation-name: resurrection-fall;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    will-change: transform;
+}
+
+.resurrection-sway-wrapper {
+    will-change: transform;
+    animation-name: resurrection-sway;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+}
+
+.resurrection-symbol img {
+    z-index: 15;
+    height: auto;
+    width: 56px;
+    opacity: 0.95;
+    filter: drop-shadow(0 0 8px rgba(255, 215, 130, 0.5));
+}
+
+@media (max-width: 768px) {
+    .resurrection-symbol img {
+        width: 42px;
+    }
+}
+
+@keyframes resurrection-fall {
+    0% {
+        transform: translate3d(0, -15vh, 0);
+    }
+
+    100% {
+        transform: translate3d(0, 105vh, 0);
+    }
+}
+
+@keyframes resurrection-sway {
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    50% {
+        transform: translateX(65px);
+    }
--- a/Jellyfin.Plugin.Seasonals/Web/santa.js
+++ b/Jellyfin.Plugin.Seasonals/Web/santa.js
@@ -238,7 +238,7 @@ function animateSanta() {
    function startAnimation() {
        const santaHeight = santa.offsetHeight;
        if (santaHeight === 0) {
-            setTimeout(startAnimation, 100);
+            setTimeout(() => { if (document.body.contains(santa)) startAnimation(); }, 100);
            return;
        }
        // console.log('Santa height: ', santaHeight);
@@ -283,7 +283,7 @@ function animateSanta() {
                animationFrameIdSanta = requestAnimationFrame(move);
            } else {
                const pause = Math.random() * ((maxSantaRestTime - minSantaRestTime) * 1000) + minSantaRestTime * 1000;
-                setTimeout(animateSanta, pause);
+                setTimeout(() => { if (document.body.contains(santa)) animateSanta(); }, pause);
            }
        }

--- a/Jellyfin.Plugin.Seasonals/Web/snowflakes.css
+++ b/Jellyfin.Plugin.Seasonals/Web/snowflakes.css
@@ -1,139 +1,112 @@
-.snowflakes {
-  display: block;
-  position: fixed;
-  overflow: hidden;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-  contain: layout paint;
-}
-
-.snowflake {
-  position: fixed;
-  z-index: 15;
-  top: 0;
-  will-change: transform;
-  translate: 0 -10vh;
-  font-size: 1em;
-  color: #fff;
-  font-family: Arial, sans-serif;
-  text-shadow: 0 0 5px #000;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: default;
-  -webkit-animation-name: heart-fall, heart-shake;
-  -webkit-animation-duration: 12s, 3s;
-  -webkit-animation-timing-function: linear, ease-in-out;
-  -webkit-animation-iteration-count: infinite, infinite;
-  animation-name: snowflakes-fall, snowflakes-shake;
-  animation-duration: 12s, 3s;
-  animation-timing-function: linear, ease-in-out;
-  animation-iteration-count: infinite, infinite;
-}
-
-@-webkit-keyframes snowflakes-fall {
-  0% {
-    translate: 0 -10vh;
-  }
-
-  100% {
-    translate: 0 110vh;
-  }
-}
-
-@-webkit-keyframes snowflakes-shake {
-
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-
-  50% {
-    transform: translateX(80px);
-  }
-}
-
-@keyframes snowflakes-fall {
-  0% {
-    translate: 0 -10vh;
-  }
-
-  100% {
-    translate: 0 110vh;
-  }
-}
-
-@keyframes snowflakes-shake {
-
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-
-  50% {
-    transform: translateX(80px);
-  }
-}
-
-.snowflake:nth-of-type(0) {
-  left: 0%;
-  animation-delay: 0s, 0s;
-}
-
-.snowflake:nth-of-type(1) {
-  left: 10%;
-  animation-delay: 1s, 1s;
-}
-
-.snowflake:nth-of-type(2) {
-  left: 20%;
-  animation-delay: 6s, 0.5s;
-}
-
-.snowflake:nth-of-type(3) {
-  left: 30%;
-  animation-delay: 4s, 2s;
-}
-
-.snowflake:nth-of-type(4) {
-  left: 40%;
-  animation-delay: 2s, 2s;
-}
-
-.snowflake:nth-of-type(5) {
-  left: 50%;
-  animation-delay: 8s, 3s;
-}
-
-.snowflake:nth-of-type(6) {
-  left: 60%;
-  animation-delay: 6s, 2s;
-}
-
-.snowflake:nth-of-type(7) {
-  left: 70%;
-  animation-delay: 2.5s, 1s;
-}
-
-.snowflake:nth-of-type(8) {
-  left: 80%;
-  animation-delay: 1s, 0s;
-}
-
-.snowflake:nth-of-type(9) {
-  left: 90%;
-  animation-delay: 3s, 1.5s;
-}
-
-.snowflake:nth-of-type(10) {
-  left: 25%;
-  animation-delay: 2s, 0s;
-}
-
-.snowflake:nth-of-type(11) {
-  left: 65%;
-  animation-delay: 4s, 2.5s;
+.snowflakes {
+  display: block;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+  contain: layout paint;
+}
+
+.snowflake {
+  position: fixed;
+  z-index: 15;
+  top: 0;
+  will-change: transform;
+  translate: 0 -10vh;
+  font-size: 1em;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  text-shadow: 0 0 5px #000;
+  user-select: none;
+  cursor: default;
+  animation-name: snowflakes-fall, snowflakes-shake;
+  animation-duration: 12s, 3s;
+  animation-timing-function: linear, ease-in-out;
+  animation-iteration-count: infinite, infinite;
+}
+
+
+
+@keyframes snowflakes-fall {
+  0% {
+    translate: 0 -10vh;
+  }
+
+  100% {
+    translate: 0 110vh;
+  }
+}
+
+@keyframes snowflakes-shake {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(80px);
+  }
+}
+
+.snowflake:nth-of-type(0) {
+  left: 0%;
+  animation-delay: 0s, 0s;
+}
+
+.snowflake:nth-of-type(1) {
+  left: 10%;
+  animation-delay: 1s, 1s;
+}
+
+.snowflake:nth-of-type(2) {
+  left: 20%;
+  animation-delay: 6s, 0.5s;
+}
+
+.snowflake:nth-of-type(3) {
+  left: 30%;
+  animation-delay: 4s, 2s;
+}
+
+.snowflake:nth-of-type(4) {
+  left: 40%;
+  animation-delay: 2s, 2s;
+}
+
+.snowflake:nth-of-type(5) {
+  left: 50%;
+  animation-delay: 8s, 3s;
+}
+
+.snowflake:nth-of-type(6) {
+  left: 60%;
+  animation-delay: 6s, 2s;
+}
+
+.snowflake:nth-of-type(7) {
+  left: 70%;
+  animation-delay: 2.5s, 1s;
+}
+
+.snowflake:nth-of-type(8) {
+  left: 80%;
+  animation-delay: 1s, 0s;
+}
+
+.snowflake:nth-of-type(9) {
+  left: 90%;
+  animation-delay: 3s, 1.5s;
+}
+
+.snowflake:nth-of-type(10) {
+  left: 25%;
+  animation-delay: 2s, 0s;
+}
+
+.snowflake:nth-of-type(11) {
  left: 65%;
--- a/Jellyfin.Plugin.Seasonals/Web/space.css
+++ b/Jellyfin.Plugin.Seasonals/Web/space.css
@@ -5,12 +5,13 @@
    width: 100vw;
    height: 100vh;
    pointer-events: none;
-    z-index: 9999;
+    z-index: 10;
    overflow: hidden;
    contain: strict;
 }

 .space-bg-glow {
+    will-change: transform;
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 70% 30%, rgba(138, 43, 226, 0.15), transparent 60%),
@@ -33,6 +34,7 @@
 }

 .space-shooting-star {
+    will-change: opacity;
    position: absolute;
    width: 250px;
    height: 3px;
@@ -61,11 +63,11 @@
 }

 .space-symbol img {
+    will-change: transform;
    width: 6vh;
    height: auto;
    max-width: 60px;
    object-fit: contain;
-    /* Add a slow spin to images */
    animation: space-slow-spin var(--rot-dur, 20s) linear infinite;
 }

--- a/Jellyfin.Plugin.Seasonals/Web/space.js
+++ b/Jellyfin.Plugin.Seasonals/Web/space.js
@@ -252,7 +252,8 @@ function createSpace() {
            // Swap to a random image from the pool every time it completes an orbit (disappears)
            if (imageArr.length > 1) {
                // The animation delay pushes the initial cycle, so we use setInterval matched to duration
-                setInterval(() => {
+                const intervalId = setInterval(() => {
+                    if (!document.body.contains(container)) { clearInterval(intervalId); return; }
                    // Update only if currently out of bounds to avoid popping
                    const rect = symbol.getBoundingClientRect();
                    if (rect.right < 0 || rect.left > window.innerWidth) {
--- a/Jellyfin.Plugin.Seasonals/Web/spooky.css
+++ b/Jellyfin.Plugin.Seasonals/Web/spooky.css
@@ -8,6 +8,7 @@
    height: 100%;
    pointer-events: none;
    z-index: 10;
+    contain: layout paint;
 }

 .spooky {
@@ -16,19 +17,8 @@
    will-change: transform;
    translate: 0 120vh;
    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: spooky-float;
-    -webkit-animation-duration: 10s;
-    -webkit-animation-timing-function: linear;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-play-state: running;
-    
    animation-name: spooky-float;
    animation-duration: 10s;
    animation-timing-function: linear;
@@ -40,13 +30,6 @@
    width: 30px;
    height: auto;
    will-change: transform;
-    
-    -webkit-animation-name: spooky-shake;
-    -webkit-animation-duration: 3s;
-    -webkit-animation-timing-function: ease-in-out;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-play-state: running;
-    
    animation-name: spooky-shake;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
@@ -59,22 +42,6 @@
    width: 100%;
 }

-@-webkit-keyframes spooky-float {
-    0% {
-        translate: 0 120vh;
-        opacity: 0;
-    }
-    10% {
-        opacity: 0.8;
-    }
-    90% {
-        opacity: 0.8;
-    }
-    100% {
-        translate: 0 -150px;
-        opacity: 0;
-    }
-}

@keyframes spooky-float {
    0% {
@@ -93,14 +60,6 @@
    }
 }

-@-webkit-keyframes spooky-shake {
-    0%, 100% {
-        transform: translateX(0) scale(1) rotate(15deg);
-    }
-    50% {
-        transform: translateX(80px) scale(1.2) rotate(-15deg);
-    }
-}

@keyframes spooky-shake {
    0%, 100% {
@@ -111,7 +70,6 @@
    }
 }

-/* Base predefined starting offsets (if not overridden by js) */
 .spooky:nth-of-type(0) { left: 1%; }
 .spooky:nth-of-type(1) { left: 10%; }
 .spooky:nth-of-type(2) { left: 20%; }
--- a/Jellyfin.Plugin.Seasonals/Web/sports.css
+++ b/Jellyfin.Plugin.Seasonals/Web/sports.css
@@ -5,16 +5,17 @@
    width: 100vw;
    height: 100vh;
    pointer-events: none;
-    z-index: 9999;
+    z-index: 10;
    overflow: hidden;
    contain: strict;
 }

 .sports-symbol {
    position: absolute;
-    top: -10vh;
+    top: 0;
    opacity: 0.9;
    z-index: 40;
+    translate: 0 -10vh;
 }

 .sports-inner {
@@ -29,13 +30,15 @@
 }

 .sports-confetti {
+    will-change: transform, opacity;
    position: absolute;
-    top: -5vh;
+    top: 0;
    width: 10px;
    height: 15px;
    opacity: 0.8;
    animation: sports-confetti-fall linear infinite;
    border-radius: 2px;
+    translate: 0 -5vh;
 }

 .sports-confetti.circle {
--- a/Jellyfin.Plugin.Seasonals/Web/sports.js
+++ b/Jellyfin.Plugin.Seasonals/Web/sports.js
@@ -203,12 +203,12 @@ function createSports() {
        }, arcDuration * 1000 + 500);
        
        // Schedule the next trophy
-        setTimeout(launchTrophy, Math.random() * 20000 + 10000); // Wait 10-30s until next trophy
+        setTimeout(() => { if (document.body.contains(container)) launchTrophy(); }, Math.random() * 20000 + 10000); // Wait 10-30s until next trophy
    }
    
    // Launch initial trophy after a short delay
    if (enableTrophy) {
-        setTimeout(launchTrophy, Math.random() * 5000 + 2000);
+        setTimeout(() => { if (document.body.contains(container)) launchTrophy(); }, Math.random() * 5000 + 2000);
    }

    // Add Germany Colored confetti (Black, Red, Gold)
--- a/Jellyfin.Plugin.Seasonals/Web/spring.css
+++ b/Jellyfin.Plugin.Seasonals/Web/spring.css
@@ -29,13 +29,14 @@
 /* Sunbeams */
 .spring-sunbeam {
    position: fixed;
-    top: -50%;
+    top: 0;
    height: 200%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 200, 0.08) 50%, rgba(255, 255, 255, 0));
    z-index: 5; 
    transform-origin: top center;
    pointer-events: none;
    opacity: 0; 
+    translate: 0 -50vh;
 }

 /* Grass Container (Wrapper) */
@@ -72,6 +73,7 @@

 /* SVG Meadow Layer */
 .spring-meadow-layer {
+    will-change: transform;
    position: absolute;
    bottom: 0;
    left: 0;
@@ -94,6 +96,7 @@
 }

 .spring-sway {
+    will-change: transform;
    transform-origin: bottom center;
    animation: spring-meadow-sway 4s ease-in-out infinite alternate;
 }
--- a/Jellyfin.Plugin.Seasonals/Web/spring.js
+++ b/Jellyfin.Plugin.Seasonals/Web/spring.js
@@ -295,7 +295,7 @@ function createBird(container) {
    wrapper.addEventListener('animationend', (e) => {
        if (e.animationName.includes('fly-')) {
            wrapper.remove();
-            createBird(container);
+            if (document.body.contains(container)) createBird(container);
        }
    });
    
@@ -338,7 +338,7 @@ function createButterfly(container) {
    wrapper.addEventListener('animationend', (e) => {
        if (e.animationName.includes('fly-')) {
            wrapper.remove();
-            createButterfly(container);
+            if (document.body.contains(container)) createButterfly(container);
        }
    });

@@ -385,7 +385,7 @@ function createBee(container) {
    wrapper.addEventListener('animationend', (e) => {
        if (e.animationName.includes('fly-')) {
            wrapper.remove();
-            createBee(container);
+            if (document.body.contains(container)) createBee(container);
        }
    });

@@ -428,7 +428,7 @@ function createLadybugGif(container) {
    wrapper.addEventListener('animationend', (e) => {
        if (e.animationName.includes('walk-')) {
            wrapper.remove();
-            createLadybugGif(container);
+            if (document.body.contains(container)) createLadybugGif(container);
        }
    });
        
--- a/Jellyfin.Plugin.Seasonals/Web/starwars.css
+++ b/Jellyfin.Plugin.Seasonals/Web/starwars.css
@@ -13,10 +13,11 @@

 .starwars-center {
    position: absolute;
-    top: 50%;
+    top: 0;
    left: 50%;
    width: 0;
    height: 0;
+    translate: 0 50vh;
 }

 .starwars-streak {
--- a/Jellyfin.Plugin.Seasonals/Web/underwater.css
+++ b/Jellyfin.Plugin.Seasonals/Web/underwater.css
@@ -35,6 +35,7 @@
 }

 .underwater-seaweed {
+    will-change: transform, opacity;
    position: absolute;
    bottom: -1vh;
    font-size: 4rem;
@@ -52,6 +53,7 @@
 }

 .underwater-bubble {
+    will-change: transform;
    position: absolute;
    bottom: -5vh;
    border-radius: 50%;
@@ -73,13 +75,13 @@
 }

@keyframes underwater-traverse-up {
-    0% { top: 120vh; }
-    100% { top: -20vh; }
+    0% { top: 0;  translate: 0 120vh; }
+    100% { top: 0;  translate: 0 -20vh; }
 }

@keyframes underwater-traverse-down {
-    0% { top: -20vh; }
-    100% { top: 120vh; }
+    0% { top: 0;  translate: 0 -20vh; }
+    100% { top: 0;  translate: 0 120vh; }
 }

@keyframes underwater-sway-y {
@@ -101,8 +103,9 @@
 }

 .underwater-god-rays {
+    will-change: transform;
    position: absolute;
-    top: -50vh;
+    top: 0;
    left: -50vw;
    width: 200vw;
    height: 200vh;
@@ -119,6 +122,7 @@
    transform-origin: top center;
    mix-blend-mode: overlay;
    filter: blur(5px);
+    translate: 0 -50vh;
 }

@keyframes god-rays-sway {
Author	SHA1	Message	Date
CodeDevMLH	bb6c7796d5	Reduce z-index of matrix-container to improve stacking context and prevent overlap issues [skip ci]	2026-02-27 04:08:00 +01:00
CodeDevMLH	bd8088c52b	Add checks for container presence in animation functions to prevent errors when elements are removed from the DOM [skip ci]	2026-02-27 04:07:29 +01:00
CodeDevMLH	3c1bd01373	Fix positioning of olympia-symbol and adjust ring CSS for improved alignment [skip ci]	2026-02-27 03:59:19 +01:00
CodeDevMLH	669ac6d3da	Fix spider and mouse creation logic to ensure animations only continue if the container is present in the DOM	2026-02-27 03:58:34 +01:00
CodeDevMLH	73f9be91ef	Refactor z-index values and optimize CSS properties for various seasonal styles; enhance performance with will-change property [skip ci]	2026-02-27 03:53:05 +01:00
CodeDevMLH	f14785c54a	Enhance CSS animations and performance across seasonal styles; add will-change property for smoother transitions and optimize keyframes. [skip ci]	2026-02-27 03:42:23 +01:00
CodeDevMLH	296873f89e	Fix rabbit animation transform origin and improve GIF reset logic All checks were successful Auto Release Plugin / build-and-release (push) Successful in 40s Details	2026-02-27 01:58:53 +01:00
CodeDevMLH	d6a9ff7176	Fix z-index for pride container and clean up comments in pride.js All checks were successful Auto Release Plugin / build-and-release (push) Successful in 42s Details	2026-02-27 01:35:25 +01:00