/* Motion graphics, site-wide (S35 on Life Desk, shared in S36; docs/DESIGN-SYSTEM.md 6b "Claims as motion"). A graphic
   is an SVG drawn on a 480-wide box inside a [data-mo] block, played by motion.js. These are its shared parts: the panel
   it sits on, its type, its palette (the page's tokens; paper stays paper in both modes) and the Replay button. A page's
   own stylesheet keeps the layout and anything only its graphics draw. The resting state of everything is the last
   frame. */

.mg-pic { margin: 0; border-radius: var(--r-l); background: var(--bg-2); padding: clamp(10px, 1.6vw, 22px); }
.mg-pic.mg-bare { background: none; padding: 0; }
.mg-pic svg { display: block; width: 100%; height: auto; overflow: visible; }

.mg-replay { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 0 -12px; padding: 0 16px 0 12px; border: 0; border-radius: 22px; background: transparent;
  font: 600 14px/1 var(--sans); color: var(--accent); cursor: pointer; transition: opacity .6s var(--ease), box-shadow .3s var(--ease), translate .3s var(--ease); }
.mg-replay[hidden] { display: none; }   /* shown by motion.js only; never without script or with Reduce Motion */
.mg-replay:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); translate: 0 -1px; }
.mg-replay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mo-playing .mg-replay:not(:focus-visible) { opacity: 0; pointer-events: none; }   /* it comes back when the graphic has finished */

:where([data-mo] svg *) { transform-box: fill-box; transform-origin: center; }   /* no weight, so a bar can grow from an edge */
[data-mo] svg text { font-family: var(--sans); font-weight: 600; font-size: 17px; }
[data-mo] svg .mo-s { font-size: 15px; }
[data-mo] svg .mo-xs { font-size: 13px; }
[data-mo] svg .mo-num, [data-mo] svg .mo-serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
[data-mo] svg .mo-serif { font-size: 26px; }
[data-mo] svg .mo-big { font-size: 46px; }
[data-mo] svg .mo-mid { font-size: 40px; }
[data-mo] svg .mo-sum2 { font-size: 30px; }
[data-mo] svg .mo-title { font-size: 19px; }
/* On a phone the graphic runs to the screen's edges and its words grow, so its smallest label stays near 12 px. */
@media (max-width: 599.98px) {
  .mg-pic:not(.mg-bare) { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; padding: 12px 6px; }
  [data-mo] svg text { font-size: 19px; }
  [data-mo] svg .mo-s { font-size: 16px; }
  [data-mo] svg .mo-xs { font-size: 14.5px; }
}

[data-mo] .mo-paper { fill: var(--mg-paper); filter: drop-shadow(0 8px 14px rgba(29, 36, 34, .18)); }
[data-mo] .mo-pl { fill: var(--mg-paper-line); }
[data-mo] .mo-ink { fill: var(--mg-ink); }
[data-mo] .mo-fold { fill: var(--mg-paper-fold); }
[data-mo] .mo-card { fill: var(--surface); filter: drop-shadow(0 6px 12px rgba(var(--shade), .12)); }
[data-mo] .mo-soft { fill: var(--bg-2); }
[data-mo] .mo-txt, [data-mo] .mo-num { fill: var(--text); }
[data-mo] .mo-mut { fill: var(--muted); }
[data-mo] .mo-acc { fill: var(--accent); }
[data-mo] .mo-accf { fill: var(--accent); }
[data-mo] .mo-onk { fill: var(--on-accent); }
[data-mo] .mo-bar { fill: color-mix(in srgb, var(--text) 14%, transparent); }
[data-mo] .mo-dot, [data-mo] .mo-goldf { fill: var(--gold); }
[data-mo] .mo-rule { fill: var(--rule); }
[data-mo] .mo-strike { fill: var(--muted); transform-origin: left center; }
[data-mo] .mo-cover { fill: var(--surface); transform-origin: right center; transform: scaleX(0); }
[data-mo] .mo-link { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 0; }
[data-mo] .mo-wire { fill: none; stroke: color-mix(in srgb, var(--gold) 70%, transparent); stroke-width: 2; stroke-dasharray: 200; stroke-dashoffset: 0; }
[data-mo] .mo-glass { fill: none; stroke: var(--muted); stroke-width: 2.5; }
[data-mo] .mo-check { fill: none; stroke: var(--mg-on-gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; }

/* Chips in HTML ("Free to start", S36): the words stay real text; only their arrival moves. */
.mg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mg-chip { padding: 9px 14px; border-radius: 999px; background: var(--surface); box-shadow: 0 6px 14px -10px rgba(var(--shade), .5); font: 600 14px/1.3 var(--sans); color: var(--text); }
.mg-plus .mg-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }   /* a tint, not a button */