fix(SW-696): split up surprises into more components for readability

add tsparticles for confetti

components/MyPages/Surprises/surprises.module.css

@@ -1,4 +1,4 @@
-@keyframes modal-fade {
+@keyframes fade {
   from {
     opacity: 0;
   }
@@ -8,16 +8,6 @@
   }
 }
 
-@keyframes slide-up {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
 .overlay {
   background: rgba(0, 0, 0, 0.5);
   height: var(--visual-viewport-height);
@@ -28,10 +18,10 @@
   z-index: 100;
 
   &[data-entering] {
-    animation: modal-fade 200ms ease-in;
+    animation: fade 400ms ease-in;
   }
   &[data-exiting] {
-    animation: modal-fade 200ms reverse ease-in;
+    animation: fade 400ms reverse ease-in;
   }
 }
 
@@ -40,17 +30,19 @@
     display: flex;
     justify-content: center;
     align-items: center;
+  }
+}
 
-    &:before {
-      background-image: url("/_static/img/confetti.svg");
-      background-repeat: no-repeat;
-      background-position: center 40%;
-      content: "";
-      width: 100%;
-      height: 100%;
-      animation: modal-fade 200ms ease-in;
-      display: block;
-    }
+@media screen and (min-width: 768px) and (prefers-reduced-motion) {
+  .overlay:before {
+    background-image: url("/_static/img/confetti.svg");
+    background-repeat: no-repeat;
+    background-position: center 40%;
+    content: "";
+    width: 100%;
+    height: 100%;
+    animation: fade 400ms ease-in;
+    display: block;
   }
 }
 
@@ -62,12 +54,14 @@
   position: absolute;
   left: 0;
   bottom: 0;
+  z-index: 102;
+}
 
-  &[data-entering] {
-    animation: slide-up 200ms;
-  }
-  &[data-exiting] {
-    animation: slide-up 200ms reverse ease-in-out;
+@media screen and (min-width: 768px) {
+  .modal {
+    left: auto;
+    bottom: auto;
+    width: 400px;
   }
 }
 
@@ -82,14 +76,6 @@
   overflow: hidden;
 }
 
-@media screen and (min-width: 768px) {
-  .modal {
-    left: auto;
-    bottom: auto;
-    width: 400px;
-  }
-}
-
 .top {
   --button-height: 32px;
   box-sizing: content-box;
@@ -160,3 +146,12 @@
   display: flex;
   align-items: center;
 }
+
+/*
+ * temporary fix until next version of tsparticles is released
+ * https://github.com/tsparticles/tsparticles/issues/5375
+ */
+.confetti {
+  position: relative;
+  z-index: 101;
+}