feat(page): animate hero words individually and fix mobile background sizing

src/pages/index.astro

@@ -3,7 +3,10 @@ import Layout from "../layouts/Layout.astro";
 
 // const signupEndpoint = import.meta.env.PUBLIC_SIGNUP_ENDPOINT || "/api/signup";
 
-const heroLines = ["Talent, media, and tech", "for collective power"];
+const heroWords = [
+    ["Talent,", "media,", "and", "tech"],
+    ["for", "collective", "power"],
+];
 
 const pillars = [
     {
@@ -43,8 +46,15 @@ const pillars = [
     </header>
     <div class="container hero-inner">
       <h1 class="hero-headline">
-        {heroLines.map((line, i) => (
-          <span class="line-reveal" style={`--i: ${i}`}>{line}</span>
+        {heroWords.map((group, groupIndex) => (
+          <span class="word-line">
+            {group.map((word, wordIndex) => {
+              const wordNum = heroWords.slice(0, groupIndex).flat().length + wordIndex;
+              return (
+                <span class="word-reveal" style={`--i: ${wordNum}`}>{word}</span>
+              );
+            })}
+          </span>
         ))}
       </h1>
       <p class="hero-sub">
@@ -191,6 +201,8 @@ const pillars = [
   .hero-bg img {
     width: 100%;
     height: 100%;
+    min-height: 100vh;
+    min-height: 100dvh;
     object-fit: cover;
     object-position: center center;
     filter: blur(2px) saturate(0.15) brightness(1.2);
@@ -255,13 +267,28 @@ const pillars = [
     line-height: 1.05;
   }
 
-  .line-reveal {
-    display: block;
+  .word-line {
+    display: inline;
+  }
+
+  .word-reveal {
+    display: inline-block;
     opacity: 0;
     filter: blur(10px);
     transform: translateY(0.4em);
     animation: line-clip 1.4s var(--ease-out-quart) forwards;
-    animation-delay: calc(0.3s + var(--i) * 0.35s);
+    animation-delay: calc(0.3s + var(--i) * 0.12s);
+    margin-right: 0.25em;
+  }
+
+  .word-reveal:last-child {
+    margin-right: 0;
+  }
+
+  @media (min-width: 768px) {
+    .word-line {
+      display: block;
+    }
   }
 
   @keyframes line-clip {