Make lightbar wider on mobile, move to top

src/components/layout/Navigation.tsx

@@ -19,7 +19,7 @@ export function Navigation(props: NavigationProps) {
   return (
     <>
       <div className="absolute inset-x-0 top-0 flex h-[88px] items-center justify-center">
-        <div className="absolute inset-x-0 mt-20 flex items-center sm:mt-0">
+        <div className="absolute inset-x-0 -mt-[22%] flex items-center sm:mt-0">
           <Lightbar />
         </div>
       </div>

src/components/utils/Lightbar.css

@@ -1,14 +1,29 @@
 .lightbar, .lightbar-visual {
   position: absolute;
   top: 0;
-    width: 150vw;
+  width: 500vw;
   height: 800px;
   pointer-events: none;
   user-select: none;
 }
 
+.lightbar {
+  left: 50vw;
+  transform: translateX(-50%);
+}
+
+@screen sm {
+  .lightbar, .lightbar-visual {
+    width: 150vw;
+  }
+
   .lightbar {
     left: -25vw;
+    transform: initial;
+  }
+}
+
+.lightbar {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -46,6 +61,7 @@
 
     opacity: 0.25;
   }
+
   to {
     opacity: 1;
   }
@@ -55,6 +71,7 @@
   0% {
     transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(0.8);
   }
+
   100% {
     transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1);
   }