fix: respect reducedAnimations

src/lib/components/ui/animated-bg/AnimatedBg.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Logo from '$assets/logo.png';
+  import { reduceAnimations } from '@/userSettings';
+  import { fade } from 'svelte/transition';
 
   //TODO: maybe dynamic background images fetched from ezpp?
 
@@ -37,15 +39,15 @@
   <div
     class="relative h-full w-full from-0% to-90% bg-gradient-to-b from-transparent to-black z-50"
   ></div>
-  {#each streaks as s}
+  {#each streaks as s, index (index)}
     <div
-      class="streak drop-shadow-lg"
+      class="streak drop-shadow-lg transition-opacity duration-1000"
       style="
         width:{s.width}px;
         height:{s.height}px;
         left:{s.x}%;
         top:{s.y}%;
-        opacity:{s.opacity};
+        opacity:{$reduceAnimations ? 0 : s.opacity};
         animation-duration:{s.duration}s;
         animation-delay:-{s.delay}s;
       "

src/screens/Launch.svelte

@@ -948,8 +948,13 @@
     {#if selectedView === 'home'}
       <div
         class="flex flex-col-reverse h-full"
-        in:fly={{ duration: 400, delay: 400, y: 5, opacity: 0 }}
+        in:fly={{
-        out:fly={{ duration: 400, y: -5, opacity: 0 }}
+          duration: $reduceAnimations ? 0 : 400,
+          delay: $reduceAnimations ? 0 : 400,
+          y: 5,
+          opacity: 0,
+        }}
+        out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
       >
         <div class="relative z-10 px-8 py-4 flex items-center justify-between">
           <div class="flex items-center gap-4">
@@ -1070,8 +1075,8 @@
         {#if $currentUserInfo}
           <div
             class="m-1 w-72 h-48 bg-black/40 backdrop-blur-sm rounded-md border border-black/40 flex flex-col items-center p-3"
-            in:fly={{ duration: 400, y: 5, opacity: 0 }}
+            in:fly={{ duration: $reduceAnimations ? 0 : 400, y: 5, opacity: 0 }}
-            out:fly={{ duration: 400, y: -5, opacity: 0 }}
+            out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
           >
             <Select.Root
               type="single"
@@ -1223,8 +1228,13 @@
     {:else if selectedView === 'settings'}
       <div
         class="h-[100vh] w-full flex flex-col items-center justify-center"
-        in:fly={{ duration: 400, delay: 400, y: 5, opacity: 0 }}
+        in:fly={{
-        out:fly={{ duration: 400, y: -5, opacity: 0 }}
+          duration: $reduceAnimations ? 0 : 400,
+          delay: $reduceAnimations ? 0 : 400,
+          y: 5,
+          opacity: 0,
+        }}
+        out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
       >
         <div class="p-8 w-full">
           <div class="bg-black/40 backdrop-blur-sm py-8 px-6 rounded-lg">
@@ -1425,8 +1435,13 @@
     {:else if selectedView === 'login'}
       <div
         class="h-[100vh] w-full flex flex-col items-center justify-center"
-        in:fly={{ duration: 400, delay: 400, y: 5, opacity: 0 }}
+        in:fly={{
-        out:fly={{ duration: 400, y: -5, opacity: 0 }}
+          duration: $reduceAnimations ? 0 : 400,
+          delay: $reduceAnimations ? 0 : 400,
+          y: 5,
+          opacity: 0,
+        }}
+        out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
       >
         <div class="p-8 px-52 w-full">
           <form onsubmit={performLogin} class="bg-black/40 backdrop-blur-sm rounded-lg p-8">