docs: animate homepage hero words

docs/styles.css

@@ -44,6 +44,92 @@ body::after {
   background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3));
 }
 
+.home-page .site-header,
+.home-page .site-footer,
+.home-page .title-context,
+.home-page .hero .eyebrow,
+.home-page .hero-lede,
+.home-page .hero-actions,
+.home-page .hero-stats,
+.home-page .terminal,
+.home-page main > section:not(.hero) {
+  opacity: 0;
+  animation: page-reveal 700ms ease-out 2.45s forwards;
+}
+
+.intro-target {
+  display: inline;
+}
+
+.intro-word {
+  display: inline-block;
+  opacity: 0;
+  transform: translateY(-42vh);
+  animation: word-drop 640ms cubic-bezier(0.18, 0.88, 0.22, 1.08) forwards;
+  animation-delay: calc(140ms + (var(--i) * 190ms));
+  color: var(--intro-color, var(--text));
+}
+
+.intro-word:nth-child(1) {
+  --intro-color: #ffffff;
+}
+
+.intro-word:nth-child(2) {
+  --intro-color: #b7a2ff;
+}
+
+.intro-word:nth-child(3) {
+  --intro-color: var(--brand-2);
+}
+
+.intro-word:nth-child(4) {
+  --intro-color: var(--brand);
+}
+
+.intro-word:nth-child(5) {
+  --intro-color: var(--brand-3);
+}
+
+@keyframes word-drop {
+  0% {
+    opacity: 0;
+    transform: translateY(-42vh);
+  }
+
+  72% {
+    opacity: 1;
+    transform: translateY(0.08em);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes page-reveal {
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .home-page .site-header,
+  .home-page .site-footer,
+  .home-page .title-context,
+  .home-page .hero .eyebrow,
+  .home-page .hero-lede,
+  .home-page .hero-actions,
+  .home-page .hero-stats,
+  .home-page .terminal,
+  .home-page main > section:not(.hero),
+  .intro-word {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}
+
 a {
   color: inherit;
   text-decoration: none;