assets/styles/millironx.css

@@ -254,3 +254,76 @@ blockquote small {
     max-width: 50%;
   }
 } /* end @media */
+
+@supports (animation-timeline: scroll()) {
+  @keyframes sticky-header {
+    from {
+      height: 50vh;
+      top: 6rem;
+    }
+
+    to {
+      height: 10vh;
+      top: -1rem;
+    }
+  }
+
+  @keyframes blurry-header {
+    from {
+      filter: blur(0);
+    }
+
+    to {
+      filter: blur(2px);
+    }
+  }
+
+  @keyframes transparent-text-bg {
+    from {
+      background-color: rgba(0.33, 0.33, 0.33, 0.33);
+    }
+    to {
+      background-color: rgba(0.33, 0.33, 0.33, 0);
+    }
+  }
+
+  main {
+    position: relative;
+    top: 55vh;
+  }
+
+  .motto {
+    position: fixed;
+    top: 12rem;
+
+    animation: sticky-header linear forwards;
+    animation-timeline: scroll();
+    animation-range: 0.001vh 50vh;
+  }
+
+  .motto::before {
+    filter: blur(12px);
+
+    top: 2rem;
+
+    animation: blurry-header linear forwards;
+    animation-timeline: scroll();
+    animation-range: 0.001vh 50vh;
+  }
+
+  .motto-inside h1 {
+    animation: transparent-text-bg linear forwards;
+    animation-timeline: scroll();
+    animation-range: 0.001vh 40vh;
+  }
+
+  @media (min-width: 768px) {
+    .motto {
+      width: calc(100% - 8rem);
+    }
+
+    .motto::before {
+      top: 0;
+    }
+  }
+} /* end @supports */