chore: track sqlite database file and remove from gitignore

src/app/globals.css

@@ -418,7 +418,7 @@ body::after {
   position: fixed;
   inset: 0;
   z-index: -1;
-  transition: opacity 500ms ease-in-out;
+  transition: opacity 150ms ease-in-out;
   pointer-events: none;
   background-size: cover;
   background-attachment: fixed;
@@ -480,11 +480,12 @@ body::after {
 *::after {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, background-image;
   transition-timing-function: ease-in-out;
-  transition-duration: 500ms;
+  transition-duration: 150ms;
 }
+
 /* View Transitions API (For perfect whole-screen crossfade including WebGL/Canvas) */
 ::view-transition-old(root),
 ::view-transition-new(root) {
-  animation-duration: 500ms;
+  animation-duration: 150ms;
   animation-timing-function: ease-in-out;
-}
+}

src/components/ui/GlobeMap.tsx

@@ -173,7 +173,7 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
     });
 
     return points;
-  }, [arcsData]);
+  }, [arcsData, isLight]);
 
   return (
     <div
@@ -230,15 +230,27 @@ export const GlobeMap = ({ data }: GlobeMapProps) => {
         ringPropagationSpeed={3}
         ringRepeatPeriod={1000}
 
-        // Labels configuration
-        labelsData={pointsData}
-        labelLat="lat"
-        labelLng="lng"
-        labelText="name"
-        labelSize={1.2}
-        labelDotRadius={0.5}
-        labelColor={() => isLight ? '#0f172a' : 'rgba(255, 255, 255, 0.8)'}
-        labelResolution={2}
+        // HTML Labels configuration for better readability with text-shadow
+        htmlElementsData={pointsData}
+        htmlLat="lat"
+        htmlLng="lng"
+        htmlAltitude={0.03}
+        htmlElement={(d: any) => {
+          const el = document.createElement('div');
+          el.innerHTML = d.name;
+          el.style.color = isLight ? '#0f172a' : '#f8fafc';
+          el.style.fontSize = '12px';
+          el.style.fontWeight = '700';
+          el.style.fontFamily = 'Inter, sans-serif';
+          // Creates a thick outline effect so text doesn't blend into arcs/continents
+          el.style.textShadow = isLight 
+            ? '0 0 4px #ffffff, 0 0 6px #ffffff, 0 0 8px #ffffff' 
+            : '0 0 4px #000000, 0 0 6px #000000, 0 0 8px #000000';
+          el.style.pointerEvents = 'none';
+          el.style.whiteSpace = 'nowrap';
+          el.style.transform = 'translate(-50%, -100%)'; // shift slightly up
+          return el;
+        }}
       />
     </div>
   );