Add lyric display functionality and styles for enhanced user experience

- Introduced new lyric line styles in secrets.css to improve visibility and animation effects.
- Updated secrets.js to implement a lyric display system that shows lyrics in a spiral path with collision detection.
- Enhanced position adjustment logic to ensure lyrics remain within screen bounds and are visually appealing.
- Improved overall interactivity by allowing lyrics to fade in and out smoothly as users interact with the interface.

Author: zesameri

css/secrets.css

@@ -92,9 +92,33 @@ svg {
   50% { opacity: 0.2; }
 }
 
+/* Individual lyric line styles */
+.lyric-line {
+  position: fixed;
+  color: #f8f8f6;
+  font-family: 'Roboto Slab', serif;
+  font-size: 1.2em;
+  line-height: 1.4;
+  text-align: center;
+  white-space: normal;
+  opacity: 0;
+  z-index: 10;
+  pointer-events: none;
+  transition: opacity 0.8s ease-in-out;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+  max-width: 250px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+.lyric-line.visible {
+  opacity: 1;
+}
+
 /* Mobile responsive */
 @media (max-width: 768px) {
-  .poem-container {
+  .poem-container, .lyric-container {
     max-width: 95vw;
     padding: 2rem;
   }
@@ -103,7 +127,14 @@ svg {
     font-size: 1.1em;
   }
 
-  .poem-text {
+  .poem-text, .lyric-text {
     font-size: 1.2em;
   }
+  
+  .lyric-line {
+    font-size: 1em;
+    max-width: 200px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
 }