/**
 * Component: Budget Marquee — styles
 * Scoped to .budget-marquee / .budget-card. Tokens from style.css.
 *
 * Comp (1440, page y; v3 export): the band spans 5366–5816 — three 120px
 * rows, 45px apart — and ends 149px above the contact panel. One card design at 375×88, scaled ×1.3627 (near) and ×0.6827 (far).
 *
 * Every card dimension is a multiple of --u = --s (the card's size) × --k (the
 * breakpoint's scale), so the whole band shrinks as one on smaller screens.
 */

.budget-marquee {
	--k: 1;
	display: flex;
	flex-direction: column;
	gap: calc(45px * var(--k));
	padding: 102px 0 149px;
	overflow-x: clip;
}

/* ── Rows + tracks ────────────────────────────────────────────── */
.budget-marquee__row {
	display: flex;
	align-items: center;
	height: calc(120px * var(--k));
}

/* --duration comes from budget_marquee.php, per row: the set's width over the
   row's speed, so a row drifts at the same px/s however many cards it holds. */
.budget-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	margin-left: calc(var(--lead, 0px) * var(--k));
	animation: budget-marquee-scroll var(--duration, 80s) linear infinite;
	/* Paused until apt-animations.js reports the band on screen, and paused
	   again when it leaves — no looping animation burning battery unseen. */
	animation-play-state: paused;
	will-change: transform;
}

.budget-marquee.is-inview .budget-marquee__track {
	animation-play-state: running;
}

.budget-marquee__row--right .budget-marquee__track {
	animation-direction: reverse;
}

/* The track holds three identical sets; moving one set (a third) per cycle
   lands exactly where it started. */
@keyframes budget-marquee-scroll {
	to { transform: translateX(-33.3333%); }
}

.budget-marquee__set {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

/* The icon sprite: <symbol>s only, never painted itself. */
.budget-marquee__sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ── Card ─────────────────────────────────────────────────────── */
.budget-card {
	--s: 1;
	--u: calc(var(--s) * var(--k));
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: calc(40px * var(--u)) minmax(0, 1fr);
	column-gap: calc(11px * var(--u));
	align-items: center;
	width: calc(375px * var(--u));
	height: calc(88px * var(--u));
	margin-right: calc(var(--gap, 100px) * var(--k));
	padding: 0 calc(25px * var(--u)) 0 calc(24px * var(--u));
	border-radius: calc(24px * var(--u));
	background: var(--color-surface);
	transform: translateY(calc(var(--dy, 0px) * var(--k)));
	box-sizing: border-box;
}

.budget-card--l {
	--s: 1.3627;
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

/* Far cards: the comp blurs them (3px) — depth of field. */
.budget-card--s {
	--s: 0.6827;
	filter: blur(3px);
	opacity: 0.6;
}

.budget-card__tile {
	display: grid;
	place-items: center;
	width: calc(40px * var(--u));
	height: calc(40px * var(--u));
	border-radius: calc(8px * var(--u));
	background: var(--cat);
	color: var(--color-bg);
}

.budget-card__tile svg {
	display: block;
	width: calc(24px * var(--u));
	height: calc(24px * var(--u));
}

.budget-card__main {
	display: flex;
	flex-direction: column;
	gap: calc(8px * var(--u));
	min-width: 0;
}

.budget-card__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: calc(8px * var(--u));
	font-family: var(--font-body);
	font-size: calc(15px * var(--u));
	line-height: 1.2;
	color: var(--color-text);
	white-space: nowrap;
}

.budget-card__amount {
	font-weight: 700;
	/* The spent figure counts up in tabular digits (style.css, so its width
	   holds steady); the limit beside it matches, so the pair reads as one. */
	font-variant-numeric: tabular-nums;
}

.budget-card__bar {
	display: block;
	height: calc(8px * var(--u));
	border-radius: var(--radius-pill);
	background: var(--color-track);
	overflow: hidden;
}

.budget-card__fill {
	display: block;
	width: calc(var(--fill, 0.5) * 100%);
	height: 100%;
	border-radius: inherit;
	background: var(--cat);
	transform-origin: left center;
}

/* Bars fill once, when the band first comes into view, while each spent
   figure counts up from $0 beside them. The count runs on the same clock
   (data-count-delay / -duration in budget_marquee.php — keep them equal to
   the delay and duration here) and this curve is the count's own
   ease-out-cubic, so bar and number arrive together at every frame. */
.budget-marquee.is-revealed .budget-card__fill {
	animation: budget-fill 1.6s cubic-bezier(0.33, 1, 0.67, 1) backwards;
	animation-delay: 0.35s;
}

@keyframes budget-fill {
	from { transform: scaleX(0); }
}

/* ── Tablet ≤900px ────────────────────────────────────────────── */
@media (max-width: 900px) {
	.budget-marquee {
		--k: 0.8;
		padding: 64px 0 96px;
	}
}

/* ── Mobile ≤480px ────────────────────────────────────────────── */
@media (max-width: 480px) {
	.budget-marquee {
		--k: 0.62;
		padding: 48px 0 72px;
	}
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.budget-marquee__track,
	.budget-marquee.is-revealed .budget-card__fill {
		animation: none;
	}
}