+ A motion preset on plain content. Loops run forever while present;
+ enter / exit ride the element's mount & removal. No JS engine — the foundation
+ CSS does it, and reduced-motion stops it.
+
+ Applied with {'{...motionAttrs(preset)}'} on the SVG (or the ring, for ping).
+ The preset is the primary trigger — no event, no state to compose with.
+
+
+
+
+
+
Enter / exit — the content lifecycle
+
+
+ {#if show}
+
+
+
+
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+ <Motion motion="{enterExit}"> plays enter on mount, exit on removal
+ (it retains the node for the eidos-declared duration). The loop on the inner element runs the
+ whole time it's present — enter → loop → exit, the full content lifecycle.
+
+
+
+
+
+
+
+
Staggered list — container-driven cascade, in & out
+
+
+ {#if listMounted}
+
+ {#each listItems as item (item)}
+
+ {item}
+
+ {/each}
+
+ {/if}
+
+
+
+
+
+
+
+
+ The [data-stagger] container's data-state drives its direct children.
+ Enter cascades in (first item first); exit cascades out in reverse (last leaves
+ first) via --motion-stagger-index-rev. The pragmatic CSS bridge: the container is
+ retained for the stagger window, then unmounts — no JS orchestration engine.
+