From 20100800a1ca0b217c6b3e43611958b74d3ee731 Mon Sep 17 00:00:00 2001
From: ducoterra <git@ducoterra.net>
Date: Thu, 28 May 2026 16:33:56 -0400
Subject: [PATCH] fade in and out terminal on focus

---
 src/script.js | 10 ++++++++++
 src/style.css | 12 ++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/script.js b/src/script.js
index 0c33963..2b660e3 100644
--- a/src/script.js
+++ b/src/script.js
@@ -529,11 +529,13 @@ function createServerRack() {
                     terminal.style.boxShadow = '0 0 8px rgba(234, 179, 8, 0.3), inset 0 0 20px rgba(34, 197, 94, 0.1)';
                     terminal.style.borderColor = '#eab308';
                     terminal.classList.add('grown');
+                    terminal.classList.add('opaque');
                     const face = terminal.closest('.server-face');
                     const unit = face?.closest('.rack-unit');
                     face?.classList.add('grown');
                     unit?.classList.add('grown');
                     document.getElementById('hero').classList.add('shifted');
+                    document.querySelector('.rack-container')?.classList.add('opaque');
                 });
                 
                 terminal.addEventListener('blur', () => {
@@ -541,11 +543,13 @@ function createServerRack() {
                     terminal.style.boxShadow = '';
                     terminal.style.borderColor = '#2a2a2e';
                     terminal.classList.remove('grown');
+                    terminal.classList.remove('opaque');
                     const face = terminal.closest('.server-face');
                     const unit = face?.closest('.rack-unit');
                     face?.classList.remove('grown');
                     unit?.classList.remove('grown');
                     document.getElementById('hero').classList.remove('shifted');
+                    document.querySelector('.rack-container')?.classList.remove('opaque');
                 });
                 
                 mobileInput.addEventListener('keydown', (e) => {
@@ -559,11 +563,13 @@ function createServerRack() {
                     terminal.style.boxShadow = '';
                     terminal.style.borderColor = '#2a2a2e';
                     terminal.classList.remove('grown');
+                    terminal.classList.remove('opaque');
                     const face = terminal.closest('.server-face');
                     const unit = face?.closest('.rack-unit');
                     face?.classList.remove('grown');
                     unit?.classList.remove('grown');
                     document.getElementById('hero').classList.remove('shifted');
+                    document.querySelector('.rack-container')?.classList.remove('opaque');
                 });
                 
                 let lastInputValue = '';
@@ -777,20 +783,24 @@ heroEl.addEventListener('click', (e) => {
     if (activeTerminal && activeTerminal._mobileInput) {
         if (activeTerminal.classList.contains('grown')) {
             activeTerminal.classList.remove('grown');
+            activeTerminal.classList.remove('opaque');
             const face = activeTerminal.closest('.server-face');
             const unit = face?.closest('.rack-unit');
             face?.classList.remove('grown');
             unit?.classList.remove('grown');
             heroEl.classList.remove('shifted');
             activeTerminal._mobileInput.blur();
+            document.querySelector('.rack-container')?.classList.remove('opaque');
         } else {
             activeTerminal._mobileInput.focus();
             activeTerminal.classList.add('grown');
+            activeTerminal.classList.add('opaque');
             const face = activeTerminal.closest('.server-face');
             const unit = face?.closest('.rack-unit');
             face?.classList.add('grown');
             unit?.classList.add('grown');
             heroEl.classList.add('shifted');
+            document.querySelector('.rack-container')?.classList.add('opaque');
         }
     }
 });
diff --git a/src/style.css b/src/style.css
index aeb7e4d..aa1d8b8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -51,11 +51,15 @@ body {
     top: 100px;
     transform: translateX(-50%);
     width: 680px;
-    transition: transform 0.1s linear;
+    transition: transform 0.1s linear, opacity 0.5s ease;
     opacity: 0.4;
     pointer-events: auto;
 }
 
+.rack-container.opaque {
+    opacity: 1;
+}
+
 .rack-top-bar {
     width: 100%;
     height: 36px;
@@ -201,7 +205,11 @@ body {
     position: relative;
     overflow: hidden;
     cursor: text;
-    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
+}
+
+.terminal-display.opaque {
+    opacity: 1;
 }
 
 .terminal-display.grown {