@layer components {
  .r4x-motion-symbol { display: inline-block; width: var(--s5); height: var(--s5); vertical-align: middle; color: var(--accent-text); }
  .r4x-motion-complete { margin-inline-end: var(--s2); }
  /* A3: reveal the existing final result; never manufacture intermediate scores or scale a truthful chart. */
  @media (prefers-reduced-motion: no-preference) {
    .r4x-motion-reveal,
    .learning-check--selbstcheck #view-result.active .result-score-block,
    .learning-check--grundlagencheck #resultPanel .score-row,
    .tool-page--bullrun-check #screen-result.is-active .score-ring-wrap {
      animation: r4x-supporting-reveal var(--motion-base) var(--ease-standard);
    }
    .r4x-motion-favorite { animation: r4x-supporting-favorite var(--motion-base) var(--ease-standard); }
    .r4x-motion-sync { animation: r4x-supporting-sync var(--motion-base) var(--ease-standard); }
    .r4x-motion-complete { animation: r4x-supporting-reveal var(--motion-base) var(--ease-standard); }
  }
  @keyframes r4x-supporting-reveal { from { opacity: 0; transform: translateY(var(--s1)); } to { opacity: 1; transform: translateY(0); } }
  @keyframes r4x-supporting-favorite { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
  @keyframes r4x-supporting-sync { from { transform: rotate(-180deg); } to { transform: rotate(0); } }
}