Emphasis

`<pura-emphasis>` wraps any content with an attention-seeking animation: `bounce`, `heartbeat`, `wiggle`, `tada`, `shake`, `pulse`, or `flash`. The motion is pure CSS `@keyframes` selected by the `animation` attribute; the `trigger` decides when it plays, `hover` and `loop` are CSS-only while `view` plays on first intersection and `manual` plays via `play()`. Theme the timing with `--pura-emphasis-duration`. The base reset neutralizes it under reduced motion. It registers in `window.__puraEmphasis` for agent enumeration.

Preview

<!-- Loop forever -->
<pura-emphasis animation="bounce" trigger="loop">🔔</pura-emphasis>

<!-- Play on hover -->
<pura-emphasis animation="wiggle" trigger="hover">
  <button>Hover me</button>
</pura-emphasis>

<!-- Play manually -->
<pura-emphasis animation="tada" id="win">🎉</pura-emphasis>
<script>document.querySelector('#win').play();</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/emphasis.js"></script>

import "./pura/lib/emphasis.js";