Save point: Tech Hub refinement — label cleanup, return-to-hub navigation, Scene 2 double-type fix, faster Scene 3 text

index.html

@@ -478,22 +478,105 @@
         .comp-table td.btc-col .no { color: #44ff44; }
         .comp-table td.btc-col .yes { color: #ff4444; }
 
-        /* Scene 6 */
+        /* Scene 6 — Tech Hub */
-        .scene6text {
+        #s6TechHub {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.2rem;
+        }
+        .hub-title {
+            font-size: 2rem;
+            font-weight: bold;
+            color: #00ff00;
+            margin-bottom: 1rem;
+            opacity: 0;
+            transition: opacity 1.5s ease;
+        }
+        .hub-title.visible { opacity: 1; }
+        .hub-subtitle {
+            font-size: 1rem;
+            color: #007700;
+            margin-bottom: 0.5rem;
+            opacity: 0;
+            transition: opacity 1.5s ease;
+        }
+        .hub-subtitle.visible { opacity: 1; }
+        .hub-row {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 2rem;
+            width: 100%;
+            max-width: 40rem;
+            padding: 1rem 2rem;
+            border: 1px solid #003300;
+            background: #000800;
+            border-radius: 4px;
+            opacity: 0;
+            transition: opacity 1s ease;
+        }
+        .hub-row.visible { opacity: 1; }
+        .hub-label {
+            color: #00ff00;
+            font-size: 1rem;
+        }
+        .hub-btn {
+            padding: 0.6rem 2rem;
+            font-size: 0.9rem;
+            background-color: #001100;
+            color: #00ff00;
+            border: 2px solid #00ff00;
+            cursor: pointer;
+            font-family: 'Courier New', monospace;
+            letter-spacing: 2px;
+            transition: background-color 0.2s ease;
+            opacity: 0;
+            pointer-events: none;
+        }
+        .hub-btn.visible {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        .hub-btn:hover { background-color: #003300; }
+        .hub-return {
+            margin-top: 1rem;
+        }
+
+        /* Scene 7 — Desktop OS comparison */
+        .scene7text {
             white-space: pre-wrap;
             text-align: left;
             width: 100%;
             max-width: 55rem;
             line-height: 1.8;
         }
-        .s6visual {
+        .s7visual {
             width: 100%;
             max-width: 55rem;
             margin-top: 1.5rem;
             opacity: 0;
             transition: opacity 4s ease;
         }
-        .s6visual.visible { opacity: 1; }
+        .s7visual.visible { opacity: 1; }
+
+        /* Scene 8 — Mobile OS + decentralized internet */
+        .scene8text {
+            white-space: pre-wrap;
+            text-align: left;
+            width: 100%;
+            max-width: 55rem;
+            line-height: 1.8;
+        }
+        .s8visual {
+            width: 100%;
+            max-width: 55rem;
+            margin-top: 1.5rem;
+            opacity: 0;
+            transition: opacity 4s ease;
+        }
+        .s8visual.visible { opacity: 1; }
+
         .s6section {
             margin-top: 1.5rem;
             text-align: left;
@@ -564,10 +647,9 @@
         <div id="scene3Text"></div>
         <div id="scene3ChoiceRow">
             <button class="scene3ChoiceBtn" id="yourMoneyBtn">YOUR MONEY</button>
-            <button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</button>
-            <button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button>
-            <button class="scene3ChoiceBtn" id="everythingBtn">EVERYTHING</button>
             <button class="scene3ChoiceBtn" id="yourTechBtn">YOUR TECH</button>
+            <button class="scene3ChoiceBtn" id="yourFoodBtn">YOUR FOOD</button>
+            <button class="scene3ChoiceBtn" id="yourHealthBtn">YOUR HEALTH</button>
         </div>
     </div>
 
@@ -609,10 +691,39 @@
         <button class="btnNext" id="returnFromScene5">RETURN</button>
     </div>
 
-    <div id="scene6" class="scene">
+    <div id="scene6" class="scene" style="flex-direction:column;">
-        <div class="scene6text" id="s6Text"></div>
+        <div id="s6TechHub">
-        <div class="s6visual" id="s6Visual"></div>
+            <div class="hub-title">TECHNOLOGY</div>
-        <button class="btnNext" id="returnFromScene6">RETURN</button>
+            <div class="hub-subtitle" id="hubSubtitle">CHOOSE A CATEGORY TO COMPARE</div>
+            <div class="hub-row" id="hubRow0">
+                <button class="hub-btn" id="goDesktopTech">DESKTOP</button>
+            </div>
+            <div class="hub-row" id="hubRow1">
+                <button class="hub-btn" id="goMobileTech">MOBILE</button>
+            </div>
+            <div class="hub-row" id="hubRow2">
+                <button class="hub-btn" id="goInternetTech">INTERNET</button>
+            </div>
+            <button class="hub-btn hub-return" id="returnFromTechHub">RETURN</button>
+        </div>
+    </div>
+
+    <div id="scene7" class="scene">
+        <div class="scene7text" id="s7Text"></div>
+        <div class="s7visual" id="s7Visual"></div>
+        <button class="btnNext" id="returnFromScene7">RETURN</button>
+    </div>
+
+    <div id="scene8" class="scene">
+        <div class="scene8text" id="s8Text"></div>
+        <div class="s8visual" id="s8Visual"></div>
+        <button class="btnNext" id="returnFromScene8">RETURN</button>
+    </div>
+
+    <div id="scene9" class="scene">
+        <div class="scene8text" id="s9Text"></div>
+        <div class="s8visual" id="s9Visual"></div>
+        <button class="btnNext" id="returnFromScene9">RETURN</button>
     </div>
 
     <script>
@@ -920,6 +1031,8 @@
         }
 
         function loadScene2(sceneElem) {
+            s2c.forEach(t => clearTimeout(t));
+            s2c = [];
             sceneElem.style.display = 'flex';
             const linesContainer = document.getElementById('scene2Lines');
             const line1 = document.getElementById('scene2Line1');
@@ -929,9 +1042,15 @@
             const cursor = document.getElementById('scene2Cursor');
             const cursor2 = document.getElementById('scene2Cursor2');
             const btn = document.getElementById('whatIsLabBtn');
+            message.textContent = '';
+            message2.textContent = '';
 
             let opacity = 0;
             const fadeIn = setInterval(() => {
+                if (sceneElem.style.display !== 'flex' || btn.style.visibility === 'visible') {
+                    clearInterval(fadeIn);
+                    return;
+                }
                 opacity += 0.05;
                 if (opacity >= 1) {
                     opacity = 1;
@@ -960,9 +1079,9 @@
                                             btn.style.opacity = btnOpacity;
                                         }, 30);
                                     }, 1000);
+                                }, undefined, undefined, s2c);
                             });
-                            });
+                        }, undefined, undefined, s2c);
-                        });
                     });
                 }
                 sceneElem.style.opacity = opacity;
