/* Local, scroll-driven visual accents. No JavaScript means the final example. */
[data-money-demo] { --money-progress: 1; }
.preview-bar i { transform-origin: left; transform: scaleX(calc(.72 + var(--money-progress) * .28)); }
.intro-preview-spending .preview-bar i { width: 100%; }
.intro-preview-spending .preview-bar-green i { width: 78.049%; }
[data-spending-motion] .floating-receipt {
  opacity: calc(.2 + var(--money-progress) * .8);
  transform: translateY(calc((1 - var(--money-progress)) * 24px)) rotate(-10deg);
}
[data-spending-total], [data-spending-other] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .preview-bar i { transform: none; }
  [data-spending-motion] .floating-receipt { opacity: 1; transform: rotate(-10deg); }
}
/* Reserve room for the arriving bill so it never covers the category amounts. */
[data-spending-motion] { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
[data-spending-motion] .floating-receipt { position: relative; right: auto; bottom: auto; align-self: flex-end; margin-right: 8px; padding: 16px 22px 23px; }