feat(motion): add scroll reveals and micro-interactions

src/styles/globals.css

@@ -119,6 +119,51 @@ body {
   height: 3px;
   background-color: var(--accent-default);
   border-radius: var(--radius-pill);
+  transform-origin: left center;
+}
+
+/* One-time viewport reveals. Content remains visible when JavaScript is unavailable. */
+html[data-motion-ready='true'] [data-reveal] {
+  opacity: 0;
+  transform: translateY(1rem);
+  transition:
+    opacity var(--motion-duration-reveal) var(--motion-ease-out),
+    transform var(--motion-duration-reveal) var(--motion-ease-out);
+  transition-delay: var(--reveal-delay, 0ms);
+  will-change: opacity, transform;
+}
+
+html[data-motion-ready='true'] [data-reveal='soft'] {
+  transform: translateY(0.625rem);
+}
+
+html[data-motion-ready='true'] [data-reveal='scale'] {
+  transform: translateY(0.5rem) scale(0.97);
+}
+
+html[data-motion-ready='true'] [data-reveal='image'] {
+  transform: translateY(0.5rem) scale(0.985);
+}
+
+html[data-motion-ready='true'] [data-reveal][data-visible='true'] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  will-change: auto;
+}
+
+html[data-motion-ready='true'] [data-visible='true'] .section-underline {
+  animation: motionUnderline 500ms var(--motion-ease-out) 120ms both;
+}
+
+@keyframes motionUnderline {
+  from {
+    opacity: 0;
+    transform: scaleX(0.25);
+  }
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+  }
 }
 
 /* Pacifico Display Font Class */

src/styles/tokens.css

@@ -83,6 +83,9 @@
   --letter-spacing-eyebrow: 0.16em;
   --motion-duration-fast: 140ms;
   --motion-duration-default: 200ms;
+  --motion-duration-reveal: 500ms;
+  --motion-duration-hero: 650ms;
+  --motion-stagger: 50ms;
   --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);