/* @sms/design-motion — duration + easing tokens.
 *
 * Hand-authored (no build script) because the token set is small and
 * has no reference resolution to do. If motion grows past ~30 tokens
 * or gains theme variants, promote to a JSON+build pipeline mirroring
 * @sms/design-tokens.
 *
 * Naming: t-shirt scale for durations (fast/base/slow/...) matches
 * the convention used by Carbon, Spectrum, Material, and Polaris so
 * a contributor familiar with any of those finds the same shape.
 *
 * Easings: Material/Carbon standard set + a spring overshoot. The
 * "emphasized" curve is the cubic-bezier(0.22, 1, 0.36, 1) value the
 * legacy site already uses for the nav underline and hero button —
 * pinned here so future migrations don't drift away from it.
 *
 * prefers-reduced-motion: durations collapse to near-zero (1ms) so
 * transition-end / animation-end events still fire reliably. Ambient
 * background loops keep their slow rhythm — those don't induce
 * vestibular issues and removing them tends to make the page feel
 * inert to users who chose "reduce" rather than "eliminate". */

:root {
	/* ─── Durations ─── */
	--duration-instant: 0ms;
	--duration-fast: 100ms;
	--duration-base: 200ms;
	--duration-slow: 300ms;
	--duration-slower: 400ms;
	--duration-slowest: 1000ms;
	--duration-ambient: 8000ms;

	/* ─── Easings ─── */
	--easing-linear: linear;
	--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--easing-entry: cubic-bezier(0, 0, 0.2, 1);
	--easing-exit: cubic-bezier(0.4, 0, 1, 1);
	--easing-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
	--easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ─── Rubberband-depth ─── */
	/* Unitless multipliers applied to --rubberband-y (the scroll-rAF-
	   populated overscroll amount) to drive inertia-follow during
	   Safari/iOS elastic bounce. Higher value = element drifts further
	   with the rubberband — visually further from the camera.

	   The three levels form a parallax depth ladder that mirrors the
	   scroll-driven animations: bg moves most (matches notes' -25%/
	   100vh scroll parallax exactly so forward and backward rates align);
	   mid moves less (foreground stack — tuned by eye, not strictly
	   tied to its scroll keyframe since that one's in px and viewport-
	   dependent); flow is the horizontal wave-wash magnitude.

	   Usage:
	     translate: 0 calc(var(--rubberband-y, 0px) * var(--rubberband-bg));

	   Composes additively with `transform` so it stacks cleanly with
	   scroll-driven animations on the same element. */
	--rubberband-bg: 0.25;
	--rubberband-mid: 0.15;
	--rubberband-flow: 1;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 1ms;
		--duration-base: 1ms;
		--duration-slow: 1ms;
		--duration-slower: 1ms;
		--duration-slowest: 1ms;
		/* --duration-ambient deliberately preserved. */

		/* Zeroing the rubberband multipliers cancels inertia-follow at
		   the source — any element that derives its translate from
		   these tokens sits still during overscroll without needing
		   its own override. */
		--rubberband-bg: 0;
		--rubberband-mid: 0;
		--rubberband-flow: 0;
	}
}