Animations: hardening to prevent animations on first page

includes/AMP/Story_Sanitizer.php

@@ -55,6 +55,7 @@ public function sanitize(): void {
 		$this->add_poster_images( $this->dom, $this->args['poster_images'] );
 		// This needs to be called before use_semantic_heading_tags() because it relies on the style attribute.
 		$this->deduplicate_inline_styles( $this->dom );
+		$this->disable_first_page_animations( $this->dom );
 		$this->add_video_cache( $this->dom, $this->args['video_cache'] );
 		$this->remove_blob_urls( $this->dom );
 		$this->sanitize_srcset( $this->dom );

includes/AMP/Traits/Sanitization_Utils.php

@@ -470,6 +470,33 @@ private function deduplicate_inline_styles( $document ): void {
 		}
 	}
 
+	/**
+	 * Adds CSS to reset animations for elements on the first page.
+	 *
+	 * Animations on the first page of a story are not allowed,
+	 * and removed at both the creation & serialization level (in the output package),
+	 * as well as the renderer (in AMP itself).
+	 *
+	 * This inline CSS adds another layer of defense, especially for older stories
+	 * that might still have some animation data on the first page.
+	 *
+	 * @since 1.43.0
+	 *
+	 * @param Document|AMP_Document $document Document instance.
+	 */
+	private function disable_first_page_animations( $document ): void {
+		$style_element = $document->createElement( 'style' );
+
+		if ( ! $style_element ) {
+			return;
+		}
+
+		$style_rule = $document->createTextNode( 'amp-story-page:first-of-type .animation-wrapper { --initial-opacity: 1; --initial-transform: none; }' );
+		$style_element->appendChild( $style_rule );
+
+		$document->head->appendChild( $style_element );
+	}
+
 	/**
 	 * Enables using video cache by adding the necessary attribute to `<amp-video>`
 	 *

packages/output/src/story.tsx

@@ -102,10 +102,10 @@ function OutputStory({
           poster-portrait-src={featuredMediaUrl}
           background-audio={backgroundAudio?.resource?.src ?? undefined}
         >
-          {pages.map((page) => (
+          {pages.map((page, index) => (
             <OutputPage
               key={page.id}
-              page={page}
+              page={index === 0 ? { ...page, animations: undefined } : page}
               defaultAutoAdvance={autoAdvance}
               defaultPageDuration={defaultPageDuration}
               flags={flags}