/* =============================================================
   KIMIKON Motion System — Motion Layer
   Shared reveal motion and reduced-motion contract.

   CSS layer order:
   1. design-system.css  foundation tokens + primitive components
   2. cards-system.css   reusable card surfaces
   3. motion-system.css  this file: reveal + motion contracts
   4. page theme CSS     layout, section composition, local overrides
   5. nav-system.css     shared header/navigation

   Include this AFTER cards-system.css and BEFORE page CSS.
   ============================================================= */

.reveal {
	opacity: 0;
	transform: translateY(28px) scale(0.985);
	transition:
		opacity 900ms var(--ds-ease),
		transform 1000ms var(--ds-ease),
		filter 900ms var(--ds-ease);
	filter: blur(6px);
	contain: paint;
}

.reveal.from-left {
	transform: translate3d(-48px, 12px, 0) scale(0.99);
}

.reveal.from-right {
	transform: translate3d(48px, 12px, 0) scale(0.99);
}

.reveal.from-bottom {
	transform: translate3d(0, 44px, 0) scale(0.985);
}

.reveal.is-visible,
.reveal.from-left.is-visible,
.reveal.from-right.is-visible,
.reveal.from-bottom.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	filter: blur(0);
}

.hero-copy.reveal.is-visible h1 {
	animation: titleLift 860ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-copy.reveal.is-visible .lead {
	animation: softFade 980ms ease 120ms both;
}

@keyframes titleLift {
	0% {
		clip-path: inset(0 0 100% 0);
		transform: translateY(20px);
	}
	100% {
		clip-path: inset(0 0 -8% 0);
		transform: translateY(0);
	}
}

@keyframes softFade {
	0% {
		opacity: 0;
		transform: translateY(12px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 620px) {
	.reveal.from-left,
	.reveal.from-right {
		transform: translate3d(0, 28px, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}

	.reveal,
	.reveal.from-left,
	.reveal.from-right,
	.reveal.from-bottom,
	.reveal.is-visible,
	.reveal.from-left.is-visible,
	.reveal.from-right.is-visible,
	.reveal.from-bottom.is-visible {
		opacity: 1;
		transform: none;
		filter: none;
	}
}