/**
 * Phase 4 — Kinetic motion (transform + opacity only)
 */

.as-reveal {
	opacity: 0;
	transform: translate3d(var(--as-reveal-translate), 0, 0);
	transition:
		opacity var(--as-duration-normal) var(--as-ease-out-expo),
		transform var(--as-duration-normal) var(--as-ease-spring);
	will-change: transform, opacity;
}

.as-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.as-stagger > * {
	opacity: 0;
	transform: translate3d(calc(var(--as-reveal-translate) * 0.6), 0, 0);
	transition:
		opacity var(--as-duration-normal) var(--as-ease-out-expo),
		transform var(--as-duration-normal) var(--as-ease-spring);
}

.as-stagger.is-visible > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.as-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.as-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.as-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.as-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }

.asm-btn,
.asm-card,
.asm-dash__metric,
.asm-tag {
	transition:
		transform var(--as-duration-fast) var(--as-ease-spring),
		box-shadow var(--as-duration-fast) var(--as-ease-standard),
		border-color var(--as-duration-fast) var(--as-ease-standard);
}

.asm-btn:hover {
	transform: translateY(-2px);
}

.asm-btn:active {
	transform: translateY(0) scale(0.98);
}

.asm-card:hover,
.asm-dash__metric:not(.asm-dash__metric--brand):hover {
	transform: translateY(-3px);
	box-shadow: var(--as-shadow-md);
}

.asm-dash__gauge-arc {
	transition: stroke-dashoffset 800ms var(--as-ease-out-expo);
}

.as-reveal.is-visible .asm-dash__gauge-arc {
	stroke-dashoffset: var(--gauge-offset, 33.5);
}

@media (prefers-reduced-motion: reduce) {
	.as-reveal,
	.as-stagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}