@@ -984,9 +1103,14 @@
             sceneElem.style.display = 'flex';
             const title = document.getElementById('scene3Title');
             const textContainer = document.getElementById('scene3Text');
+            textContainer.textContent = '';
 
             let opacity = 0;
             const fadeIn = setInterval(() => {
+                if (sceneElem.style.display !== 'flex' || document.getElementById('scene3ChoiceRow').style.display === 'flex') {
+                    clearInterval(fadeIn);
+                    return;
+                }
                 opacity += 0.05;
                 if (opacity >= 1) {
                     opacity = 1;
@@ -996,29 +1120,36 @@
                         title.classList.add('visible');
                     }, 300);
 
-                    setTimeout(() => {
+                    const tMain = setTimeout(() => {
-                        typeCalmly(textContainer, "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT", () => {
+                        const line1 = document.createElement('div');
-                            setTimeout(() => {
+                        line1.textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT";
-                                textContainer.textContent += "\n\n\n\n\n";
+                        line1.style.cssText = 'opacity:0;transition:opacity 4s ease;';
-                                typeCalmly(textContainer, "DECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS", () => {
+                        textContainer.appendChild(line1);
-                                    textContainer.textContent += "\n\n\n\n\n";
+                        const t1 = setTimeout(() => line1.style.opacity = '1', 50);
-                                    typeCalmly(textContainer, "WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED", () => {
+                        scene3TypewriterTimeouts.push(t1);
-                                        setTimeout(() => {
+
+                        const tLine2 = setTimeout(() => {
+                            const line2 = document.createElement('div');
+                            line2.textContent = "WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
+                            line2.style.cssText = 'opacity:0;transition:opacity 1.5s ease;margin-top:5.5rem;margin-bottom:2rem;text-align:center;';
+                            textContainer.appendChild(line2);
+                            const t2 = setTimeout(() => line2.style.opacity = '1', 50);
+                            scene3TypewriterTimeouts.push(t2);
+                        }, 3000);
+                        scene3TypewriterTimeouts.push(tLine2);
+
                         const row = document.getElementById('scene3ChoiceRow');
                         row.style.display = 'flex';
                         const btns = row.querySelectorAll('.scene3ChoiceBtn');
                         btns.forEach((btn, i) => {
-                                                setTimeout(() => {
+                            const tBtn = setTimeout(() => {
                                 btn.style.opacity = '1';
                                 btn.style.pointerEvents = 'auto';
-                                                }, i * 200);
+                            }, i * 200 + 3500);
+                            scene3TypewriterTimeouts.push(tBtn);
                         });
-                                        }, 1000);
+                    }, 600);
-                                    }, undefined, undefined, scene3TypewriterTimeouts);
+                    scene3TypewriterTimeouts.push(tMain);
-                                }, undefined, undefined, scene3TypewriterTimeouts);
-                            }, 2000);
-                        }, undefined, undefined, scene3TypewriterTimeouts);
-                    }, 800);
                 }
                 sceneElem.style.opacity = opacity;
             }, 30);
