/* @sms/design-motion — common animation keyframes.
 *
 * Components compose these by setting `animation: <name>
 * var(--duration-X) var(--easing-Y) both;` — no per-component
 * @keyframes redefinition needed. The legacy fadeInUp and
 * slideUpCookie patterns are merged into fade-in-up; the floatNote
 * pattern from HeroNotes is captured as float-ambient.
 *
 * Naming: kebab-case so consumers don't need to remember camelCase
 * variants. Durations and easings live in motion.css.
 *
 * If a Phase D component needs a one-off animation that doesn't
 * generalise (e.g. an icon morph specific to a single button), keep
 * it in that component's own <style> block — this file is only for
 * patterns that more than one component will use. */

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scale-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes slide-up {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes float-ambient {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}