/* Hero motion piece (hero.js): the one exception to "Motion: none" in design-language.md (2026-10-07).
 * Landscape 16:9 stage; portrait 720:1000 below 672px viewport (stage narrower than 640px). */
.motion { padding-bottom: 80px; }
.motion-frame { position: relative; border: var(--hairline); background: var(--paper); }
.motion-stage { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.motion-stage svg { display: block; width: 100%; height: 100%; text-rendering: geometricPrecision; }
.mt-sans { font-family: var(--font-sans); }
.mt-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.motion-toggle {
  position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle .icon-play { display: none; }
.motion-toggle.paused .icon-play { display: block; }
.motion-toggle.paused .icon-pause { display: none; }

@media (max-width: 671px) {
  .motion { padding-bottom: 56px; }
  .motion-stage { aspect-ratio: 720 / 1000; }
  .motion-toggle { right: 8px; bottom: 8px; }
}

/* ?render: the stage alone, at a fixed size, for tools/landing/render-motion.mjs */
html.motion-render, html.motion-render body { margin: 0; padding: 0; overflow: hidden; background: var(--paper); }
html.motion-render .motion-stage { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; aspect-ratio: auto; }
html.motion-render.portrait .motion-stage { width: 720px; height: 1000px; }