Save point: Scene 2 restored with calm typing ...AND THAT AWARENESS HAS LED YOU HERE... TO LAB 484 + WHAT IS LAB 484? button

index.html

@@ -160,6 +160,52 @@
             transform: translateX(-50%);
         }
 
+        #scene2Line {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            line-height: 1.8;
+            color: #00ff00;
+            visibility: hidden;
+            padding: 2rem;
+            text-align: center;
+        }
+
+        #scene2Cursor {
+            display: none;
+            width: 10px;
+            height: 1.4em;
+            background-color: #00ff00;
+            margin-left: 4px;
+            flex-shrink: 0;
+            opacity: 1;
+        }
+
+        #whatIsLabBtn {
+            position: fixed;
+            bottom: 5%;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 3;
+            padding: 1rem 3rem;
+            font-size: 1.1rem;
+            background-color: #001100;
+            color: #00ff00;
+            border: 2px solid #00ff00;
+            cursor: pointer;
+            visibility: hidden;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.5s ease, background-color 0.2s ease;
+            font-family: 'Courier New', monospace;
+            letter-spacing: 2px;
+        }
+
+        #whatIsLabBtn:hover {
+            background-color: #003300;
+        }
+
         #scene3Title {
             position: absolute;
             top: 2rem;
@@ -199,6 +245,11 @@
     <button id="followBtn">FOLLOW THEM</button>
     
     <div id="scene2" class="scene">
+        <div id="scene2Line">
+            <span id="scene2Message"></span>
+            <span id="scene2Cursor"></span>
+        </div>
+        <button id="whatIsLabBtn">WHAT IS LAB 484?</button>
     </div>
 
     <div id="scene3" class="scene">
@@ -447,11 +498,11 @@
         }
 
         // Scene transition functions
-        function transitionToScene3() {
+        function transitionToScene2() {
             const canvas = document.getElementById('matrixCanvas');
             const textContainer = document.getElementById('textContainer');
             const btn = document.getElementById('followBtn');
-            const scene3 = document.getElementById('scene3');
+            const scene2 = document.getElementById('scene2');
 
             let opacity = 1;
             const fadeOut = setInterval(() => {
@@ -462,7 +513,7 @@
                     canvas.style.display = 'none';
                     textContainer.style.display = 'none';
                     btn.style.display = 'none';
-                    loadScene3(scene3);
+                    loadScene2(scene2);
                 }
                 canvas.style.opacity = opacity;
                 textContainer.style.opacity = opacity;
@@ -470,15 +521,79 @@
             }, 30);
         }
 
-        // Scene 2 loader (no longer used - buttons moved to Scene 3)
+        // Scene 2 loader: calm typing sequence
+        function blinkCursor(cursor, times, callback) {
+            cursor.style.display = 'inline-block';
+            cursor.style.opacity = '1';
+            let count = 0;
+            let visible = true;
+            const interval = setInterval(() => {
+                visible = !visible;
+                cursor.style.opacity = visible ? '1' : '0';
+                count++;
+                if (count >= times * 2) {
+                    clearInterval(interval);
+                    cursor.style.display = 'none';
+                    callback && callback();
+                }
+            }, 500);
+        }
+
+        function typeCalmly(elem, text, callback) {
+            let i = 0;
+            const total = text.length;
+
+            function typeChar() {
+                if (i >= total) {
+                    callback && callback();
+                    return;
+                }
+                elem.textContent += text[i];
+                i++;
+                const progress = i / total;
+                const delay = 70 + progress * progress * 130;
+                setTimeout(typeChar, delay);
+            }
+            typeChar();
+        }
+
         function loadScene2(sceneElem) {
             sceneElem.style.display = 'flex';
+            const line = document.getElementById('scene2Line');
+            const message = document.getElementById('scene2Message');
+            const cursor = document.getElementById('scene2Cursor');
+            const btn = document.getElementById('whatIsLabBtn');
+
             let opacity = 0;
             const fadeIn = setInterval(() => {
                 opacity += 0.05;
                 if (opacity >= 1) {
                     opacity = 1;
                     clearInterval(fadeIn);
+
+                    line.style.visibility = 'visible';
+
+                    blinkCursor(cursor, 5, () => {
+                        typeCalmly(message, "...AND THAT AWARENESS HAS LED YOU HERE...", () => {
+                            blinkCursor(cursor, 3, () => {
+                                typeCalmly(message, " TO LAB 484", () => {
+                                    setTimeout(() => {
+                                        btn.style.visibility = 'visible';
+                                        let btnOpacity = 0;
+                                        const btnFadeIn = setInterval(() => {
+                                            btnOpacity += 0.05;
+                                            if (btnOpacity >= 1) {
+                                                btnOpacity = 1;
+                                                clearInterval(btnFadeIn);
+                                                btn.style.pointerEvents = 'auto';
+                                            }
+                                            btn.style.opacity = btnOpacity;
+                                        }, 30);
+                                    }, 3000);
+                                });
+                            });
+                        });
+                    });
                 }
                 sceneElem.style.opacity = opacity;
             }, 30);
@@ -628,7 +743,7 @@
         });
 
         // Button click handlers
-        document.getElementById('followBtn').addEventListener('click', transitionToScene3);
+        document.getElementById('followBtn').addEventListener('click', transitionToScene2);
         document.getElementById('creatorBtn').addEventListener('click', () => {
             transitionToScene('scene3', loadSceneCreator, 'sceneCreator');
         });
@@ -638,6 +753,9 @@
         document.getElementById('developerBtn').addEventListener('click', () => {
             transitionToScene('scene3', loadSceneDeveloper, 'sceneDeveloper');
         });
+        document.getElementById('whatIsLabBtn').addEventListener('click', () => {
+            transitionToScene('scene2', loadScene3, 'scene3');
+        });
 
 
 
@@ -654,6 +772,19 @@
                     skipScene1();
                 }
 
+                // Scene 2 skip (calm typing)
+                const scene2 = document.getElementById('scene2');
+                const s2Cursor = document.getElementById('scene2Cursor');
+                const s2Message = document.getElementById('scene2Message');
+                const s2Btn = document.getElementById('whatIsLabBtn');
+                if (scene2.style.display === 'flex' && s2Btn.style.visibility !== 'visible') {
+                    s2Cursor.style.display = 'none';
+                    s2Message.textContent = '...AND THAT AWARENESS HAS LED YOU HERE... TO LAB 484';
+                    s2Btn.style.visibility = 'visible';
+                    s2Btn.style.opacity = '1';
+                    s2Btn.style.pointerEvents = 'auto';
+                }
+
                 // Scene 3 skip (cursor blinking / I AM A... typing)
                 const scene3 = document.getElementById('scene3');
                 const cursor = document.getElementById('blinkCursor');
@@ -675,12 +806,12 @@
             }
 
             if (e.key === 'Delete') {
-                // Fast-forward to Scene 3
+                // Fast-forward to Scene 2
                 document.getElementById('matrixCanvas').style.display = 'none';
                 document.getElementById('textContainer').style.display = 'none';
                 document.getElementById('followBtn').style.display = 'none';
 
-                loadScene3(document.getElementById('scene3'));
+                loadScene2(document.getElementById('scene2'));
             }
         });
     </script>