DOC: Replace landing page Roakey peeks with animated spritesheets

[romanlutz]

Description

The landing page currently slides two photoreal Roakey images in from the screen edges as you scroll (added in #2099). This replaces them with three cartoon spritesheets that actually animate: each mascot plays a short frame sequence driven by a scroll timeline as its section comes into view, then holds its final pose.

roakey-landing-scroll.mp4

Each sprite is a fixed-size window onto a horizontal frame strip. object-fit: none renders the strip at 1:1 and the box clips it to a single frame, so animating object-position steps through the frames. A view() timeline drives that stepping, which means the reader scrubs the animation rather than watching it play on a timer.

Placement is anchored to the content each sprite belongs to rather than to the page edge, so the three sit at clearly different levels down the page:

• Peek-and-scout perches on top of the CoPyRIT card and rises over its own ledge (7 frames)
• Spyglass scan is flipped to look left and rests on the top edge of the install code block (5 frames)
• Run and flag runs in and plants the flag, centred, below the tab group (6 frames)

Two details worth a reviewer's attention:

Reduced motion needed a real fallback, not animation: none. The base object-position is the last frame, not the first. The previous rule disabled the animation outright, which would pin the scout to frame 1 - and frame 1 is an empty ledge, so it would render as nothing at all. Verified that all three show a meaningful static frame under prefers-reduced-motion: reduce.

The flag scrubs over a fixed 200px instead of a percentage of cover. It sits at the very bottom of the page, where only ~230px of scrolling remains once it starts entering. A percentage range scales with viewport height, so on tall screens the page ran out of scroll and the flag plant never landed. Confirmed completing at 700/900/1080/1300px viewport heights.

Sprites stay gated to viewports >= 1536px (same rule the old peeks used) so they never cover the centred content column, and are hidden entirely below that.

Net asset size drops about 1.4 MB: the two photoreal PNGs were 989 KB and 813 KB, the three spritesheets total 366 KB.

Tests and Documentation

No tests or JupyText runs apply - this is a landing page asset and stylesheet change with no Python surface.

Verified against a local myst build --html in Chromium at 1700x900:

• All frames reachable in order (7 / 5 / 6) and each sequence holds its final frame afterwards
• Sprites clear the content column (264px gutters vs 151-181px sprites); no horizontal overflow
• Spyglass rests flush on the code block, measured gap 0px against the .myst-code wrapper that paints the background
• Flag centred on the page and completing its run-in across four viewport heights
• Clean in dark mode with no background halos
• Hidden below 1536px; final frame shown under reduced motion

The recording above is a slow scroll through the full page at 1600x900.