Refactor cursor styles for improved visibility and transitions

public/styles/main.css

@@ -140,6 +140,7 @@ body {
   cursor: none;
 }
 
+/* Base cursor styles */
 .cursor-dot {
   width: 5px;
   height: 5px;
@@ -152,14 +153,27 @@ body {
   border: 2px solid hsla(0, 0%, 100%, 0.5);
 }
 
-.cursor-dot, .cursor-outline {
+.cursor-dot,
+.cursor-outline {
   position: fixed;
   top: 0;
   left: 0;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   pointer-events: none;
   z-index: 1000;
+  opacity: 0;
+  /* Hide by default */
+  transition: opacity 0.3s ease;
+  /* Smooth transition for hiding/showing */
+}
+
+@media (hover: none) and (pointer: coarse) {
+
+  .cursor-dot,
+  .cursor-outline {
+    display: none !important;
+  }
 }
 
 :focus-visible {
@@ -872,10 +886,6 @@ article.container::before {
     clip-path: circle(3% at calc(100%-273px) 6%);
   }
 
-  .cursor-dot, .cursor-outline {
-    visibility: hidden;
-  }
-
   /*------------------ Main -------------------*/
   main {
     height: calc(100vh - 96px);