/* #region zone:finance.style.motion — ตัวเลขนับขึ้น สถานะก่อนกราฟวาด ยกการ์ด กดปุ่ม และเหรียญ */
/* finance-motion.js drives the timing with the --fm-* tokens in finance.css. Everything here is transform or
   opacity; reduced motion turns all of it off and the script never adds the pending classes then. */

/* Count-up: tabular figures plus a width reserved by the script, so neighbours never shift while digits roll.
   The digits keep the alignment of their final place (owner 2026-10-07: a stretched amount aligned to the end
   while counting jumped from the right edge to the left when the count finished). */
.count {
  font-variant-numeric: tabular-nums;
}
.is-counting {
  display: inline-block;
  text-align: inherit;
}

/* Before a chart or meter scrolls into view (only set while motion is allowed). */
.line-chart.fm-pending .chart-lines,
.line-chart.fm-pending .series-band,
.line-chart.fm-pending .dot.is-end,
.line-chart.fm-pending .chart-last-value,
.line-chart.fm-pending .chart-legend,
.cash-chart.fm-pending .cash-bar rect,
.cash-chart.fm-pending .cash-cols > li {
  opacity: 0;
}
.meter.fm-pending i,
.progress.fm-pending i {
  transform: scaleX(0);
}

/* Bars grow from the zero line: up for money left over, down for a shortfall. */
.cash-bar rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.cash-bar.is-negative rect {
  transform-origin: 50% 0;
}
.meter i,
.progress i {
  transform-origin: left center;
}

/* Hover lift on pointer devices only; touch never gets a stuck lifted card. */
@media (hover: hover) and (pointer: fine) {
  .kpi,
  .credit-card,
  .plan-card {
    transition: transform var(--dur-slow, 200ms) var(--ease-out, ease);
  }
  .kpi:hover,
  .credit-card:hover,
  .plan-card:hover {
    transform: translateY(var(--fm-lift));
  }
}

/* Press feedback: the button gives a little under the finger or click. */
#app button.primary,
#app button.secondary {
  transition:
    background var(--dur-fast, 120ms) ease,
    border-color var(--dur-fast, 120ms) ease,
    transform var(--fm-press) var(--ease-out, ease);
}
#app button:not(:disabled):active {
  transform: scale(var(--fm-press-scale));
}

/* Celebratory coins over the first "ดีแล้ว" badge, once per session. */
.fm-coin-host {
  position: relative;
}
.fm-coin {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--fm-coin-hi), var(--fm-coin-face) 70%);
  box-shadow: inset 0 0 0 1px var(--fm-coin-edge);
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kpi,
  .credit-card,
  .plan-card,
  #app button.primary,
  #app button.secondary {
    transition: none;
  }
  .kpi:hover,
  .credit-card:hover,
  .plan-card:hover,
  #app button:not(:disabled):active {
    transform: none;
  }
  .fm-coin {
    display: none;
  }
}
/* #endregion */