New Features

* Adds Glitch Entrance of Intro Modal (Into the Spiderverse Multidimensional jump)

2 files changed, 369 insertions, 27 deletions

diff --git a/hg.css b/hg.css
index 5451dec..f856199 100644
--- a/hg.css
+++ b/hg.css
@@ -69,6 +69,19 @@ body {
   transform: perspective(1000px) rotateX(5deg) rotateY(-2deg);
   transform-style: preserve-3d;
   animation: playerFloat 6s ease-in-out infinite, playerPulse 4s ease-in-out infinite alternate;
+  
+  /* Initially hidden */
+  opacity: 0;
+  visibility: hidden;
+  transform: perspective(1000px) rotateX(5deg) rotateY(-2deg) scale(0.8);
+  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Show player after modal is closed */
+.music-player.show {
+  opacity: 1;
+  visibility: visible;
+  transform: perspective(1000px) rotateX(5deg) rotateY(-2deg) scale(1);
 }
 
 .music-player .color-overlay {
@@ -261,14 +274,81 @@ dialog::backdrop {
   visibility: visible;
   opacity: 1;
   transition-delay: 0s;
+  animation: modalGlitchIn 1.5s ease-out forwards;
 }
 
-.modal-bg {
-  position: absolute;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(2px);
-  width: 100%;
-  height: 100%;
+@keyframes modalGlitchIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateX(0);
+    filter: hue-rotate(0deg) saturate(1);
+  }
+  
+  10% {
+    opacity: 0.3;
+    transform: scale(0.9) translateX(-20px);
+    filter: hue-rotate(90deg) saturate(3);
+  }
+  
+  15% {
+    opacity: 0.7;
+    transform: scale(1.1) translateX(15px);
+    filter: hue-rotate(-45deg) saturate(2);
+  }
+  
+  20% {
+    opacity: 0.4;
+    transform: scale(0.85) translateX(-10px);
+    filter: hue-rotate(180deg) saturate(4);
+  }
+  
+  25% {
+    opacity: 0.8;
+    transform: scale(1.05) translateX(8px);
+    filter: hue-rotate(-90deg) saturate(1.5);
+  }
+  
+  30% {
+    opacity: 0.6;
+    transform: scale(0.95) translateX(-5px);
+    filter: hue-rotate(45deg) saturate(3);
+  }
+  
+  40% {
+    opacity: 0.9;
+    transform: scale(1.02) translateX(3px);
+    filter: hue-rotate(-30deg) saturate(2);
+  }
+  
+  50% {
+    opacity: 0.7;
+    transform: scale(0.98) translateX(-2px);
+    filter: hue-rotate(60deg) saturate(2.5);
+  }
+  
+  65% {
+    opacity: 0.95;
+    transform: scale(1.01) translateX(1px);
+    filter: hue-rotate(-15deg) saturate(1.2);
+  }
+  
+  80% {
+    opacity: 0.85;
+    transform: scale(0.99) translateX(-1px);
+    filter: hue-rotate(15deg) saturate(1.8);
+  }
+  
+  90% {
+    opacity: 0.98;
+    transform: scale(1.005) translateX(0.5px);
+    filter: hue-rotate(-5deg) saturate(1.1);
+  }
+  
+  100% {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+    filter: hue-rotate(0deg) saturate(1);
+  }
 }
 
 .modal-container {
@@ -286,16 +366,119 @@ dialog::backdrop {
   color: #00ffff;
   font-family: 'VCR', 'Consolas', 'Courier New', monospace;
   transform: perspective(800px) rotateX(2deg);
+  overflow: hidden;
+}
+
+.modal-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    rgba(255, 41, 117, 0.1) 25%, 
+    rgba(0, 255, 255, 0.1) 50%, 
+    rgba(255, 41, 117, 0.1) 75%, 
+    transparent 100%);
+  animation: modalScanline 3s linear infinite;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.modal-container::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(0, 255, 255, 0.03) 2px,
+      rgba(0, 255, 255, 0.03) 4px
+    );
+  pointer-events: none;
+  z-index: 2;
+}
+
+.modal-container > * {
+  position: relative;
+  z-index: 3;
+}
+
+@keyframes modalScanline {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 .modal-container h3 {
   color: #ff2975;
   text-shadow: 0 0 12px rgba(255, 41, 117, 0.8);
-  font-family: 'VCR', 'Consolas', 'Courier New', monospace;
-  font-size: 1.1em;
-  margin-bottom: 1em;
-  padding-bottom: 0.4em;
-  border-bottom: 1px solid rgba(255, 41, 117, 0.4);
+  font-size: 24px;
+  margin-bottom: 20px;
+  font-weight: bold;
+  animation: titleGlitch 0.8s ease-out 0.5s;
+}
+
+@keyframes titleGlitch {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  10% {
+    transform: translateX(-3px);
+    opacity: 0.8;
+    text-shadow: 
+      -3px 0 #ff2975,
+      3px 0 #00ffff,
+      0 0 12px rgba(255, 41, 117, 0.8);
+  }
+  20% {
+    transform: translateX(2px);
+    opacity: 0.9;
+    text-shadow: 
+      2px 0 #00ffff,
+      -2px 0 #ff2975,
+      0 0 12px rgba(0, 255, 255, 0.8);
+  }
+  30% {
+    transform: translateX(-1px);
+    opacity: 0.85;
+    text-shadow: 
+      1px 0 #ff2975,
+      -1px 0 #00ffff,
+      0 0 12px rgba(255, 41, 117, 0.8);
+  }
+  50% {
+    transform: translateX(1px);
+    opacity: 0.95;
+    text-shadow: 
+      -1px 0 #00ffff,
+      1px 0 #ff2975,
+      0 0 12px rgba(0, 255, 255, 0.8);
+  }
+  70% {
+    transform: translateX(-0.5px);
+    opacity: 0.98;
+    text-shadow: 
+      0.5px 0 #ff2975,
+      -0.5px 0 #00ffff,
+      0 0 12px rgba(255, 41, 117, 0.8);
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+    text-shadow: 0 0 12px rgba(255, 41, 117, 0.8);
+  }
 }
 
 .modal-container h4 {
@@ -304,6 +487,75 @@ dialog::backdrop {
   font-family: 'VCR', 'Consolas', 'Courier New', monospace;
   font-size: 0.9em;
   margin: 0.8em 0;
+  animation: contentGlitchIn 0.6s ease-out 1s both;
+}
+
+#warning {
+  color: #ffff00;
+  text-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
+  font-weight: bold;
+  text-align: center;
+  margin: 15px 0;
+  padding: 8px;
+  border: 1px solid rgba(255, 255, 0, 0.3);
+  background: rgba(255, 255, 0, 0.1);
+  animation: warningGlitch 0.8s ease-out 0.8s both;
+}
+
+@keyframes contentGlitchIn {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+    filter: blur(2px);
+  }
+  30% {
+    opacity: 0.6;
+    transform: translateY(-2px);
+    filter: blur(1px);
+  }
+  60% {
+    opacity: 0.8;
+    transform: translateY(1px);
+    filter: blur(0.5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+}
+
+@keyframes warningGlitch {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+    filter: hue-rotate(0deg);
+  }
+  20% {
+    opacity: 0.7;
+    transform: scale(1.1);
+    filter: hue-rotate(45deg);
+  }
+  40% {
+    opacity: 0.9;
+    transform: scale(0.95);
+    filter: hue-rotate(-30deg);
+  }
+  60% {
+    opacity: 0.8;
+    transform: scale(1.05);
+    filter: hue-rotate(60deg);
+  }
+  80% {
+    opacity: 0.95;
+    transform: scale(0.98);
+    filter: hue-rotate(-15deg);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: hue-rotate(0deg);
+  }
 }
 
 .modal-container p {
@@ -319,6 +571,7 @@ dialog::backdrop {
   text-shadow: 0 0 8px rgba(255, 41, 117, 0.8);
   font-style: normal;
   font-weight: bold;
+  animation: contentGlitchIn 0.6s ease-out 1.2s both;
 }
 
 .modal-close {
@@ -348,7 +601,34 @@ dialog::backdrop {
   color: #00ffff;
   text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
   transform: scale(1.1);
-  background: rgba(255, 41, 117, 0.1);
+  animation: buttonGlitch 0.5s ease-in-out;
+}
+
+@keyframes buttonGlitch {
+  0%, 100% {
+    transform: scale(1.1);
+  }
+  25% {
+    transform: scale(1.1) translateX(-2px);
+    text-shadow: 
+      -2px 0 #ff2975,
+      2px 0 #00ffff,
+      0 0 15px rgba(0, 255, 255, 0.8);
+  }
+  50% {
+    transform: scale(1.1) translateX(2px);
+    text-shadow: 
+      2px 0 #ff2975,
+      -2px 0 #00ffff,
+      0 0 15px rgba(255, 41, 117, 0.8);
+  }
+  75% {
+    transform: scale(1.1) translateX(-1px);
+    text-shadow: 
+      -1px 0 #00ffff,
+      1px 0 #ff2975,
+      0 0 15px rgba(0, 255, 255, 0.8);
+  }
 }
 
 .text-center {
@@ -440,6 +720,19 @@ canvas {
   box-shadow: 
     0 -2px 10px rgba(0, 0, 0, 0.6),
     0 0 15px rgba(255, 41, 117, 0.2);
+  
+  /* Initially hidden */
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(100%);
+  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Show progress bar after modal is closed */
+.progress-bar-container.show {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
 }
 
 .progress-info {
@@ -856,23 +1149,37 @@ canvas {
 }
 
 .terminal-close:hover {
-  color: #ff2975;
-  text-shadow: 0 0 15px rgba(255, 41, 117, 1);
-  border-color: #ff2975;
-  background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(255, 41, 117, 0.2));
-  box-shadow:
-    inset 0 1px 0 rgba(255, 41, 117, 0.3),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
-    0 0 20px rgba(255, 41, 117, 0.4),
-    0 2px 4px rgba(0, 0, 0, 0.3);
-  transform: translateY(-1px);
+  color: #00ffff;
+  text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
+  transform: scale(1.1);
+  animation: buttonGlitch 0.5s ease-in-out;
 }
 
-.terminal-close:active {
-  transform: translateY(1px);
-  box-shadow:
-    inset 0 2px 4px rgba(0, 0, 0, 0.5),
-    0 0 5px rgba(255, 41, 117, 0.3);
+@keyframes buttonGlitch {
+  0%, 100% {
+    transform: scale(1.1);
+  }
+  25% {
+    transform: scale(1.1) translateX(-2px);
+    text-shadow: 
+      -2px 0 #ff2975,
+      2px 0 #00ffff,
+      0 0 15px rgba(0, 255, 255, 0.8);
+  }
+  50% {
+    transform: scale(1.1) translateX(2px);
+    text-shadow: 
+      2px 0 #ff2975,
+      -2px 0 #00ffff,
+      0 0 15px rgba(255, 41, 117, 0.8);
+  }
+  75% {
+    transform: scale(1.1) translateX(-1px);
+    text-shadow: 
+      -1px 0 #00ffff,
+      1px 0 #ff2975,
+      0 0 15px rgba(0, 255, 255, 0.8);
+  }
 }
 
 .terminal-content {
@@ -1006,6 +1313,7 @@ canvas {
   display: flex;
   gap: 1em;
   margin: 1em 0;
+  animation: contentGlitchIn 0.8s ease-out 1.4s both;
 }
 
 .controls-section {
@@ -1025,6 +1333,7 @@ canvas {
   display: flex;
   flex-direction: column;
   gap: 0.3em;
+  animation: contentGlitchIn 0.6s ease-out 1.6s both;
 }
 
 .touch-grid {
@@ -1058,6 +1367,7 @@ canvas {
 .features-compact {
   text-align: center;
   margin: 0.8em 0;
+  animation: contentGlitchIn 0.6s ease-out 1.8s both;
 }
 
 .features-compact p {
@@ -1071,6 +1381,7 @@ canvas {
 .credit-compact {
   text-align: center;
   margin-top: 0.5em;
+  animation: contentGlitchIn 0.6s ease-out 2s both;
 }
 
 .credit-compact small {
diff --git a/player.js b/player.js
index 1d147ad..37fb33f 100644
--- a/player.js
+++ b/player.js
@@ -39,6 +39,19 @@
   openDialog();
   listenUploadFileChange();
 
+  function showPlayerInterface() {
+    const musicPlayer = document.querySelector(".music-player");
+    const progressBarContainer = document.getElementById("progress-bar-container");
+    
+    if (musicPlayer) {
+      musicPlayer.classList.add("show");
+    }
+    
+    if (progressBarContainer) {
+      progressBarContainer.classList.add("show");
+    }
+  }
+
   function initDynamicTooltips() {
     document.querySelectorAll("[title]").forEach((element) => {
       const title = element.getAttribute("title");
@@ -116,6 +129,12 @@
   document.getElementById("initButton")?.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();
     });
@@ -128,6 +147,18 @@
     downloadHistory();
   });
 
+  // Handle modal exit clicks (background and close button)
+  document.addEventListener("click", (event) => {
+    if (event.target.classList.contains("modal-exit") || event.target.id === "initButton") {
+      // Only trigger if modal is actually open
+      if (modalEl.classList.contains("open")) {
+        setTimeout(() => {
+          showPlayerInterface();
+        }, 300);
+      }
+    }
+  });
+
   document.addEventListener("keyup", (event) => {
     if (!terminalOverlay.classList.contains("hidden")) {
       return;