Stagger bubble fade-in so titles lead content

When transitioning between steps, the top bubble (title/subtitle)
now fades in 100ms before the bottom bubble (body content). This
sequences the load-in to guide the user's eye and improve
comprehension.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: noisysocks

special-pages/pages/onboarding/app/v4/components/Bubble.js

@@ -15,6 +15,7 @@ import { ProgressIndicator } from './ProgressIndicator';
  * @property {boolean} [exiting] - When true, fades out the container via CSS animation
  * @property {() => void} [onExitComplete] - Called when the fade-out animation ends
  * @property {import('../data/data-types').Progress} [progress] - When provided, renders a progress badge pinned to the bubble's top edge
+ * @property {number} [fadeInDelay] - Delay in ms before the fade-in animation starts (default 400ms via CSS)
  */
 
 /**
@@ -48,6 +49,7 @@ export function Bubble({
     exiting = false,
     onExitComplete,
     progress,
+    fadeInDelay,
     ...props
 }) {
     const { isReducedMotion } = useEnv();
@@ -142,6 +144,7 @@ export function Bubble({
             <div
                 ref={containerCallback}
                 class={cn(styles.container, isMounted.current && (exiting ? styles.fadeOut : styles.fadeIn))}
+                style={fadeInDelay !== undefined ? { '--fade-in-delay': `${fadeInDelay}ms` } : undefined}
                 onAnimationEnd={complete}
             >
                 <div ref={contentRef} class={styles.content}>

special-pages/pages/onboarding/app/v4/components/Bubble.module.css

@@ -37,7 +37,7 @@
 }
 
 .fadeIn {
-    animation: fade-in 267ms cubic-bezier(0.66, 0, 0.34, 1) 400ms backwards;
+    animation: fade-in 267ms cubic-bezier(0.66, 0, 0.34, 1) var(--fade-in-delay, 400ms) backwards;
 }
 
 /* Clip wrapper for bottom-left tail — overflow creates the tuck/untuck effect */

special-pages/pages/onboarding/app/v4/components/SingleStep.js

@@ -67,6 +67,7 @@ export function SingleStep() {
                 exiting={globalState.exiting}
                 onExitComplete={topBubble ? undefined : advance}
                 progress={showProgress && !topBubble ? progress : undefined}
+                fadeInDelay={topBubble ? 500 : undefined}
             >
                 {bottomBubble?.content}
             </Bubble>