Messenger play-once story; Science chapter drum and overview

src/components/mascot/AiSparkle.css

@@ -74,6 +74,15 @@
   animation: burst-tip-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
+/* already seen: the finished ring, no pop-in */
+.burst[data-settled="true"] .burst-core,
+.burst[data-settled="true"] .burst-tip,
+.burst[data-settled="true"] .burst-stream {
+  animation: none !important;
+  opacity: 1;
+  stroke-dashoffset: 0;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .burst .burst-core,
   .burst .burst-tip,

src/components/mascot/AiSparkle.tsx

@@ -13,6 +13,8 @@ export interface AiSparkleProps {
   size?: number | string; // controls the overall size of the component
   className?: string;
   triggerAnimation?: boolean; // force animation to run manually if desired
+  /** Show the finished ring at once (no pop-in), e.g. when a story screen is revisited. */
+  settled?: boolean;
 }
 
 const DEFAULT_BRANCHES: SparkleBranch[] = [
@@ -35,7 +37,8 @@ export const AiSparkle: React.FC<AiSparkleProps> = ({
   branches = DEFAULT_BRANCHES, 
   size = "100%", 
   className = "",
-  triggerAnimation = false
+  triggerAnimation = false,
+  settled = false,
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const observerRef = useRef<HTMLDivElement>(null);
@@ -63,6 +66,7 @@ export const AiSparkle: React.FC<AiSparkleProps> = ({
     <div
       ref={wrapperRef}
       data-live={isLive ? "true" : "false"}
+      data-settled={settled ? "true" : undefined}
       className={`burst group aspect-square ${className.includes('absolute') || className.includes('fixed') ? className : `relative ${className}`}`}
       style={{ width: size, height: size, perspective: "1000px" }}
     >

src/components/mascot/AlienScanner.tsx

@@ -48,6 +48,8 @@ interface AlienScannerProps {
    * paint brush, the paint bucket, the ground shadow or the silver sparkle behind it.
    */
   bare?: boolean;
+  /** Show the silver sparkle ring already finished (no pop-in), e.g. on a revisited story screen. */
+  settled?: boolean;
 }
 
 export const AlienScanner: React.FC<AlienScannerProps> = ({
@@ -61,6 +63,7 @@ export const AlienScanner: React.FC<AlienScannerProps> = ({
   hoverLabel = 'Click to watch me explain more about onehook.club',
   forceExcited = false,
   hideTooltips = false,
+  settled = false,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const pointerFocusRef = useRef(false);
@@ -292,6 +295,7 @@ export const AlienScanner: React.FC<AlienScannerProps> = ({
     >
       {/* Ai Sparkle Background Effect */}
       {!bare && <AiSparkle 
+        settled={settled}
         size="320%" 
         className="hidden md:block absolute top-[80%] left-1/2 -translate-x-1/2 -translate-y-1/2 -z-10 pointer-events-none opacity-80" 
       />}