/*
 * sonaloop-icons — hover micro-interactions (regular + hi-fi + figures).
 *
 * SOURCE OF TRUTH for icon & figure animation. `scripts/gen.mjs` copies this verbatim
 * into the Python package (as HIFI_ANIM_CSS) so sonaloop and
 * persona-website share one animation layer. Authored by hand — safe to edit.
 *
 * Hooks
 *   • Codegen stamps every <svg>: regular = `pi pi-<name>`, hi-fi =
 *     `pi-hifi pi-hifi-<name>`. Animatable hi-fi sub-parts carry `data-part`.
 *   • OPT-IN per icon: only plays if the <svg> also has `.pi-animate` (React
 *     `animate` prop / council `icon(name, animate=True)`). Default = static.
 *   • Trigger: the icon's own :hover/:focus-visible, or a hovered `.pi-hover`
 *     ancestor.
 *
 * Design: SUBTLE and high-quality. One gentle gesture per hover (mostly
 * one-shot, not looping), small amplitudes, smooth ease-out — no shakes,
 * bounces, springs or busy infinite loops. Each motion still says what the icon
 * means: outline shapes ink themselves, "verb" icons act their verb softly,
 * status/markers give a quiet nod. Everything inside prefers-reduced-motion.
 */
@media (prefers-reduced-motion: no-preference) {
  /* smooth, GPU-friendly; transforms about each element's own box by default */
  .pi-hifi * { transform-box: fill-box; }
  .pi-hifi [data-part],
  .pi-hifi rect,
  .pi-hifi circle,
  .pi-hifi path { transition: transform .32s cubic-bezier(.4, 0, .2, 1),
                              fill-opacity .32s ease, stroke-opacity .32s ease; }

  /* ════════════════════════════════════════════════════════════════════════
     HI-FI 48×48
     ════════════════════════════════════════════════════════════════════════ */

  /* overview — tiles settle in softly, staggered */
  :is(.pi-hifi-overview.pi-animate:hover, .pi-hifi-overview.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-overview.pi-animate) rect { animation: pi-appear .4s ease both; }
  :is(.pi-hifi-overview.pi-animate:hover, .pi-hifi-overview.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-overview.pi-animate) rect:nth-of-type(2) { animation-delay: .04s; }
  :is(.pi-hifi-overview.pi-animate:hover, .pi-hifi-overview.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-overview.pi-animate) rect:nth-of-type(3) { animation-delay: .08s; }
  :is(.pi-hifi-overview.pi-animate:hover, .pi-hifi-overview.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-overview.pi-animate) rect:nth-of-type(4) { animation-delay: .12s; }

  /* personas — the back person eases in */
  :is(.pi-hifi-personas.pi-animate:hover, .pi-hifi-personas.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-personas.pi-animate) [data-part="peer"] { animation: pi-peer-in .4s ease both; }

  /* councils — the dots give one quiet bob, in sequence */
  :is(.pi-hifi-councils.pi-animate:hover, .pi-hifi-councils.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-councils.pi-animate) circle:nth-of-type(2) { animation: pi-bob .9s ease; }
  :is(.pi-hifi-councils.pi-animate:hover, .pi-hifi-councils.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-councils.pi-animate) circle:nth-of-type(3) { animation: pi-bob .9s ease .1s; }
  :is(.pi-hifi-councils.pi-animate:hover, .pi-hifi-councils.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-councils.pi-animate) circle:nth-of-type(4) { animation: pi-bob .9s ease .2s; }

  /* syntheses — the top layer lifts a touch */
  :is(.pi-hifi-syntheses.pi-animate:hover, .pi-hifi-syntheses.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-syntheses.pi-animate) [data-part="top"] { transform: translateY(-2px); }

  /* projects — the folder's content rows slide in */
  :is(.pi-hifi-projects.pi-animate:hover, .pi-hifi-projects.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-projects.pi-animate) [data-part="rows"] { animation: pi-slide-x .4s ease both; }

  /* memory — the brain quietly lights up once */
  :is(.pi-hifi-memory.pi-animate:hover, .pi-hifi-memory.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-memory.pi-animate) [data-part="brain"] { animation: pi-brain 1s ease; }
  :is(.pi-hifi-memory.pi-animate:hover, .pi-hifi-memory.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-memory.pi-animate) [data-part="sulci"] { animation: pi-shimmer 1s ease; }

  /* panel — the menu lines slide in once */
  :is(.pi-hifi-panel.pi-animate:hover, .pi-hifi-panel.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-panel.pi-animate) [data-part="lines"] { animation: pi-slide-x .4s ease both; }

  /* settings — one smooth turn of the cog (not a busy spin) */
  .pi-hifi-settings [data-part="gear"] { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-settings.pi-animate:hover, .pi-hifi-settings.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-settings.pi-animate) [data-part="gear"] { animation: pi-spin .9s cubic-bezier(.4, 0, .2, 1); }

  /* sun — it shines: rays radiate out and settle, core glows (once) */
  .pi-hifi-sun [data-part="rays"] { transform-box: view-box; transform-origin: 24px 24px; }
  .pi-hifi-sun [data-part="core"] { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-sun.pi-animate:hover, .pi-hifi-sun.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-sun.pi-animate) [data-part="rays"] { animation: pi-radiate 1s ease; }
  :is(.pi-hifi-sun.pi-animate:hover, .pi-hifi-sun.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-sun.pi-animate) [data-part="core"] { animation: pi-glow-core 1s ease; }

  /* moon — soft moonlight glow (once) */
  :is(.pi-hifi-moon.pi-animate:hover, .pi-hifi-moon.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-moon.pi-animate) [data-part="moon"] { animation: pi-moon 1.1s ease; }

  /* monitor — the screen warms on (once) */
  :is(.pi-hifi-monitor.pi-animate:hover, .pi-hifi-monitor.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-monitor.pi-animate) [data-part="screen"] { animation: pi-screen 1s ease; }

  /* chevron — leans down a touch */
  :is(.pi-hifi-chevron.pi-animate:hover, .pi-hifi-chevron.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-chevron.pi-animate) path { transform: translateY(2px); }

  /* back — leans left */
  :is(.pi-hifi-back.pi-animate:hover, .pi-hifi-back.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-back.pi-animate) path { transform: translateX(-2px); }

  /* analytics — bars grow gently from the baseline, staggered */
  .pi-hifi-analytics rect { transform-origin: bottom; }
  :is(.pi-hifi-analytics.pi-animate:hover, .pi-hifi-analytics.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-analytics.pi-animate) rect { animation: pi-grow-y .45s ease both; }
  :is(.pi-hifi-analytics.pi-animate:hover, .pi-hifi-analytics.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-analytics.pi-animate) rect:nth-of-type(2) { animation-delay: .07s; }
  :is(.pi-hifi-analytics.pi-animate:hover, .pi-hifi-analytics.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-analytics.pi-animate) rect:nth-of-type(3) { animation-delay: .14s; }

  /* star — a quiet twinkle */
  .pi-hifi-star path { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-star.pi-animate:hover, .pi-hifi-star.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-star.pi-animate) path { animation: pi-twinkle .55s ease; }

  /* bulb — the idea quietly lights up (once) */
  :is(.pi-hifi-bulb.pi-animate:hover, .pi-hifi-bulb.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-bulb.pi-animate) [data-part="bulb"] { animation: pi-glow 1.1s ease; }
  :is(.pi-hifi-bulb.pi-animate:hover, .pi-hifi-bulb.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-bulb.pi-animate) [data-part="filament"] { animation: pi-shimmer 1.1s ease; }

  /* target — the rings settle inward into focus (once) */
  :is(.pi-hifi-target.pi-animate:hover, .pi-hifi-target.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-target.pi-animate) circle { animation: pi-focus .5s ease both; }
  :is(.pi-hifi-target.pi-animate:hover, .pi-hifi-target.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-target.pi-animate) circle:nth-of-type(2) { animation-delay: .05s; }
  :is(.pi-hifi-target.pi-animate:hover, .pi-hifi-target.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-target.pi-animate) circle:nth-of-type(3) { animation-delay: .1s; }

  /* compass — the needle gives one small settle */
  .pi-hifi-compass [data-part="needle"] { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-compass.pi-animate:hover, .pi-hifi-compass.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-compass.pi-animate) [data-part="needle"] { animation: pi-settle .7s ease; }

  /* search — the lens makes one small scan */
  .pi-hifi-search [data-part="lens"] { transform-box: view-box; transform-origin: 21px 21px; }
  :is(.pi-hifi-search.pi-animate:hover, .pi-hifi-search.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-search.pi-animate) [data-part="lens"] { animation: pi-scan .8s ease; }

  /* jtbd — the opposing forces ease apart a touch (push back, pull forward) */
  :is(.pi-hifi-jtbd.pi-animate:hover, .pi-hifi-jtbd.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-jtbd.pi-animate) [data-part="pull"] { transform: translateX(2px); }
  :is(.pi-hifi-jtbd.pi-animate:hover, .pi-hifi-jtbd.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-jtbd.pi-animate) [data-part="push"] { transform: translateX(-2px); }

  /* pricingResearch — the slider knob slides to its price */
  :is(.pi-hifi-pricingResearch.pi-animate:hover, .pi-hifi-pricingResearch.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-pricingResearch.pi-animate) [data-part="knob"] { transform: translateX(3px); }

  /* positioning — the pin drops onto its position */
  .pi-hifi-positioning [data-part="pin"] { transform-box: view-box; transform-origin: 24px 43px; }
  :is(.pi-hifi-positioning.pi-animate:hover, .pi-hifi-positioning.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-positioning.pi-animate) [data-part="pin"] { animation: pi-drop .55s cubic-bezier(.4, 0, .2, 1); }
  :is(.pi-hifi-positioning.pi-animate:hover, .pi-hifi-positioning.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-positioning.pi-animate) [data-part="dot"] { animation: pi-glow .9s ease; }

  /* designThinkingHmw — opportunities diverge: the leaf nodes settle in, in turn */
  :is(.pi-hifi-designThinkingHmw.pi-animate:hover, .pi-hifi-designThinkingHmw.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-designThinkingHmw.pi-animate) [data-part="leaf"] { animation: pi-appear .4s ease both; }
  :is(.pi-hifi-designThinkingHmw.pi-animate:hover, .pi-hifi-designThinkingHmw.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-designThinkingHmw.pi-animate) [data-part="leaf"]:nth-of-type(3) { animation-delay: .06s; }
  :is(.pi-hifi-designThinkingHmw.pi-animate:hover, .pi-hifi-designThinkingHmw.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-designThinkingHmw.pi-animate) [data-part="leaf"]:nth-of-type(4) { animation-delay: .12s; }

  /* continuousDiscovery — the cycle gives one quiet turn (it comes back around) */
  .pi-hifi-continuousDiscovery [data-part="cycle"] { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-continuousDiscovery.pi-animate:hover, .pi-hifi-continuousDiscovery.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-continuousDiscovery.pi-animate) [data-part="cycle"] { animation: pi-spin 1s cubic-bezier(.4, 0, .2, 1); }

  /* pressureTest — the needle sweeps up into the high zone, then settles */
  .pi-hifi-pressureTest [data-part="needle"] { transform-box: view-box; transform-origin: 24px 34px; }
  :is(.pi-hifi-pressureTest.pi-animate:hover, .pi-hifi-pressureTest.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-pressureTest.pi-animate) [data-part="needle"] { animation: pi-sweep .7s cubic-bezier(.4, 0, .2, 1); }

  /* check — inks itself */
  .pi-hifi-check.pi-animate { --pi-len: 42; }
  .pi-hifi-check.pi-animate path { stroke-dasharray: var(--pi-len); }
  :is(.pi-hifi-check.pi-animate:hover, .pi-hifi-check.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-check.pi-animate) path { animation: pi-draw .45s ease forwards; }

  /* circle — inks its ring */
  .pi-hifi-circle.pi-animate { --pi-len: 110; }
  .pi-hifi-circle.pi-animate circle { stroke-dasharray: var(--pi-len); }
  :is(.pi-hifi-circle.pi-animate:hover, .pi-hifi-circle.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-circle.pi-animate) circle { animation: pi-draw .55s ease forwards; }

  /* half — progress glyph (◐): fill reveals up to the halfway mark (undistorted) */
  :is(.pi-hifi-half.pi-animate:hover, .pi-hifi-half.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-half.pi-animate) path { animation: pi-fill-up .55s cubic-bezier(.4, 0, .2, 1) forwards; }

  /* alert — the mark gives one quiet beat */
  .pi-hifi-alert [data-part="mark"] { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-alert.pi-animate:hover, .pi-hifi-alert.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-alert.pi-animate) [data-part="mark"] { animation: pi-beat .5s ease; }

  /* close — inks the X */
  .pi-hifi-close.pi-animate { --pi-len: 24; }
  .pi-hifi-close.pi-animate path { stroke-dasharray: var(--pi-len); }
  :is(.pi-hifi-close.pi-animate:hover, .pi-hifi-close.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-close.pi-animate) path { animation: pi-draw .38s ease forwards; }

  /* plus — inks the + */
  .pi-hifi-plus.pi-animate { --pi-len: 22; }
  .pi-hifi-plus.pi-animate path { stroke-dasharray: var(--pi-len); }
  :is(.pi-hifi-plus.pi-animate:hover, .pi-hifi-plus.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-plus.pi-animate) path { animation: pi-draw .38s ease forwards; }

  /* external — the arrow leans out */
  :is(.pi-hifi-external.pi-animate:hover, .pi-hifi-external.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-external.pi-animate) path:nth-of-type(2),
  :is(.pi-hifi-external.pi-animate:hover, .pi-hifi-external.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-external.pi-animate) path:nth-of-type(3) { transform: translate(1.5px, -1.5px); }

  /* thumbsup — a small approving lift */
  .pi-hifi-thumbsup [data-part="hand"] { transform-box: view-box; transform-origin: 22px 32px; }
  :is(.pi-hifi-thumbsup.pi-animate:hover, .pi-hifi-thumbsup.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-thumbsup.pi-animate) [data-part="hand"] { transform: translateY(-1.5px) rotate(-5deg); }

  /* warning — the mark gives one quiet beat */
  :is(.pi-hifi-warning.pi-animate:hover, .pi-hifi-warning.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-warning.pi-animate) [data-part="mark"] { animation: pi-beat .5s ease; }

  /* dot — a soft live pulse (the one place a gentle loop belongs) */
  :is(.pi-hifi-dot.pi-animate:hover, .pi-hifi-dot.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-dot.pi-animate) circle:nth-of-type(2) { animation: pi-pulse 1.6s ease-in-out infinite; }

  /* diamond — inks its outline; diamondFilled (no stroke) gives a soft tap */
  .pi-hifi-diamond.pi-animate { --pi-len: 106; }
  .pi-hifi-diamond.pi-animate path { stroke-dasharray: var(--pi-len); }
  :is(.pi-hifi-diamond.pi-animate:hover, .pi-hifi-diamond.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-diamond.pi-animate) path { animation: pi-draw .55s ease forwards; }
  :is(.pi-hifi-diamondFilled.pi-animate:hover, .pi-hifi-diamondFilled.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-diamondFilled.pi-animate) path { animation: pi-tap .4s ease; }

  /* caretRight / arrowRight — lean forward */
  :is(.pi-hifi-caretRight.pi-animate:hover, .pi-hifi-caretRight.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-caretRight.pi-animate) path { transform: translateX(2px); }
  :is(.pi-hifi-arrowRight.pi-animate:hover, .pi-hifi-arrowRight.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-arrowRight.pi-animate) path { transform: translateX(2.5px); }

  /* square — inks its outline */
  .pi-hifi-square.pi-animate { --pi-len: 130; }
  .pi-hifi-square.pi-animate rect { stroke-dasharray: var(--pi-len); }
  :is(.pi-hifi-square.pi-animate:hover, .pi-hifi-square.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-square.pi-animate) rect { animation: pi-draw .6s ease forwards; }

  /* squareSplit — inner block settles in */
  :is(.pi-hifi-squareSplit.pi-animate:hover, .pi-hifi-squareSplit.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-squareSplit.pi-animate) rect:nth-of-type(2) { animation: pi-appear .4s ease both; }

  /* squareRows / Cols / Grid — divisions ink in */
  .pi-hifi-squareRows.pi-animate path,
  .pi-hifi-squareCols.pi-animate path,
  .pi-hifi-squareGrid.pi-animate path { stroke-dasharray: 80; }
  :is(.pi-hifi-squareRows.pi-animate:hover, .pi-hifi-squareRows.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-squareRows.pi-animate) path,
  :is(.pi-hifi-squareCols.pi-animate:hover, .pi-hifi-squareCols.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-squareCols.pi-animate) path,
  :is(.pi-hifi-squareGrid.pi-animate:hover, .pi-hifi-squareGrid.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-squareGrid.pi-animate) path { animation: pi-draw .5s ease forwards; }

  /* rectangle — inks its outline */
  .pi-hifi-rectangle.pi-animate { --pi-len: 112; }
  .pi-hifi-rectangle.pi-animate rect { stroke-dasharray: var(--pi-len); }
  :is(.pi-hifi-rectangle.pi-animate:hover, .pi-hifi-rectangle.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-rectangle.pi-animate) rect { animation: pi-draw .55s ease forwards; }

  /* exchange — the two arrows ease past each other a touch */
  :is(.pi-hifi-exchange.pi-animate:hover, .pi-hifi-exchange.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-exchange.pi-animate) path:nth-of-type(1) { transform: translateX(2px); }
  :is(.pi-hifi-exchange.pi-animate:hover, .pi-hifi-exchange.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-exchange.pi-animate) path:nth-of-type(2) { transform: translateX(-2px); }

  /* wave — one gentle ripple flows through */
  .pi-hifi-wave.pi-animate path { stroke-dasharray: 12 6; }
  :is(.pi-hifi-wave.pi-animate:hover, .pi-hifi-wave.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-wave.pi-animate) path { animation: pi-flow 1s ease; }

  /* pencil — a small writing motion */
  .pi-hifi-pencil [data-part="pencil"] { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-pencil.pi-animate:hover, .pi-hifi-pencil.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-pencil.pi-animate) [data-part="pencil"] { animation: pi-write .6s ease; }

  /* sonaloop (brand) — the loop gives one gentle settle, the nodes nod in turn */
  .pi-hifi-sonaloop [data-part="loop"] { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-sonaloop.pi-animate:hover, .pi-hifi-sonaloop.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-sonaloop.pi-animate) [data-part="loop"] { animation: pi-settle .8s ease; }
  :is(.pi-hifi-sonaloop.pi-animate:hover, .pi-hifi-sonaloop.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-sonaloop.pi-animate) circle { animation: pi-bob .9s ease; }
  :is(.pi-hifi-sonaloop.pi-animate:hover, .pi-hifi-sonaloop.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-sonaloop.pi-animate) circle:nth-of-type(2) { animation-delay: .08s; }
  :is(.pi-hifi-sonaloop.pi-animate:hover, .pi-hifi-sonaloop.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-sonaloop.pi-animate) circle:nth-of-type(3) { animation-delay: .16s; }

  /* sonaloop product family (cloud / research) — keyed by data-part:
     the research orbit ring settles, the cloud softly glows. */
  .pi-hifi.pi-animate:is(:hover, :focus-visible) [data-part="orbits"], .pi-hover:hover .pi-hifi.pi-animate [data-part="orbits"] { animation: pi-settle .9s ease; }
  .pi-hifi.pi-animate:is(:hover, :focus-visible) [data-part="cloud"], .pi-hover:hover .pi-hifi.pi-animate [data-part="cloud"] { animation: pi-glow 1s ease; }
  /* base-mark + corner badge variants: the little badge gives one gentle hop */
  .pi-hifi.pi-animate:is(:hover, :focus-visible) [data-part="badge"], .pi-hover:hover .pi-hifi.pi-animate [data-part="badge"] { animation: pi-bob .9s ease; }

  /* ── New hi-fi twins (persona · pipeline · cloud · chrome) ──────────────────── */

  /* soul — the heart quietly warms */
  :is(.pi-hifi-soul.pi-animate:hover, .pi-hifi-soul.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-soul.pi-animate) [data-part="heart"] { animation: pi-glow 1.1s ease; }

  /* calendar — the "today" cell settles in */
  :is(.pi-hifi-calendar.pi-animate:hover, .pi-hifi-calendar.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-calendar.pi-animate) [data-part="day"] { animation: pi-appear .45s ease both; }

  /* activity — one pulse flows along the trace */
  .pi-hifi-activity.pi-animate path { stroke-dasharray: 16 8; }
  :is(.pi-hifi-activity.pi-animate:hover, .pi-hifi-activity.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-activity.pi-animate) path { animation: pi-flow 1s ease; }

  /* thought — the trailing bubbles appear in turn */
  :is(.pi-hifi-thought.pi-animate:hover, .pi-hifi-thought.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-thought.pi-animate) [data-part="d1"] { animation: pi-appear .4s ease both; }
  :is(.pi-hifi-thought.pi-animate:hover, .pi-hifi-thought.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-thought.pi-animate) [data-part="d2"] { animation: pi-appear .4s ease .08s both; }

  /* quote — the marks give one soft tap */
  .pi-hifi-quote path { transform-box: fill-box; }
  :is(.pi-hifi-quote.pi-animate:hover, .pi-hifi-quote.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-quote.pi-animate) path { animation: pi-tap .45s ease; }

  /* sentiment — the smile inks itself */
  .pi-hifi-sentiment.pi-animate [data-part="mouth"] { stroke-dasharray: 30; }
  :is(.pi-hifi-sentiment.pi-animate:hover, .pi-hifi-sentiment.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-sentiment.pi-animate) [data-part="mouth"] { stroke-dashoffset: 30; animation: pi-draw .5s ease forwards; }

  /* chat — the text lines slide in */
  :is(.pi-hifi-chat.pi-animate:hover, .pi-hifi-chat.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-chat.pi-animate) [data-part="lines"] { animation: pi-slide-x .4s ease both; }

  /* messages — the second bubble joins the exchange */
  :is(.pi-hifi-messages.pi-animate:hover, .pi-hifi-messages.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-messages.pi-animate) [data-part="b2"] { animation: pi-appear .45s ease both; }

  /* mic — the capsule gives one quiet beat */
  .pi-hifi-mic [data-part="capsule"] { transform-box: fill-box; }
  :is(.pi-hifi-mic.pi-animate:hover, .pi-hifi-mic.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-mic.pi-animate) [data-part="capsule"] { animation: pi-beat .5s ease; }

  /* sparkles — a quiet twinkle */
  .pi-hifi-sparkles [data-part="spark"] { transform-box: view-box; transform-origin: 24px 18px; }
  :is(.pi-hifi-sparkles.pi-animate:hover, .pi-hifi-sparkles.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-sparkles.pi-animate) [data-part="spark"] { animation: pi-twinkle .6s ease; }

  /* network — the nodes light up in sequence */
  :is(.pi-hifi-network.pi-animate:hover, .pi-hifi-network.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-network.pi-animate) [data-part="node"] { animation: pi-appear .4s ease both; }
  :is(.pi-hifi-network.pi-animate:hover, .pi-hifi-network.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-network.pi-animate) [data-part="node"]:nth-of-type(2) { animation-delay: .06s; }
  :is(.pi-hifi-network.pi-animate:hover, .pi-hifi-network.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-network.pi-animate) [data-part="node"]:nth-of-type(3) { animation-delay: .12s; }

  /* avatar — the figure eases in */
  :is(.pi-hifi-avatar.pi-animate:hover, .pi-hifi-avatar.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-avatar.pi-animate) circle { animation: pi-appear .45s ease both; }

  /* clipboard / invoice — the line items slide in */
  :is(.pi-hifi-clipboard.pi-animate:hover, .pi-hifi-clipboard.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-clipboard.pi-animate) [data-part="lines"],
  :is(.pi-hifi-invoice.pi-animate:hover, .pi-hifi-invoice.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-invoice.pi-animate) [data-part="lines"] { animation: pi-slide-x .4s ease both; }

  /* inbox — the tray softly fills */
  :is(.pi-hifi-inbox.pi-animate:hover, .pi-hifi-inbox.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-inbox.pi-animate) [data-part="tray"] { animation: pi-glow 1s ease; }

  /* package — the box gives one gentle settle */
  .pi-hifi-package [data-part="box"] { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-package.pi-animate:hover, .pi-hifi-package.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-package.pi-animate) [data-part="box"] { animation: pi-settle .8s ease; }

  /* verified / shieldCheck — the check inks itself (shield glows) */
  .pi-hifi-verified.pi-animate [data-part="check"], .pi-hifi-shieldCheck.pi-animate [data-part="check"] { stroke-dasharray: 24; }
  :is(.pi-hifi-verified.pi-animate:hover, .pi-hifi-verified.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-verified.pi-animate) [data-part="check"],
  :is(.pi-hifi-shieldCheck.pi-animate:hover, .pi-hifi-shieldCheck.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-shieldCheck.pi-animate) [data-part="check"] { stroke-dashoffset: 24; animation: pi-draw .5s ease forwards; }
  :is(.pi-hifi-shieldCheck.pi-animate:hover, .pi-hifi-shieldCheck.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-shieldCheck.pi-animate) [data-part="shield"] { animation: pi-glow 1s ease; }

  /* cloud / shield — soft glow */
  :is(.pi-hifi-cloud.pi-animate:hover, .pi-hifi-cloud.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-cloud.pi-animate) [data-part="cloud"],
  :is(.pi-hifi-shield.pi-animate:hover, .pi-hifi-shield.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-shield.pi-animate) [data-part="shield"] { animation: pi-glow 1.1s ease; }

  /* lock — the shackle lifts a touch */
  :is(.pi-hifi-lock.pi-animate:hover, .pi-hifi-lock.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-lock.pi-animate) [data-part="shackle"] { transform: translateY(-2px); }

  /* key — one quiet turn */
  .pi-hifi-key :is(circle, path) { transform-box: view-box; transform-origin: 17px 31px; }
  :is(.pi-hifi-key.pi-animate:hover, .pi-hifi-key.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-key.pi-animate) :is([data-part="bow"], path) { animation: pi-settle .8s ease; }

  /* creditCard — the chip line swipes across */
  :is(.pi-hifi-creditCard.pi-animate:hover, .pi-hifi-creditCard.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-creditCard.pi-animate) [data-part="chip"] { transform: translateX(3px); }

  /* globe — the meridian gives one quiet settle */
  .pi-hifi-globe ellipse { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-globe.pi-animate:hover, .pi-hifi-globe.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-globe.pi-animate) ellipse { animation: pi-settle .9s ease; }

  /* terminal — the prompt inks itself */
  .pi-hifi-terminal.pi-animate [data-part="prompt"] { stroke-dasharray: 18; }
  :is(.pi-hifi-terminal.pi-animate:hover, .pi-hifi-terminal.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-terminal.pi-animate) [data-part="prompt"] { stroke-dashoffset: 18; animation: pi-draw .45s ease forwards; }

  /* command — one soft tap */
  .pi-hifi-command path { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-command.pi-animate:hover, .pi-hifi-command.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-command.pi-animate) path { animation: pi-tap .45s ease; }

  /* database — the top platter lifts */
  :is(.pi-hifi-database.pi-animate:hover, .pi-hifi-database.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-database.pi-animate) [data-part="lid"] { transform: translateY(-1.5px); }

  /* mail — the flap dips open */
  :is(.pi-hifi-mail.pi-animate:hover, .pi-hifi-mail.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-mail.pi-animate) [data-part="flap"] { transform: translateY(1.5px); }

  /* bell — a gentle swing from the crown */
  .pi-hifi-bell [data-part="bell"] { transform-box: view-box; transform-origin: 24px 10px; }
  :is(.pi-hifi-bell.pi-animate:hover, .pi-hifi-bell.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-bell.pi-animate) [data-part="bell"] { animation: pi-settle .9s ease; }

  /* book — the page line slides in */
  :is(.pi-hifi-book.pi-animate:hover, .pi-hifi-book.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-book.pi-animate) path:last-of-type { animation: pi-slide-x .4s ease both; }

  /* rocket — it lifts, the flame flickers */
  :is(.pi-hifi-rocket.pi-animate:hover, .pi-hifi-rocket.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-rocket.pi-animate) [data-part="rocket"] { transform: translateY(-2px); }
  :is(.pi-hifi-rocket.pi-animate:hover, .pi-hifi-rocket.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-rocket.pi-animate) [data-part="flame"] { animation: pi-glow .9s ease; }

  /* trend — the line draws up to the arrow */
  .pi-hifi-trend.pi-animate [data-part="line"] { stroke-dasharray: 52; }
  :is(.pi-hifi-trend.pi-animate:hover, .pi-hifi-trend.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-trend.pi-animate) [data-part="line"] { stroke-dashoffset: 52; animation: pi-draw .55s ease forwards; }

  /* pieChart — the highlighted wedge settles in */
  .pi-hifi-pieChart [data-part="slice"] { transform-box: view-box; transform-origin: 24px 24px; }
  :is(.pi-hifi-pieChart.pi-animate:hover, .pi-hifi-pieChart.pi-animate:focus-visible, .pi-hover:hover .pi-hifi-pieChart.pi-animate) [data-part="slice"] { animation: pi-appear .45s ease both; }

  /* ════════════════════════════════════════════════════════════════════════
     Regular 24×24. Outline glyphs ink themselves; "verb" icons act softly.
     Trigger: `.pi-NAME.pi-animate:is(:hover,:focus-visible)` or `.pi-hover`.
     ════════════════════════════════════════════════════════════════════════ */
  .pi { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
  .pi * { transform-box: fill-box; }

  .pi-plus.pi-animate { --pi-len: 30; } .pi-close.pi-animate { --pi-len: 36; }
  .pi-circle.pi-animate { --pi-len: 50; } .pi-square.pi-animate { --pi-len: 64; }
  .pi-diamond.pi-animate { --pi-len: 54; } .pi-rectangle.pi-animate { --pi-len: 56; }
  .pi-bulb.pi-animate { --pi-len: 52; } .pi-link.pi-animate { --pi-len: 24; }
  .pi-councils.pi-animate { --pi-len: 54; } .pi-syntheses.pi-animate { --pi-len: 44; }
  .pi-panel.pi-animate { --pi-len: 70; } .pi-prototype.pi-animate { --pi-len: 72; }
  .pi-monitor.pi-animate { --pi-len: 66; } .pi-memory.pi-animate { --pi-len: 50; }
  .pi-personas.pi-animate { --pi-len: 24; } .pi-moon.pi-animate { --pi-len: 46; }
  .pi-target.pi-animate { --pi-len: 56; }
  :is(.pi-plus, .pi-close, .pi-circle, .pi-square, .pi-diamond, .pi-rectangle,
      .pi-bulb, .pi-link, .pi-councils, .pi-syntheses, .pi-panel, .pi-prototype,
      .pi-monitor, .pi-memory, .pi-personas, .pi-moon, .pi-target).pi-animate
      :is(path, rect, circle, line) { stroke-dasharray: var(--pi-len); }

  .pi-plus.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-plus.pi-animate path,
  .pi-close.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-close.pi-animate path,
  .pi-circle.pi-animate:is(:hover, :focus-visible) circle, .pi-hover:hover .pi-circle.pi-animate circle,
  .pi-square.pi-animate:is(:hover, :focus-visible) rect, .pi-hover:hover .pi-square.pi-animate rect,
  .pi-diamond.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-diamond.pi-animate path,
  .pi-rectangle.pi-animate:is(:hover, :focus-visible) rect, .pi-hover:hover .pi-rectangle.pi-animate rect,
  .pi-bulb.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-bulb.pi-animate path,
  .pi-link.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-link.pi-animate path,
  .pi-councils.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-councils.pi-animate path,
  .pi-syntheses.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-syntheses.pi-animate path,
  .pi-panel.pi-animate:is(:hover, :focus-visible) :is(rect, path), .pi-hover:hover .pi-panel.pi-animate :is(rect, path),
  .pi-prototype.pi-animate:is(:hover, :focus-visible) :is(rect, path), .pi-hover:hover .pi-prototype.pi-animate :is(rect, path),
  .pi-monitor.pi-animate:is(:hover, :focus-visible) :is(rect, path), .pi-hover:hover .pi-monitor.pi-animate :is(rect, path),
  .pi-memory.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-memory.pi-animate path,
  .pi-personas.pi-animate:is(:hover, :focus-visible) :is(path, circle), .pi-hover:hover .pi-personas.pi-animate :is(path, circle),
  .pi-moon.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-moon.pi-animate path,
  .pi-target.pi-animate:is(:hover, :focus-visible) circle, .pi-hover:hover .pi-target.pi-animate circle { animation: pi-draw .55s ease forwards; }

  /* "verb" / marker icons — soft, one-shot */
  .pi-settings.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-settings.pi-animate { animation: pi-spin .9s cubic-bezier(.4, 0, .2, 1); }
  .pi-sun [data-part], .pi-sun path, .pi-sun circle { transform-box: view-box; transform-origin: 12px 12px; }
  .pi-sun.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-sun.pi-animate path { animation: pi-radiate 1s ease; }
  .pi-sun.pi-animate:is(:hover, :focus-visible) circle, .pi-hover:hover .pi-sun.pi-animate circle { animation: pi-glow-core 1s ease; }
  .pi-star.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-star.pi-animate { animation: pi-twinkle .55s ease; }
  .pi-half.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-half.pi-animate path { animation: pi-fill-up .55s cubic-bezier(.4, 0, .2, 1) forwards; }
  .pi-thumbsup.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-thumbsup.pi-animate { transform: translateY(-1.5px) rotate(-5deg); }
  .pi-diamondFilled.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-diamondFilled.pi-animate { animation: pi-tap .4s ease; }
  .pi-compass.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-compass.pi-animate { animation: pi-settle .7s ease; }
  .pi-search.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-search.pi-animate { animation: pi-scan .8s ease; }
  .pi-exchange.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-exchange.pi-animate { animation: pi-shuttle .7s ease; }
  .pi-pencil.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-pencil.pi-animate { animation: pi-write .6s ease; }
  .pi-alert.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-alert.pi-animate,
  .pi-warning.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-warning.pi-animate { animation: pi-beat .5s ease; }
  .pi-dot.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-dot.pi-animate { animation: pi-pulse 1.6s ease-in-out infinite; }

  /* directional — lean */
  .pi-back.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-back.pi-animate { transform: translateX(-2px); }
  .pi-caretRight.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-caretRight.pi-animate { transform: translateX(2px); }
  .pi-external.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-external.pi-animate { transform: translate(1.5px, -1.5px); }
  .pi-arrowRight.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-arrowRight.pi-animate { transform: translateX(2.5px); }
  .pi-chevron.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-chevron.pi-animate { transform: translateY(2px); }

  /* child-targeted */
  .pi-check.pi-animate { --pi-len: 30; }
  .pi-check.pi-animate path { stroke-dasharray: var(--pi-len); }
  .pi-check.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-check.pi-animate path { animation: pi-draw .45s ease forwards; }

  .pi-wave.pi-animate path { stroke-dasharray: 6 3; }
  .pi-wave.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-wave.pi-animate path { animation: pi-flow 1s ease; }

  .pi-projects.pi-animate { --pi-len: 66; }
  .pi-projects.pi-animate path { stroke-dasharray: var(--pi-len); }
  .pi-projects.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-projects.pi-animate path { animation: pi-draw .6s ease forwards; }

  /* sonaloop (brand) — the loop inks itself, the nodes settle in */
  .pi-sonaloop.pi-animate { --pi-len: 48; }
  .pi-sonaloop.pi-animate path { stroke-dasharray: var(--pi-len); }
  .pi-sonaloop.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-sonaloop.pi-animate path { animation: pi-draw .6s ease forwards; }
  .pi-sonaloop.pi-animate:is(:hover, :focus-visible) circle, .pi-hover:hover .pi-sonaloop.pi-animate circle { animation: pi-appear .4s ease both; }
  .pi-sonaloop.pi-animate:is(:hover, :focus-visible) circle:nth-of-type(2), .pi-hover:hover .pi-sonaloop.pi-animate circle:nth-of-type(2) { animation-delay: .07s; }
  .pi-sonaloop.pi-animate:is(:hover, :focus-visible) circle:nth-of-type(3), .pi-hover:hover .pi-sonaloop.pi-animate circle:nth-of-type(3) { animation-delay: .14s; }

  /* sonaloop product family (cloud / research) — research orbit ring settles */
  .pi.pi-animate:is(:hover, :focus-visible) [data-part="orbits"], .pi-hover:hover .pi.pi-animate [data-part="orbits"] { animation: pi-settle .7s ease; }
  .pi.pi-animate:is(:hover, :focus-visible) [data-part="badge"], .pi-hover:hover .pi.pi-animate [data-part="badge"] { animation: pi-bob .9s ease; }

  .pi-squareRows.pi-animate path, .pi-squareCols.pi-animate path, .pi-squareGrid.pi-animate path { stroke-dasharray: 60; }
  .pi-squareRows.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-squareRows.pi-animate path,
  .pi-squareCols.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-squareCols.pi-animate path,
  .pi-squareGrid.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-squareGrid.pi-animate path { animation: pi-draw .5s ease forwards; }

  .pi-squareSplit.pi-animate:is(:hover, :focus-visible) rect:nth-of-type(2),
  .pi-hover:hover .pi-squareSplit.pi-animate rect:nth-of-type(2) { animation: pi-appear .4s ease both; }

  .pi-overview.pi-animate:is(:hover, :focus-visible) rect, .pi-hover:hover .pi-overview.pi-animate rect { animation: pi-appear .4s ease both; }
  .pi-overview.pi-animate:is(:hover, :focus-visible) rect:nth-of-type(2), .pi-hover:hover .pi-overview.pi-animate rect:nth-of-type(2) { animation-delay: .04s; }
  .pi-overview.pi-animate:is(:hover, :focus-visible) rect:nth-of-type(3), .pi-hover:hover .pi-overview.pi-animate rect:nth-of-type(3) { animation-delay: .08s; }
  .pi-overview.pi-animate:is(:hover, :focus-visible) rect:nth-of-type(4), .pi-hover:hover .pi-overview.pi-animate rect:nth-of-type(4) { animation-delay: .12s; }

  .pi-analytics rect { transform-origin: bottom; }
  .pi-analytics.pi-animate:is(:hover, :focus-visible) rect, .pi-hover:hover .pi-analytics.pi-animate rect { animation: pi-grow-y .45s ease both; }
  .pi-analytics.pi-animate:is(:hover, :focus-visible) rect:nth-of-type(2), .pi-hover:hover .pi-analytics.pi-animate rect:nth-of-type(2) { animation-delay: .07s; }
  .pi-analytics.pi-animate:is(:hover, :focus-visible) rect:nth-of-type(3), .pi-hover:hover .pi-analytics.pi-animate rect:nth-of-type(3) { animation-delay: .14s; }

  .pi-personas.pi-animate:is(:hover, :focus-visible) circle, .pi-hover:hover .pi-personas.pi-animate circle { animation-duration: .55s; }

  /* ── New regular icons (persona · pipeline · cloud · chrome) ──────────────── */

  /* soul / shield — one quiet beat */
  .pi-soul.pi-animate:is(:hover, :focus-visible) [data-part="heart"], .pi-hover:hover .pi-soul.pi-animate [data-part="heart"],
  .pi-shield.pi-animate:is(:hover, :focus-visible) [data-part="shield"], .pi-hover:hover .pi-shield.pi-animate [data-part="shield"] { animation: pi-beat .5s ease; }

  /* calendar — the "today" cell beats */
  .pi-calendar.pi-animate:is(:hover, :focus-visible) [data-part="day"], .pi-hover:hover .pi-calendar.pi-animate [data-part="day"] { animation: pi-beat .5s ease; }

  /* activity — a pulse flows along the trace */
  .pi-activity.pi-animate path { stroke-dasharray: 10 5; }
  .pi-activity.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-activity.pi-animate path { animation: pi-flow 1s ease; }

  /* thought — the trailing bubbles appear in turn */
  .pi-thought.pi-animate:is(:hover, :focus-visible) [data-part="d1"], .pi-hover:hover .pi-thought.pi-animate [data-part="d1"] { animation: pi-appear .4s ease both; }
  .pi-thought.pi-animate:is(:hover, :focus-visible) [data-part="d2"], .pi-hover:hover .pi-thought.pi-animate [data-part="d2"] { animation: pi-appear .4s ease .08s both; }

  /* quote / command — a soft tap */
  .pi-command path { transform-box: view-box; transform-origin: 12px 12px; }
  .pi-quote.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-quote.pi-animate path,
  .pi-command.pi-animate:is(:hover, :focus-visible) path, .pi-hover:hover .pi-command.pi-animate path { animation: pi-tap .45s ease; }

  /* sentiment — the smile inks itself */
  .pi-sentiment.pi-animate [data-part="mouth"] { stroke-dasharray: 18; }
  .pi-sentiment.pi-animate:is(:hover, :focus-visible) [data-part="mouth"], .pi-hover:hover .pi-sentiment.pi-animate [data-part="mouth"] { stroke-dashoffset: 18; animation: pi-draw .5s ease forwards; }

  /* chat / clipboard / invoice / list — text lines slide in */
  .pi-chat.pi-animate:is(:hover, :focus-visible) [data-part="lines"], .pi-hover:hover .pi-chat.pi-animate [data-part="lines"],
  .pi-clipboard.pi-animate:is(:hover, :focus-visible) [data-part="lines"], .pi-hover:hover .pi-clipboard.pi-animate [data-part="lines"],
  .pi-invoice.pi-animate:is(:hover, :focus-visible) [data-part="lines"], .pi-hover:hover .pi-invoice.pi-animate [data-part="lines"],
  .pi-list.pi-animate:is(:hover, :focus-visible) [data-part="lines"], .pi-hover:hover .pi-list.pi-animate [data-part="lines"] { animation: pi-slide-x .4s ease both; }

  /* messages — the second bubble joins in */
  .pi-messages.pi-animate:is(:hover, :focus-visible) [data-part="b2"], .pi-hover:hover .pi-messages.pi-animate [data-part="b2"] { animation: pi-appear .45s ease both; }

  /* mic — the capsule beats */
  .pi-mic.pi-animate:is(:hover, :focus-visible) [data-part="capsule"], .pi-hover:hover .pi-mic.pi-animate [data-part="capsule"] { animation: pi-beat .5s ease; }

  /* sparkles — a quiet twinkle */
  .pi-sparkles [data-part="spark"] { transform-box: view-box; transform-origin: 12px 9.5px; }
  .pi-sparkles.pi-animate:is(:hover, :focus-visible) [data-part="spark"], .pi-hover:hover .pi-sparkles.pi-animate [data-part="spark"] { animation: pi-twinkle .6s ease; }

  /* network / more — nodes/dots light up in sequence */
  .pi-network.pi-animate:is(:hover, :focus-visible) circle, .pi-hover:hover .pi-network.pi-animate circle,
  .pi-more.pi-animate:is(:hover, :focus-visible) circle, .pi-hover:hover .pi-more.pi-animate circle { animation: pi-appear .4s ease both; }
  .pi-network.pi-animate:is(:hover, :focus-visible) circle:nth-of-type(2), .pi-hover:hover .pi-network.pi-animate circle:nth-of-type(2),
  .pi-more.pi-animate:is(:hover, :focus-visible) circle:nth-of-type(2), .pi-hover:hover .pi-more.pi-animate circle:nth-of-type(2) { animation-delay: .06s; }
  .pi-network.pi-animate:is(:hover, :focus-visible) circle:nth-of-type(3), .pi-hover:hover .pi-network.pi-animate circle:nth-of-type(3),
  .pi-more.pi-animate:is(:hover, :focus-visible) circle:nth-of-type(3), .pi-hover:hover .pi-more.pi-animate circle:nth-of-type(3) { animation-delay: .12s; }

  /* avatar / inbox / pieChart — the subject eases in */
  .pi-avatar.pi-animate:is(:hover, :focus-visible) circle, .pi-hover:hover .pi-avatar.pi-animate circle,
  .pi-inbox.pi-animate:is(:hover, :focus-visible) [data-part="tray"], .pi-hover:hover .pi-inbox.pi-animate [data-part="tray"] { animation: pi-appear .45s ease both; }
  .pi-pieChart [data-part="slice"] { transform-box: view-box; transform-origin: 12px 12px; }
  .pi-pieChart.pi-animate:is(:hover, :focus-visible) [data-part="slice"], .pi-hover:hover .pi-pieChart.pi-animate [data-part="slice"] { animation: pi-appear .45s ease both; }

  /* package — one gentle settle */
  .pi-package [data-part="box"] { transform-box: view-box; transform-origin: 12px 12px; }
  .pi-package.pi-animate:is(:hover, :focus-visible) [data-part="box"], .pi-hover:hover .pi-package.pi-animate [data-part="box"] { animation: pi-settle .8s ease; }

  /* verified / shieldCheck / terminal / trend / home — strokes ink themselves */
  .pi-verified.pi-animate [data-part="check"], .pi-shieldCheck.pi-animate [data-part="check"] { stroke-dasharray: 12; }
  .pi-terminal.pi-animate [data-part="prompt"] { stroke-dasharray: 10; }
  .pi-trend.pi-animate [data-part="line"] { stroke-dasharray: 28; }
  .pi-home.pi-animate [data-part="roof"] { stroke-dasharray: 24; }
  .pi-verified.pi-animate:is(:hover, :focus-visible) [data-part="check"], .pi-hover:hover .pi-verified.pi-animate [data-part="check"],
  .pi-shieldCheck.pi-animate:is(:hover, :focus-visible) [data-part="check"], .pi-hover:hover .pi-shieldCheck.pi-animate [data-part="check"] { stroke-dashoffset: 12; animation: pi-draw .45s ease forwards; }
  .pi-terminal.pi-animate:is(:hover, :focus-visible) [data-part="prompt"], .pi-hover:hover .pi-terminal.pi-animate [data-part="prompt"] { stroke-dashoffset: 10; animation: pi-draw .4s ease forwards; }
  .pi-trend.pi-animate:is(:hover, :focus-visible) [data-part="line"], .pi-hover:hover .pi-trend.pi-animate [data-part="line"] { stroke-dashoffset: 28; animation: pi-draw .55s ease forwards; }
  .pi-home.pi-animate:is(:hover, :focus-visible) [data-part="roof"], .pi-hover:hover .pi-home.pi-animate [data-part="roof"] { stroke-dashoffset: 24; animation: pi-draw .5s ease forwards; }

  /* shieldCheck — the shield body also gives one beat */
  .pi-shieldCheck.pi-animate:is(:hover, :focus-visible) [data-part="shield"], .pi-hover:hover .pi-shieldCheck.pi-animate [data-part="shield"] { animation: pi-beat .5s ease; }

  /* cloud — a soft float */
  .pi-cloud.pi-animate:is(:hover, :focus-visible) [data-part="cloud"], .pi-hover:hover .pi-cloud.pi-animate [data-part="cloud"] { animation: pi-bob .9s ease; }

  /* lock — the shackle lifts; trash — the lid lifts */
  .pi-lock.pi-animate:is(:hover, :focus-visible) [data-part="shackle"], .pi-hover:hover .pi-lock.pi-animate [data-part="shackle"],
  .pi-trash.pi-animate:is(:hover, :focus-visible) [data-part="lid"], .pi-hover:hover .pi-trash.pi-animate [data-part="lid"] { transform: translateY(-1.5px); }

  /* key — one quiet turn about the bow */
  .pi-key :is(circle, path) { transform-box: view-box; transform-origin: 8px 15.5px; }
  .pi-key.pi-animate:is(:hover, :focus-visible) :is(circle, path), .pi-hover:hover .pi-key.pi-animate :is(circle, path) { animation: pi-settle .8s ease; }

  /* creditCard — the chip line swipes */
  .pi-creditCard.pi-animate:is(:hover, :focus-visible) [data-part="chip"], .pi-hover:hover .pi-creditCard.pi-animate [data-part="chip"] { transform: translateX(2px); }

  /* upload / download — the arrow nudges in its direction */
  .pi-upload.pi-animate:is(:hover, :focus-visible) [data-part="arrow"], .pi-hover:hover .pi-upload.pi-animate [data-part="arrow"] { transform: translateY(-2px); }
  .pi-download.pi-animate:is(:hover, :focus-visible) [data-part="arrow"], .pi-hover:hover .pi-download.pi-animate [data-part="arrow"] { transform: translateY(2px); }

  /* sync — one full turn */
  .pi-sync.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-sync.pi-animate { animation: pi-spin .9s cubic-bezier(.4, 0, .2, 1); }

  /* globe — the meridian gives one quiet settle */
  .pi-globe ellipse { transform-box: view-box; transform-origin: 12px 12px; }
  .pi-globe.pi-animate:is(:hover, :focus-visible) ellipse, .pi-hover:hover .pi-globe.pi-animate ellipse { animation: pi-settle .9s ease; }

  /* database — the top platter lifts */
  .pi-database.pi-animate:is(:hover, :focus-visible) ellipse, .pi-hover:hover .pi-database.pi-animate ellipse { transform: translateY(-1.5px); }

  /* mail — the flap dips open */
  .pi-mail.pi-animate:is(:hover, :focus-visible) [data-part="flap"], .pi-hover:hover .pi-mail.pi-animate [data-part="flap"] { transform: translateY(1.5px); }

  /* send — the plane flies up and out */
  .pi-send.pi-animate:is(:hover, :focus-visible) [data-part="plane"], .pi-hover:hover .pi-send.pi-animate [data-part="plane"] { transform: translate(2px, -2px); }

  /* bell — a gentle swing from the crown */
  .pi-bell [data-part="bell"] { transform-box: view-box; transform-origin: 12px 4px; }
  .pi-bell.pi-animate:is(:hover, :focus-visible) [data-part="bell"], .pi-hover:hover .pi-bell.pi-animate [data-part="bell"] { animation: pi-settle .9s ease; }

  /* filter — a small settle as it sifts */
  .pi-filter.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-filter.pi-animate { animation: pi-settle .7s ease; }

  /* sort — the two arrows ease past each other */
  .pi-sort.pi-animate:is(:hover, :focus-visible) path:nth-of-type(1), .pi-hover:hover .pi-sort.pi-animate path:nth-of-type(1) { transform: translateY(1.5px); }
  .pi-sort.pi-animate:is(:hover, :focus-visible) path:nth-of-type(2), .pi-hover:hover .pi-sort.pi-animate path:nth-of-type(2) { transform: translateY(-1.5px); }

  /* info / help — the mark gives one quiet beat */
  .pi-info.pi-animate:is(:hover, :focus-visible) circle:nth-of-type(2), .pi-hover:hover .pi-info.pi-animate circle:nth-of-type(2),
  .pi-help.pi-animate:is(:hover, :focus-visible) circle:nth-of-type(2), .pi-hover:hover .pi-help.pi-animate circle:nth-of-type(2) { animation: pi-beat .5s ease; }

  /* copy — the top sheet shifts out */
  .pi-copy.pi-animate:is(:hover, :focus-visible) [data-part="sheet"], .pi-hover:hover .pi-copy.pi-animate [data-part="sheet"] { transform: translate(1.5px, 1.5px); }

  /* file — the folded corner appears */
  .pi-file.pi-animate:is(:hover, :focus-visible) [data-part="fold"], .pi-hover:hover .pi-file.pi-animate [data-part="fold"] { animation: pi-appear .4s ease both; }

  /* play / zap — a small jolt; pause — a soft tap */
  .pi-play.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-play.pi-animate { transform: translateX(1.5px); }
  .pi-pause.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-pause.pi-animate { animation: pi-tap .4s ease; }
  .pi-zap.pi-animate:is(:hover, :focus-visible), .pi-hover:hover .pi-zap.pi-animate { animation: pi-beat .5s ease; }

  /* eye — the pupil dilates */
  .pi-eye.pi-animate:is(:hover, :focus-visible) [data-part="pupil"], .pi-hover:hover .pi-eye.pi-animate [data-part="pupil"] { animation: pi-beat .55s ease; }

  /* bookmark — tucks down a touch */
  .pi-bookmark.pi-animate:is(:hover, :focus-visible) [data-part="mark"], .pi-hover:hover .pi-bookmark.pi-animate [data-part="mark"] { transform: translateY(1.5px); }

  /* flag — the cloth flutters from the pole */
  .pi-flag [data-part="cloth"] { transform-box: view-box; transform-origin: 5px 8px; }
  .pi-flag.pi-animate:is(:hover, :focus-visible) [data-part="cloth"], .pi-hover:hover .pi-flag.pi-animate [data-part="cloth"] { animation: pi-settle .8s ease; }

  /* book — the inner curve slides in */
  .pi-book.pi-animate:is(:hover, :focus-visible) [data-part="cover"], .pi-hover:hover .pi-book.pi-animate [data-part="cover"] { animation: pi-slide-x .4s ease both; }

  /* rocket — it lifts, the flame flickers */
  .pi-rocket.pi-animate:is(:hover, :focus-visible) [data-part="rocket"], .pi-hover:hover .pi-rocket.pi-animate [data-part="rocket"] { transform: translateY(-2px); }
  .pi-rocket.pi-animate:is(:hover, :focus-visible) [data-part="flame"], .pi-hover:hover .pi-rocket.pi-animate [data-part="flame"] { animation: pi-beat .6s ease; }

  /* ════════════════════════════════════════════════════════════════════════
     FIGURES 480×400 (pi-fig) — the illustrative plates (figures.data.mjs).
     Slower and even quieter than the icons: one slow ambient gesture per
     hover, hairline-scale amplitudes. Same gates: opt-in via `.pi-animate`,
     triggered by the svg's own :hover/:focus-visible or a `.pi-hover` ancestor.
     ════════════════════════════════════════════════════════════════════════ */
  .pi-fig [data-part] { transform-box: fill-box; transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .8s ease; }
  .pi-fig [data-part] :is(path, ellipse) { transition: stroke-opacity .8s ease; }

  /* loop — the lid lifts away and the strata breathe apart; lift lines firm up */
  .pi-fig-loop.pi-animate:is(:hover, :focus-visible) :is([data-part="lid"], [data-part="mark"]), .pi-hover:hover .pi-fig-loop.pi-animate :is([data-part="lid"], [data-part="mark"]) { transform: translateY(-7px); }
  .pi-fig-loop.pi-animate:is(:hover, :focus-visible) [data-part="slab-5"], .pi-hover:hover .pi-fig-loop.pi-animate [data-part="slab-5"] { transform: translateY(-3.5px); }
  .pi-fig-loop.pi-animate:is(:hover, :focus-visible) [data-part="slab-4"], .pi-hover:hover .pi-fig-loop.pi-animate [data-part="slab-4"] { transform: translateY(-2px); }
  .pi-fig-loop.pi-animate:is(:hover, :focus-visible) [data-part="slab-3"], .pi-hover:hover .pi-fig-loop.pi-animate [data-part="slab-3"] { transform: translateY(-1px); }
  .pi-fig-loop.pi-animate:is(:hover, :focus-visible) [data-part="links"], .pi-hover:hover .pi-fig-loop.pi-animate [data-part="links"] path { stroke-opacity: .8; }

  /* council — the voices rise to the table, one after another; the absent one firms up */
  .pi-fig-council.pi-animate:is(:hover, :focus-visible) [data-part="blk-a"], .pi-hover:hover .pi-fig-council.pi-animate [data-part="blk-a"] { transform: translateY(-4px); }
  .pi-fig-council.pi-animate:is(:hover, :focus-visible) [data-part="blk-b"], .pi-hover:hover .pi-fig-council.pi-animate [data-part="blk-b"] { transform: translateY(-3px); transition-delay: .07s; }
  .pi-fig-council.pi-animate:is(:hover, :focus-visible) [data-part="blk-c"], .pi-hover:hover .pi-fig-council.pi-animate [data-part="blk-c"] { transform: translateY(-2px); transition-delay: .04s; }
  .pi-fig-council.pi-animate:is(:hover, :focus-visible) [data-part="blk-d"], .pi-hover:hover .pi-fig-council.pi-animate [data-part="blk-d"] { transform: translateY(-2.5px); transition-delay: .11s; }
  .pi-fig-council.pi-animate:is(:hover, :focus-visible) [data-part="ghost"], .pi-hover:hover .pi-fig-council.pi-animate [data-part="ghost"] { opacity: .55; transition-delay: .15s; }

  /* dissent — the cluster rises; the lone voice holds its ground; the address lines firm up */
  .pi-fig-dissent.pi-animate:is(:hover, :focus-visible) [data-part="blk-a"], .pi-hover:hover .pi-fig-dissent.pi-animate [data-part="blk-a"] { transform: translateY(-4px); }
  .pi-fig-dissent.pi-animate:is(:hover, :focus-visible) [data-part="blk-b"], .pi-hover:hover .pi-fig-dissent.pi-animate [data-part="blk-b"] { transform: translateY(-3px); transition-delay: .06s; }
  .pi-fig-dissent.pi-animate:is(:hover, :focus-visible) [data-part="blk-c"], .pi-hover:hover .pi-fig-dissent.pi-animate [data-part="blk-c"] { transform: translateY(-2.5px); transition-delay: .03s; }
  .pi-fig-dissent.pi-animate:is(:hover, :focus-visible) [data-part="tether"], .pi-hover:hover .pi-fig-dissent.pi-animate [data-part="tether"] path { stroke-opacity: .8; }

  /* convene — the members take their seats, one after another around the loop */
  .pi-fig-convene.pi-animate:is(:hover, :focus-visible) [data-part^="m-"], .pi-hover:hover .pi-fig-convene.pi-animate [data-part^="m-"] { animation: pi-fig-ripple 1.2s cubic-bezier(.4, 0, .2, 1) both; }
  .pi-fig-convene.pi-animate:is(:hover, :focus-visible) [data-part="m-2"], .pi-hover:hover .pi-fig-convene.pi-animate [data-part="m-2"] { animation-delay: .08s; }
  .pi-fig-convene.pi-animate:is(:hover, :focus-visible) [data-part="m-3"], .pi-hover:hover .pi-fig-convene.pi-animate [data-part="m-3"] { animation-delay: .16s; }
  .pi-fig-convene.pi-animate:is(:hover, :focus-visible) [data-part="m-4"], .pi-hover:hover .pi-fig-convene.pi-animate [data-part="m-4"] { animation-delay: .24s; }
  .pi-fig-convene.pi-animate:is(:hover, :focus-visible) [data-part="m-5"], .pi-hover:hover .pi-fig-convene.pi-animate [data-part="m-5"] { animation-delay: .32s; }
  .pi-fig-convene.pi-animate:is(:hover, :focus-visible) [data-part="m-6"], .pi-hover:hover .pi-fig-convene.pi-animate [data-part="m-6"] { animation-delay: .4s; }
  .pi-fig-convene.pi-animate:is(:hover, :focus-visible) [data-part="ring"], .pi-hover:hover .pi-fig-convene.pi-animate [data-part="ring"] ellipse { stroke-opacity: .55; }

  /* coreSample — the extraction continues; the lift lines firm up */
  .pi-fig-coreSample.pi-animate:is(:hover, :focus-visible) [data-part="column"], .pi-hover:hover .pi-fig-coreSample.pi-animate [data-part="column"] { transform: translateY(-7px); }
  .pi-fig-coreSample.pi-animate:is(:hover, :focus-visible) [data-part="links"], .pi-hover:hover .pi-fig-coreSample.pi-animate [data-part="links"] path { stroke-opacity: .8; }

  /* signal — one quiet pulse runs down the waveform */
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part], .pi-hover:hover .pi-fig-signal.pi-animate [data-part] { animation: pi-fig-ripple 1.2s cubic-bezier(.4, 0, .2, 1) both; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-2"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-2"] { animation-delay: .05s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-3"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-3"] { animation-delay: .1s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-4"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-4"] { animation-delay: .15s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-5"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-5"] { animation-delay: .2s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-6"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-6"] { animation-delay: .25s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-7"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-7"] { animation-delay: .3s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-8"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-8"] { animation-delay: .35s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-9"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-9"] { animation-delay: .4s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-10"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-10"] { animation-delay: .45s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-11"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-11"] { animation-delay: .5s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-12"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-12"] { animation-delay: .55s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-13"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-13"] { animation-delay: .6s; }
  .pi-fig-signal.pi-animate:is(:hover, :focus-visible) [data-part="slat-14"], .pi-hover:hover .pi-fig-signal.pi-animate [data-part="slat-14"] { animation-delay: .65s; }

  /* ── keyframes ────────────────────────────────────────────────────────── */
  @keyframes pi-fig-ripple { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
  @keyframes pi-spin      { to { transform: rotate(360deg); } }
  @keyframes pi-draw      { from { stroke-dashoffset: var(--pi-len, 60); } to { stroke-dashoffset: 0; } }
  @keyframes pi-appear    { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
  @keyframes pi-peer-in   { from { opacity: 0; transform: translateX(-4px) scale(.85); } to { opacity: 1; transform: translateX(0) scale(1); } }
  @keyframes pi-bob       { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.5px); } }
  @keyframes pi-brain     { 0%, 100% { fill-opacity: .08; } 45% { fill-opacity: .18; } }
  @keyframes pi-shimmer   { 0%, 100% { stroke-opacity: .5; } 45% { stroke-opacity: .9; } }
  @keyframes pi-glow      { 0%, 100% { fill-opacity: .1; } 45% { fill-opacity: .24; } }
  @keyframes pi-glow-core { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06); } }
  @keyframes pi-screen    { 0%, 100% { fill-opacity: .08; } 45% { fill-opacity: .2; } }
  @keyframes pi-moon      { 0%, 100% { fill-opacity: .1; } 45% { fill-opacity: .26; } }
  @keyframes pi-slide-x   { from { transform: translateX(-4px); opacity: .3; } to { transform: translateX(0); opacity: 1; } }
  @keyframes pi-grow-y    { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
  @keyframes pi-focus     { from { transform: scale(1.07); opacity: .55; } to { transform: scale(1); opacity: 1; } }
  @keyframes pi-settle    { 0% { transform: rotate(0); } 35% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
  @keyframes pi-scan      { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(2px, -1.5px); } }
  @keyframes pi-beat      { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.09); } }
  @keyframes pi-pulse     { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
  @keyframes pi-twinkle   { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.07) rotate(7deg); } 100% { transform: scale(1) rotate(0); } }
  @keyframes pi-tap       { 0%, 100% { transform: scale(1); } 45% { transform: scale(.92); } }
  @keyframes pi-shuttle   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
  @keyframes pi-fill-up   { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes pi-flow      { to { stroke-dashoffset: -18; } }
  @keyframes pi-write     { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1px, 1px); } }
  @keyframes pi-drop      { 0% { transform: translateY(-3px); } 55% { transform: translateY(1px); } 100% { transform: translateY(0); } }
  @keyframes pi-sweep     { 0% { transform: rotate(-22deg); } 60% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
}