Build in Hero to home and animate stuff correctly

styles.css

@@ -12,18 +12,8 @@ body {
     justify-content: flex-start;
     padding: 4rem 20rem;
     box-sizing: border-box;
-}
+    position: relative;
 
-body.ready {
-    transition: padding-top 0.5s ease;
-}
-
-body.home {
-    padding-top: 35vh;
-}
-
-body.home h1 {
-    font-size: 4rem;
 }
 
 @media(max-width: 1024px) {
@@ -32,6 +22,46 @@ body.home h1 {
     }
 }
 
+body.ready {
+    transition: padding-top 0.6s ease;
+}
+
+body.ready #hero {
+    transition: transform 0.6s ease, opacity 0.3s ease;
+}
+
+body.home {
+    padding-top: 45vh;
+}
+
+body:not(.home) #hero {
+    pointer-events: none;
+    opacity: 0;
+    transform: translateY(-40vh);
+}
+
+#hero {
+    /* opacity: 0; */
+    top: 30vh;
+    position:absolute;
+    font-size: 4rem;
+    opacity: 1;
+}
+
+#hero h1 {
+    margin: 0;
+}
+
+/* App */
+
+#app {
+    transition: opacity 0.3s;
+}
+
+#app.fading {
+    opacity: 0;
+}
+
 /* Nav Bar */
 
 nav {
@@ -135,8 +165,8 @@ footer svg {
 .bar {
     opacity: 0;
     position: absolute;
-    top: 0;
-    left: 10px; /* Offset */
+    top: 15px;
+    left: 20px; /* Offset */
     animation: pop 0.8s ease-out var(--delay);
     pointer-events: none;
 }