have terminal grow on focus to allow better mobile input

src/style.css

@@ -201,7 +201,25 @@ body {
     position: relative;
     overflow: hidden;
     cursor: text;
-    z-index: 2;
+    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.terminal-display.grown {
+    height: calc(100% - 4px);
+}
+
+.server-face {
+    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.rack-unit {
+    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+    max-height: 90px;
+    overflow: visible;
+}
+
+.rack-unit.grown {
+    max-height: 500px;
 }
 
 .terminal-display::before {
@@ -279,6 +297,7 @@ body {
 
 .rack-unit {
     width: 100%;
+    max-height: 90px;
     height: 90px;
     background: linear-gradient(180deg, #1a1a1f 0%, #151518 100%);
     border: 1px solid #2a2a30;
@@ -290,6 +309,13 @@ body {
     box-shadow: 
         inset 0 1px 0 rgba(255, 255, 255, 0.03),
         0 2px 8px rgba(0, 0, 0, 0.4);
+    overflow: visible;
+    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.rack-unit.grown {
+    height: 290px;
+    max-height: none;
 }
 
 .rack-unit::before {
@@ -353,7 +379,7 @@ body {
     align-items: center;
     justify-content: center;
     position: relative;
-    overflow: hidden;
+    overflow: visible;
 }
 
 .server-drive-bay {
@@ -745,6 +771,12 @@ nav .nav-inner {
     justify-content: center;
     padding: 6rem 2rem 4rem;
     position: relative;
+    z-index: 10;
+    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hero.shifted {
+    transform: translateY(400px);
 }
 
 .hero-content {