/**
 * Ambient float loop for miraigo/stat-card: one 4s ease-in-out cohort, each
 * group translating Y 0 → −amplitude → 0, infinite. Every amplitude token is
 * one third of the original design value, and the ratios between groups (and
 * so the text-vs-card deltas below) are kept.
 *
 * Front end only, same reasoning as reveal.css and text-scrub.css
 * (inc/assets.php's MIRAIGO_UTILITY_STYLES — never mirrored through
 * add_editor_style()): an editor should never see an ambient loop while
 * editing what is otherwise a static card, and this file's own style.css
 * counterpart (registered per-block, loaded in both contexts) stays free of
 * anything that runs on its own.
 *
 * Animates the CSS `translate` property, never `transform`, so it composes
 * with `.is-reveal--up`'s one-shot `transform: translateY()` transition
 * (assets/css/utilities/reveal.css) instead of fighting it — both can be
 * set on the same element at once, and view.js's count-up only ever
 * touches `textContent`, so neither animation reads or writes the other's
 * property.
 *
 * Box (`.stat-card`, the card plus its `decoration` image, which floats
 * with it as a normal child) and text (`.stat-card__text`, figure+label)
 * are two animated elements. `.stat-card__text` is nested inside
 * `.stat-card` and both loops run in phase, so their translates ADD UP. The
 * `float-distance-text-*` tokens are therefore deltas relative to the card,
 * not absolute amplitudes: text target minus card amplitude (light
 * 40.9 − 15.4, dark 51.2 − 20.5, brand 25.6 − 35.8 = −10.2, the brand text
 * moving less than its card).
 *
 * Mobile cohort: its own amplitudes, not a scaled-down version of the
 * desktop ones. Card-dark and card-brand
 * are 0 there (only their text floats), so the `-mobile` text tokens are
 * absolute targets, not deltas, for those two. The brand card's mobile
 * label-only float (`float-distance-label-brand-mobile`, see the media
 * query below) is the one exception to "box and text are the only two
 * animated elements" — its figure must stay still while only the label
 * moves, so the label is animated directly instead of through the shared
 * `.stat-card__text`.
 */

@media (prefers-reduced-motion: no-preference) {

	.stat-card,
	.stat-card__text {
		translate: 0 0;
		animation-name: miraigo-stat-float;
		animation-duration: var(--wp--custom--stat-card--float-duration);
		animation-timing-function: var(--wp--custom--stat-card--float-easing);
		animation-iteration-count: infinite;
	}

	.stat-card--bg-light {
		--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-card-light-mobile);
	}

	.stat-card--bg-light .stat-card__text {
		--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-text-light-mobile);
	}

	.stat-card--bg-dark {
		--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-card-dark-mobile);
	}

	.stat-card--bg-dark .stat-card__text {
		--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-text-dark-mobile);
	}

	.stat-card--bg-brand {
		--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-card-brand-mobile);
	}

	.stat-card--bg-brand .stat-card__text {
		--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-text-brand-mobile);
	}

	/*
	 * Mobile-only: the brand card's box and its
	 * "20%" figure both stay still (float-distance-card-brand-mobile and
	 * float-distance-text-brand-mobile are both 0 above) — only the
	 * label+ellipse group floats, at its own amplitude. It is animated
	 * directly rather than through `.stat-card__text` because that wrapper
	 * also contains the figure, which must not move. Desktop is untouched:
	 * this rule only exists below 768px.
	 */
	@media (max-width: 767.98px) {

		.stat-card--bg-brand .stat-card__label {
			translate: 0 0;
			animation-name: miraigo-stat-float;
			animation-duration: var(--wp--custom--stat-card--float-duration);
			animation-timing-function: var(--wp--custom--stat-card--float-easing);
			animation-iteration-count: infinite;
			--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-label-brand-mobile);
		}
	}

	@media (min-width: 768px) {

		.stat-card--bg-light {
			--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-card-light);
		}

		.stat-card--bg-light .stat-card__text {
			--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-text-light);
		}

		.stat-card--bg-dark {
			--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-card-dark);
		}

		.stat-card--bg-dark .stat-card__text {
			--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-text-dark);
		}

		.stat-card--bg-brand {
			--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-card-brand);
		}

		.stat-card--bg-brand .stat-card__text {
			--miraigo-stat-float-amplitude: var(--wp--custom--stat-card--float-distance-text-brand);
		}
	}

	@keyframes miraigo-stat-float {

		50% {
			translate: 0 calc(-1 * var(--miraigo-stat-float-amplitude, 0px));
		}
	}
}