tried transitions

style.css

@@ -11,7 +11,10 @@ body {
 img, video { max-width: 100% }
 
 #landing { display: none; text-decoration: underline }
+
+@media (orientation: portrait) {
   #landing.active { display: block }
+}
 
 header {
   flex-shrink: 0;
@@ -32,7 +35,16 @@ header {
       margin: 0;
       /* turn the menu into a dynamic one for highly vertical devices */
       @media (orientation: portrait) {
-        & li { display: none }
+        & li { display: none; transition: display 3s ease }
+        /* TODO: try this
+        transition: opacity 1s ease-out;
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+    TO 
+     opacity: 1;
+    height: auto;
+    */
         & li.active { display: inherit }
         &:hover li { display: block }
       }