2 files changed, 129 insertions, 5 deletions

diff --git a/hg.css b/hg.css
index 389b497..145bf34 100644
--- a/hg.css
+++ b/hg.css
@@ -1615,3 +1615,77 @@ canvas {
     inset 0 -1px 0 rgba(255, 255, 255, 0.1),
     0 2px 8px rgba(0, 0, 0, 0.3);
 }
+
+/* Terminal Overlay Glitch Animations */
+.terminal-overlay {
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+
+.terminal-overlay.open {
+  visibility: visible;
+  opacity: 1;
+  animation: terminalGlitchIn 1.2s ease-out forwards;
+}
+
+.terminal-overlay.closing {
+  animation: terminalGlitchOut 0.8s ease-in forwards;
+}
+
+@keyframes terminalGlitchIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.7) translateX(0);
+    filter: hue-rotate(0deg) saturate(1) brightness(1);
+  }
+  8% {
+    opacity: 0.2;
+    transform: scale(0.8) translateX(-30px);
+    filter: hue-rotate(120deg) saturate(4) brightness(1.5);
+  }
+  12% {
+    opacity: 0.6;
+    transform: scale(1.15) translateX(25px);
+    filter: hue-rotate(-60deg) saturate(3) brightness(0.8);
+  }
+  16% {
+    opacity: 0.3;
+    transform: scale(0.75) translateX(-15px);
+    filter: hue-rotate(200deg) saturate(5) brightness(1.8);
+  }
+  20% {
+    opacity: 0.8;
+    transform: scale(1.08) translateX(12px);
+    filter: hue-rotate(-100deg) saturate(2) brightness(0.6);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+    filter: hue-rotate(0deg) saturate(1) brightness(1);
+  }
+}
+
+@keyframes terminalGlitchOut {
+  0% {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+    filter: hue-rotate(0deg) saturate(1) brightness(1);
+  }
+  15% {
+    opacity: 0.8;
+    transform: scale(1.02) translateX(2px);
+    filter: hue-rotate(30deg) saturate(2) brightness(1.2);
+  }
+  50% {
+    opacity: 0.2;
+    transform: scale(0.8) translateX(-12px);
+    filter: hue-rotate(-120deg) saturate(5) brightness(0.5);
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.4) translateX(0);
+    filter: hue-rotate(0deg) saturate(1) brightness(1);
+  }
+}
diff --git a/player.js b/player.js
index 37fb33f..3e3bd0d 100644
--- a/player.js
+++ b/player.js
@@ -143,13 +143,30 @@
     initProgressBar();
   });
 
+  document.getElementById("enterButton")?.addEventListener("click", async () => {
+    var hydra = new Hydra({ detectAudio: false });
+    modalEl.classList.remove("open");
+
+    // Show the music player and progress bar with a slight delay for better effect
+    setTimeout(() => {
+      showPlayerInterface();
+    }, 300); // Small delay to let the modal close animation start
+
+    getMusic().then(() => {
+      playMusic();
+    });
+    initHydra();
+    initControls();
+    initProgressBar();
+  });
+
   document.getElementById("history").addEventListener("click", () => {
     downloadHistory();
   });
 
   // Handle modal exit clicks (background and close button)
   document.addEventListener("click", (event) => {
-    if (event.target.classList.contains("modal-exit") || event.target.id === "initButton") {
+    if (event.target.classList.contains("modal-exit") || event.target.id === "initButton" || event.target.id === "enterButton") {
       // Only trigger if modal is actually open
       if (modalEl.classList.contains("open")) {
         setTimeout(() => {
@@ -193,6 +210,24 @@
       case "t":
         toggleTerminal();
         break;
+      case "Enter":
+        if (modalEl.classList.contains("open")) {
+          var hydra = new Hydra({ detectAudio: false });
+          modalEl.classList.remove("open");
+
+          // Show the music player and progress bar with a slight delay for better effect
+          setTimeout(() => {
+            showPlayerInterface();
+          }, 300); // Small delay to let the modal close animation start
+
+          getMusic().then(() => {
+            playMusic();
+          });
+          initHydra();
+          initControls();
+          initProgressBar();
+        }
+        break;
     }
   });
 
@@ -1411,14 +1446,29 @@ https://retrowave.ru/${musicData.streamUrl}
   }
 
   function toggleTerminal() {
-    terminalOverlay.classList.toggle("hidden");
-    if (!terminalOverlay.classList.contains("hidden")) {
-      terminalInput.focus();
+    if (terminalOverlay.classList.contains("hidden") || !terminalOverlay.classList.contains("open")) {
+      openTerminal();
+    } else {
+      closeTerminal();
     }
   }
 
+  function openTerminal() {
+    terminalOverlay.classList.remove("hidden");
+    terminalOverlay.classList.remove("closing");
+    terminalOverlay.classList.add("open");
+    terminalInput.focus();
+  }
+
   function closeTerminal() {
-    terminalOverlay.classList.add("hidden");
+    terminalOverlay.classList.remove("open");
+    terminalOverlay.classList.add("closing");
+
+    // Wait for animation to complete before hiding
+    setTimeout(() => {
+      terminalOverlay.classList.add("hidden");
+      terminalOverlay.classList.remove("closing");
+    }, 800); // Match the animation duration
   }
 
   function addTerminalLine(text, isCommand = false) {