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

bun.lock

@@ -11,6 +11,7 @@
         "@biomejs/biome": "^2.3.10",
         "@commitlint/cli": "^20.2.0",
         "@commitlint/config-conventional": "^20.2.0",
+        "chrome-devtools-mcp": "^0.17.0",
         "commitizen": "^4.3.1",
         "cz-git": "^1.12.0",
         "lefthook": "^2.0.12",
@@ -352,6 +353,8 @@
 
     "chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
 
+    "chrome-devtools-mcp": ["chrome-devtools-mcp@0.17.0", "", { "bin": { "chrome-devtools-mcp": "build/src/index.js" } }, "sha512-vMi2zXq2ph2EG6amyyApcvuKJcEFj4cGK1XQVb6x8vQYHk8D9ZnSxdtFqD0cRnG7SbUOrg3GhjOZEJAD1dZWSQ=="],
+
     "ci-info": ["ci-info@4.4.0", "", {}, "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg=="],
 
     "cli-boxes": ["cli-boxes@3.0.0", "", {}, "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g=="],

package.json

@@ -22,6 +22,7 @@
         "@biomejs/biome": "^2.3.10",
         "@commitlint/cli": "^20.2.0",
         "@commitlint/config-conventional": "^20.2.0",
+        "chrome-devtools-mcp": "^0.17.0",
         "commitizen": "^4.3.1",
         "cz-git": "^1.12.0",
         "lefthook": "^2.0.12"

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 {