@@ -1058,6 +1189,7 @@
             vis.className='s4visual';
             let o=0;
             const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('next4a').style.visibility === 'visible') { clearInterval(fi); return; }
                 o+=0.05;if(o>=1){o=1;clearInterval(fi);
                     buildTimeline(tl,0);
                     typeHtmlCalmly(txt,"IMAGINE THE GOVERNMENT SHOWED UP AT YOUR DOOR AND DEMANDED YOUR SAVINGS. THAT'S NOT HYPOTHETICAL — IT HAPPENED IN 1933.",()=>{
@@ -1095,6 +1227,7 @@
             vis.className='s4visual';
             let o=0;
             const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('next4b').style.visibility === 'visible') { clearInterval(fi); return; }
                 o+=0.05;if(o>=1){o=1;clearInterval(fi);
                     buildTimeline(tl,1);
                     typeHtmlCalmly(txt,"ON APRIL 5, 1933, ",()=>{
@@ -1124,6 +1257,7 @@
             vis.className='s4visual';
             let o=0;
             const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('next4c').style.visibility === 'visible') { clearInterval(fi); return; }
                 o+=0.05;if(o>=1){o=1;clearInterval(fi);
                     buildTimeline(tl,2);
                     typeHtmlCalmly(txt,"AFTER FORCING PEOPLE TO TURN IN THEIR GOLD, THE GOVERNMENT PASSED THE ",()=>{
@@ -1165,6 +1299,7 @@
             vis.className='s4visual';
             let o=0;
             const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('next4d').style.visibility === 'visible') { clearInterval(fi); return; }
                 o+=0.05;if(o>=1){o=1;clearInterval(fi);
                     buildTimeline(tl,3);
                     typeHtmlCalmly(txt,"THE PAPER DOLLAR COULD STILL BE EXCHANGED FOR GOLD, BUT ON ",()=>{
@@ -1212,6 +1347,7 @@
             vis.className='s4visual';
             let o=0;
             const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('next4e').style.visibility === 'visible') { clearInterval(fi); return; }
                 o+=0.05;if(o>=1){o=1;clearInterval(fi);
                     buildTimeline(tl,4);
                     typeHtmlCalmly(txt,"BITCOIN HAS BEEN CALLED ",()=>{
@@ -1227,7 +1363,7 @@
                                 '<table class="comp-table"><tr><th></th><th>GOLD</th><th>BITCOIN</th></tr>'
                                 +'<tr><td>CONFISCATABLE?</td><td class="yes">✅ YES (1933)</td><td class="no">❌ NO</td></tr>'
                                 +'<tr><td>PRINTABLE?</td><td class="no">❌ NO</td><td class="no">❌ NO</td></tr>'
-                                +'<tr><td>CENSORABLE?</td><td class="yes">✅ YES</td><td class="no">❌ NO</td></tr>'
+                                +'<tr><td>UNCENSORABLE?</td><td class="no">❌ NO</td><td class="yes">✅ YES</td></tr>'
                                 +'<tr><td>SUPPLY CAP?</td><td class="no">❌ NO</td><td class="yes">✅ 21M</td></tr>'
                                 +'<tr><td>TRUST MODEL</td><td>GOVERNMENT</td><td>CODE</td></tr>'
                                 +'</table>'
@@ -1237,6 +1373,7 @@
                                 +'<div class="punch-card"><span class="punch-icon">🚫</span><span class="punch-text">NO BANK<br>CAN FREEZE IT</span></div>'
                                 +'</div>';
                                 vis.classList.add('visible');
+                                showNextBtn('next4e');
                             },1200);
                             s4c.push(t1);
                         },undefined,undefined,s4c);
@@ -1256,6 +1393,7 @@
             vis.className='s5visual';
             let o=0;
             const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene5').style.visibility === 'visible') { clearInterval(fi); return; }
                 o+=0.05;if(o>=1){o=1;clearInterval(fi);
                     typeCalmly(txt,"BITCOIN HAS NO TRUE COMPETITORS AS SOUND MONEY.",()=>{
                         const t1=setTimeout(()=>{
@@ -1352,43 +1490,134 @@
         }
 
         function loadScene6(sceneElem) {
-            s6c=[];
             sceneElem.style.display='flex';
-            const txt=document.getElementById('s6Text');
+            const hub=document.getElementById('s6TechHub');
-            const vis=document.getElementById('s6Visual');
+            hub.style.opacity='0';
-            txt.innerHTML='';
+            const title=hub.querySelector('.hub-title');
-            vis.className='s6visual';
+            const subtitle=document.getElementById('hubSubtitle');
+            const rows=hub.querySelectorAll('.hub-row');
+            const btns=hub.querySelectorAll('.hub-btn');
+            title.classList.remove('visible');
+            subtitle.classList.remove('visible');
+            rows.forEach(r=>r.classList.remove('visible'));
+            btns.forEach(b=>b.classList.remove('visible'));
+            sceneElem.style.opacity='0';
             let o=0;
             const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex') { clearInterval(fi); return; }
                 o+=0.05;if(o>=1){o=1;clearInterval(fi);
-                    typeCalmly(txt,"THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.",()=>{
+                    setTimeout(()=>{
+                        title.classList.add('visible');
+                        setTimeout(()=>{
+                            subtitle.classList.add('visible');
+                        },500);
+                        rows.forEach((row,i)=>{
+                            setTimeout(()=>row.classList.add('visible'),(i+1)*400+700);
+                        });
+                        setTimeout(()=>{
+                            btns.forEach((btn,i)=>{
+                                setTimeout(()=>btn.classList.add('visible'),i*200+100);
+                            });
+                        },rows.length*400+900);
+                    },300);
+                }
+                sceneElem.style.opacity=o;
+                hub.style.opacity=o;
+            },30);
+        }
+
+        function loadScene7(sceneElem) {
+            s7c=[];
+            sceneElem.style.display='flex';
+            const txt=document.getElementById('s7Text');
+            const vis=document.getElementById('s7Visual');
+            txt.innerHTML='';
+            vis.className='s7visual';
+            let o=0;
+            const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene7').style.visibility === 'visible') { clearInterval(fi); return; }
+                o+=0.05;if(o>=1){o=1;clearInterval(fi);
+                    typeCalmly(txt,"DESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.",()=>{
                         const t1=setTimeout(()=>{
                             txt.innerHTML+="\n\n";
                             vis.classList.add('visible');
-                            vis.innerHTML='';
+                            vis.innerHTML=buildS6DesktopTable();
-                            vis.innerHTML+=buildS6DesktopTable();
+                            typeCalmly(txt,"LINUX IS THE ONLY OS THAT RESPECTS YOUR FREEDOM — BECAUSE IT'S BUILT BY THE COMMUNITY, NOT A CORPORATION.",()=>{
-                            typeCalmly(txt,"DESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.",()=>{
+                                const t3=setTimeout(()=>{
-                                txt.innerHTML+="\n\n\n";
+                                    document.getElementById('returnFromScene7').style.cssText='';
-                                vis.innerHTML+=buildS6MobileTable();
+                                    showNextBtn('returnFromScene7');
+                                },400);
+                                s7c.push(t3);
+                            },8,20,s7c);
+                        },300);
+                        s7c.push(t1);
+                    },8,20,s7c);
+                }
+                sceneElem.style.opacity=o;
+            },30);
+        }
+
+        function loadScene8(sceneElem) {
+            s8c=[];
+            sceneElem.style.display='flex';
+            const txt=document.getElementById('s8Text');
+            const vis=document.getElementById('s8Visual');
+            txt.innerHTML='';
+            vis.className='s8visual';
+            let o=0;
+            const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene8').style.visibility === 'visible') { clearInterval(fi); return; }
+                o+=0.05;if(o>=1){o=1;clearInterval(fi);
                     typeCalmly(txt,"YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.",()=>{
+                        const t1=setTimeout(()=>{
                             txt.innerHTML+="\n\n";
-                                    vis.innerHTML+='<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
+                            vis.classList.add('visible');
+                            vis.innerHTML=buildS6MobileTable();
+                            typeCalmly(txt,"GRAPHENEOS PROVES THAT PRIVACY AND USABILITY CAN COEXIST — BUT ONLY WHEN YOU TAKE CONTROL.",()=>{
+                                const t3=setTimeout(()=>{
+                                    document.getElementById('returnFromScene8').style.cssText='';
+                                    showNextBtn('returnFromScene8');
+                                },400);
+                                s8c.push(t3);
+                            },8,20,s8c);
+                        },300);
+                        s8c.push(t1);
+                    },8,20,s8c);
+                }
+                sceneElem.style.opacity=o;
+            },30);
+        }
+
+        function loadScene9(sceneElem) {
+            s9c=[];
+            sceneElem.style.display='flex';
+            const txt=document.getElementById('s9Text');
+            const vis=document.getElementById('s9Visual');
+            txt.innerHTML='';
+            vis.className='s8visual';
+            let o=0;
+            const fi=setInterval(()=>{
+                if (sceneElem.style.display !== 'flex' || document.getElementById('returnFromScene9').style.visibility === 'visible') { clearInterval(fi); return; }
+                o+=0.05;if(o>=1){o=1;clearInterval(fi);
+                    typeCalmly(txt,"THE INTERNET WAS DESIGNED TO BE DECENTRALIZED — BUT ISPS HAVE TURNED IT INTO A UTILITY CONTROLLED BY GATEKEEPERS.",()=>{
+                        const t1=setTimeout(()=>{
+                            txt.innerHTML+="\n\n";
+                            vis.classList.add('visible');
+                            vis.innerHTML='<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
                                 +'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
                                 +'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
                                 +'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
                                 +'</div></div>';
                             typeCalmly(txt,"MESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.",()=>{
-                                        const t6=setTimeout(()=>{
+                                const t4=setTimeout(()=>{
-                                            document.getElementById('returnFromScene6').style.cssText='';
+                                    document.getElementById('returnFromScene9').style.cssText='';
-                                            showNextBtn('returnFromScene6');
+                                    showNextBtn('returnFromScene9');
                                 },400);
-                                        s6c.push(t6);
+                                s9c.push(t4);
-                                    },8,20,s6c);
+                            },8,20,s9c);
-                                },8,20,s6c);
-                            },8,20,s6c);
                         },300);
-                        s6c.push(t1);
+                        s9c.push(t1);
-                    },8,20,s6c);
+                    },8,20,s9c);
                 }
                 sceneElem.style.opacity=o;
             },30);
@@ -1396,7 +1625,10 @@
 
         let s4c = [];
         let s5c = [];
-        let s6c = [];
+        let s2c = [];
+        let s7c = [];
+        let s8c = [];
+        let s9c = [];
 
         // Initialize on load
         window.addEventListener('load', () => {
@@ -1404,7 +1636,10 @@
         });
 
         // Button click handlers
-        document.getElementById('followBtn').addEventListener('click', transitionToScene2);
+        document.getElementById('followBtn').addEventListener('click', () => {
+            document.getElementById('followBtn').disabled = true;
+            transitionToScene2();
+        });
         document.getElementById('whatIsLabBtn').addEventListener('click', () => {
             transitionToScene('scene2', loadScene3, 'scene3');
         });
@@ -1442,16 +1677,32 @@
             s3.style.display = 'flex';
             s3.style.opacity = '1';
             document.getElementById('scene3Title').classList.add('visible');
-            document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nDECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
+            document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
             const row = document.getElementById('scene3ChoiceRow');
             row.style.display = 'flex';
-            row.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
+            const btns = row.querySelectorAll('.scene3ChoiceBtn');
+            btns.forEach(btn => {
+                btn.style.opacity = '0';
+                btn.style.pointerEvents = 'none';
+            });
+            setTimeout(() => {
+                btns.forEach(btn => {
                     btn.style.opacity = '1';
                     btn.style.pointerEvents = 'auto';
                 });
+            }, 500);
         });
 
-        document.getElementById('returnFromScene6').addEventListener('click', () => {
+        document.getElementById('goDesktopTech').addEventListener('click', () => {
+            transitionToScene('scene6', loadScene7, 'scene7');
+        });
+        document.getElementById('goMobileTech').addEventListener('click', () => {
+            transitionToScene('scene6', loadScene8, 'scene8');
+        });
+        document.getElementById('goInternetTech').addEventListener('click', () => {
+            transitionToScene('scene6', loadScene9, 'scene9');
+        });
+        document.getElementById('returnFromTechHub').addEventListener('click', () => {
             document.getElementById('scene6').style.display = 'none';
             const s3 = document.getElementById('scene3');
             scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
@@ -1459,13 +1710,47 @@
             s3.style.display = 'flex';
             s3.style.opacity = '1';
             document.getElementById('scene3Title').classList.add('visible');
-            document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nDECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
+            document.getElementById('scene3Text').textContent = "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
             const row = document.getElementById('scene3ChoiceRow');
             row.style.display = 'flex';
-            row.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
+            const btns = row.querySelectorAll('.scene3ChoiceBtn');
+            btns.forEach(btn => {
+                btn.style.opacity = '0';
+                btn.style.pointerEvents = 'none';
+            });
+            setTimeout(() => {
+                btns.forEach(btn => {
                     btn.style.opacity = '1';
                     btn.style.pointerEvents = 'auto';
                 });
+            }, 500);
+        });
+
+        function showTechHub() {
+            const s6 = document.getElementById('scene6');
+            s6.style.display = 'flex';
+            s6.style.opacity = '1';
+            const hub = document.getElementById('s6TechHub');
+            hub.style.opacity = '1';
+            hub.querySelector('.hub-title').classList.add('visible');
+            document.getElementById('hubSubtitle').classList.add('visible');
+            hub.querySelectorAll('.hub-row').forEach(r => r.classList.add('visible'));
+            hub.querySelectorAll('.hub-btn').forEach(b => b.classList.add('visible'));
+        }
+
+        document.getElementById('returnFromScene7').addEventListener('click', () => {
+            document.getElementById('scene7').style.display = 'none';
+            showTechHub();
+        });
+
+        document.getElementById('returnFromScene8').addEventListener('click', () => {
+            document.getElementById('scene8').style.display = 'none';
+            showTechHub();
+        });
+
+        document.getElementById('returnFromScene9').addEventListener('click', () => {
+            document.getElementById('scene9').style.display = 'none';
+            showTechHub();
         });
 
         // Keyboard shortcuts for testing
@@ -1490,6 +1775,8 @@
                 const s2Line2 = document.getElementById('scene2Line2');
                 const s2Btn = document.getElementById('whatIsLabBtn');
                 if (scene2.style.display === 'flex' && s2Btn.style.visibility !== 'visible') {
+                    s2c.forEach(t => clearTimeout(t));
+                    s2c = [];
                     s2Cursor.style.display = 'none';
                     s2Cursor2.style.display = 'none';
                     s2Message.textContent = '...AND THAT AWARENESS HAS LED YOU HERE...';
@@ -1507,14 +1794,19 @@
                     scene3TypewriterTimeouts.forEach(t => clearTimeout(t));
                     scene3TypewriterTimeouts = [];
                     document.getElementById('scene3Text').textContent =
-                        "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n"
+                        "IS AN INCUBATOR THAT HAS MANY DECENTRALIZED STARTUPS UNDERNEATH IT\n\n\n\n\nWE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
-                        + "DECENTRALIZED MEANS NO SINGLE AUTHORITY CONTROLS EVERYTHING — AUTHORITY IS SHARED ACROSS MANY SOVEREIGN INDIVIDUALS\n\n"
-                        + "WE BELIEVE EVERYTHING SHOULD BE DECENTRALIZED";
                     s3ChoiceRow.style.display = 'flex';
-                    s3ChoiceRow.querySelectorAll('.scene3ChoiceBtn').forEach(btn => {
+                    const btns3 = s3ChoiceRow.querySelectorAll('.scene3ChoiceBtn');
+                    btns3.forEach(btn => {
+                        btn.style.opacity = '0';
+                        btn.style.pointerEvents = 'none';
+                    });
+                    setTimeout(() => {
+                        btns3.forEach(btn => {
                             btn.style.opacity = '1';
                             btn.style.pointerEvents = 'auto';
                         });
+                    }, 500);
                 }
 
                 // Scene 4 skip (sub-scenes 4a-4e)
@@ -1555,7 +1847,7 @@
                                 '<table class="comp-table"><tr><th></th><th>GOLD</th><th>BITCOIN</th></tr>'
                                 +'<tr><td>CONFISCATABLE?</td><td class="yes">✅ YES (1933)</td><td class="no">❌ NO</td></tr>'
                                 +'<tr><td>PRINTABLE?</td><td class="no">❌ NO</td><td class="no">❌ NO</td></tr>'
-                                +'<tr><td>CENSORABLE?</td><td class="yes">✅ YES</td><td class="no">❌ NO</td></tr>'
+                                +'<tr><td>UNCENSORABLE?</td><td class="no">❌ NO</td><td class="yes">✅ YES</td></tr>'
                                 +'<tr><td>SUPPLY CAP?</td><td class="no">❌ NO</td><td class="yes">✅ 21M</td></tr>'
                                 +'<tr><td>TRUST MODEL</td><td>GOVERNMENT</td><td>CODE</td></tr>'
                                 +'</table>'
@@ -1595,21 +1887,47 @@
                     showNextBtn('returnFromScene5');
                 }
 
-                // Scene 6 skip
+                // Scene 7 skip
-                const s6 = document.getElementById('scene6');
+                const s7 = document.getElementById('scene7');
-                if (s6.style.display === 'flex') {
+                if (s7.style.display === 'flex') {
-                    s6c.forEach(t => clearTimeout(t)); s6c = [];
+                    s7c.forEach(t => clearTimeout(t)); s7c = [];
-                    const txt = document.getElementById('s6Text');
+                    const txt = document.getElementById('s7Text');
-                    const vis = document.getElementById('s6Visual');
+                    const vis = document.getElementById('s7Visual');
-                    txt.innerHTML = "THE BATTLE FOR CONTROL ISN'T JUST ABOUT MONEY — IT'S ABOUT EVERY TOOL YOU USE EVERY DAY.\n\nDESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.\n\n\nYOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.\n\nMESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.";
+                    txt.innerHTML = "DESKTOP COMPUTING IS DOMINATED BY CORPORATIONS THAT MONETIZE YOUR DATA AND RESTRICT YOUR FREEDOM.\n\nLINUX IS THE ONLY OS THAT RESPECTS YOUR FREEDOM — BECAUSE IT'S BUILT BY THE COMMUNITY, NOT A CORPORATION.";
-                    vis.innerHTML=buildS6DesktopTable()+buildS6MobileTable()+'<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
+                    vis.innerHTML=buildS6DesktopTable();
+                    vis.classList.add('visible');
+                    document.getElementById('returnFromScene7').style.cssText='';
+                    showNextBtn('returnFromScene7');
+                }
+
+                // Scene 8 skip
+                const s8 = document.getElementById('scene8');
+                if (s8.style.display === 'flex') {
+                    s8c.forEach(t => clearTimeout(t)); s8c = [];
+                    const txt = document.getElementById('s8Text');
+                    const vis = document.getElementById('s8Visual');
+                    txt.innerHTML = "YOUR PHONE IS LITERALLY A TRACKING DEVICE IN YOUR POCKET — UNLESS YOU CHOOSE OTHERWISE.\n\nGRAPHENEOS PROVES THAT PRIVACY AND USABILITY CAN COEXIST — BUT ONLY WHEN YOU TAKE CONTROL.";
+                    vis.innerHTML=buildS6MobileTable();
+                    vis.classList.add('visible');
+                    document.getElementById('returnFromScene8').style.cssText='';
+                    showNextBtn('returnFromScene8');
+                }
+
+                // Scene 9 skip
+                const s9 = document.getElementById('scene9');
+                if (s9.style.display === 'flex') {
+                    s9c.forEach(t => clearTimeout(t)); s9c = [];
+                    const txt = document.getElementById('s9Text');
+                    const vis = document.getElementById('s9Visual');
+                    txt.innerHTML = "THE INTERNET WAS DESIGNED TO BE DECENTRALIZED — BUT ISPS HAVE TURNED IT INTO A UTILITY CONTROLLED BY GATEKEEPERS.\n\nMESH NETWORKS AND P2P PROTOCOLS LET COMMUNITIES BUILD THEIR OWN INTERNET — NO ISP REQUIRED.";
+                    vis.innerHTML='<div class="s6section"><div class="s6section-title">INTERNET WITHOUT AN ISP</div><div class="punch-row">'
                         +'<div class="punch-card"><span class="punch-icon">🌐</span><span class="punch-text">MESH NETWORKS —<br>EVERY DEVICE IS A NODE</span></div>'
                         +'<div class="punch-card"><span class="punch-icon">🔗</span><span class="punch-text">PEER TO PEER —<br>DIRECT CONNECTION, NO MIDDLEMAN</span></div>'
                         +'<div class="punch-card"><span class="punch-icon">📡</span><span class="punch-text">NO ISP —<br>COMMUNITY-OWNED INFRASTRUCTURE</span></div>'
                         +'</div></div>';
                     vis.classList.add('visible');
-                    document.getElementById('returnFromScene6').style.cssText='';
+                    document.getElementById('returnFromScene9').style.cssText='';
-                    showNextBtn('returnFromScene6');
+                    showNextBtn('returnFromScene9');
                 }
 
             }