/* 인공지능 하위 화면 — 큰 착지·개념 그림 돌리·연결 경로. SSOT 11절. */
[data-ai-motion] {
	--sonub-motion-accent: var(--wa-color-brand-fill-loud);
	--webmovie-burst: var(--wa-color-brand-fill-loud), var(--wa-color-warning-fill-loud), var(--wa-color-success-fill-loud);
	--webmovie-cue-color: var(--wa-color-brand-fill-loud);
	--webmovie-cascade: 65ms;
	container-type: inline-size;
}
.ai-motion-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: 1.2rem;
	margin-block: 1.4rem 2.5rem;
	padding: clamp(1rem, 3cqi, 2rem);
	border: 1px solid color-mix(in srgb, var(--sonub-motion-accent) 35%, var(--sonub-border));
	border-radius: 1.8rem;
	background: radial-gradient(ellipse at 90% 10%, color-mix(in srgb, var(--sonub-motion-accent) 22%, transparent), transparent 65%), var(--wa-color-surface-raised);
	box-shadow: 0 1.4rem 3rem -2rem color-mix(in srgb, var(--sonub-motion-accent) 65%, transparent);
	isolation: isolate;
}
.ai-motion-copy { min-inline-size: 0; position: relative; z-index: 2; }
.ai-motion-stage:not(:has(.ai-motion-copy)) { grid-template-columns: minmax(0, 1fr); }
.ai-motion-stage:not(:has(.ai-motion-copy)) .ai-motion-visual { inline-size: min(100%, 32rem); justify-self: center; }
.ai-motion-stage .ai-motion-copy > :is(header, .sonub-page-header) {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
}
.ai-motion-stage .ai-motion-copy h1 {
	font-size: clamp(calc(1.7rem * var(--wa-font-size-scale, 1)), 4.4cqi, calc(2.8rem * var(--wa-font-size-scale, 1)));
	line-height: 1.18;
	letter-spacing: -.035em;
	text-wrap: balance;
	color: var(--wa-color-text-normal);
}
.ai-motion-stage .page-guide-copy { min-inline-size: 0; }
.ai-motion-visual {
	position: relative;
	min-inline-size: 0;
	overflow: hidden;
	border-radius: 1.2rem;
	border: 1px solid var(--sonub-border);
	background: var(--wa-color-surface-lowered);
	box-shadow: 0 .8rem 1.8rem -.8rem color-mix(in srgb, var(--sonub-motion-accent) 35%, transparent);
}
.ai-motion-picture { margin: 0; }
.ai-motion-picture img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ai-motion-seal {
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-start: .75rem;
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: .9rem;
	color: var(--wa-color-brand-on-loud);
	background: var(--wa-color-brand-fill-loud);
	box-shadow: var(--wa-shadow-m);
	font-size: calc(1.4rem * var(--wa-font-size-scale, 1));
}
.ai-motion-sweep {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-block-end: .35rem solid var(--sonub-motion-accent);
}
.ai-motion-replay {
	position: absolute;
	inset-block-end: .65rem;
	inset-inline-end: .65rem;
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	box-shadow: var(--wa-shadow-s);
}
.ai-motion-route { grid-column: 1 / -1; position: relative; min-inline-size: 0; }
.ai-motion-route ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.ai-motion-route li { min-inline-size: 0; position: relative; z-index: 1; }
.ai-motion-route a {
	display: flex;
	align-items: center;
	gap: .6rem;
	block-size: 100%;
	min-block-size: 3.8rem;
	padding: .8rem;
	border: 1px solid color-mix(in srgb, var(--sonub-motion-accent) 35%, var(--sonub-border));
	border-radius: .9rem;
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	text-decoration: none;
	font-weight: 750;
	font-size: calc(.82rem * var(--wa-font-size-scale, 1));
	transition: translate 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.ai-motion-route a > span:nth-child(2) { flex: 1; min-inline-size: 0; overflow-wrap: break-word; }
.ai-motion-stop-icon { color: var(--sonub-motion-accent); flex: 0 0 auto; }
.ai-motion-route a > .dg-flip { font-size: calc(.7rem * var(--wa-font-size-scale, 1)); }
.ai-motion-route > .ig-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.ai-motion-route .ig-line { fill: none; stroke: var(--sonub-motion-accent); stroke-width: 2.5; }
.ai-motion-route .ig-node { fill: var(--sonub-motion-accent); }
[data-ai-motion] :is(h2, .sonub-section-heading) { text-wrap: balance; }
[data-ai-motion] h2 { color: var(--wa-color-brand-text-loud); }
[data-ai-motion] .sonub-figure { overflow: hidden; }
[data-ai-motion="development"] { --sonub-motion-accent: var(--wa-color-success-fill-loud); }
[data-ai-motion="internals"] { --sonub-motion-accent: var(--wa-color-brand-fill-loud); }
[data-ai-motion="exam"] { --sonub-motion-accent: var(--wa-color-warning-fill-loud); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ai-motion-route a:hover { translate: 0 -.35rem; border-color: var(--sonub-motion-accent); box-shadow: 0 .6rem 1rem -.6rem var(--sonub-motion-accent); }
	[data-ai-motion] :is(.glossary-book-term, .ai-next-card, .ai-truth-next-card, .skills-card) { transition: translate 160ms ease, box-shadow 160ms ease; }
	[data-ai-motion] :is(.glossary-book-term, .ai-next-card, .ai-truth-next-card, .skills-card):hover { translate: 0 -.3rem; box-shadow: var(--wa-shadow-m); }
}
.ai-motion-route a:focus-visible { outline: 3px solid var(--wa-color-brand-fill-loud); outline-offset: 3px; }
@container (max-width: 42rem) {
	.ai-motion-stage { grid-template-columns: minmax(0, 1fr); border-radius: 1.2rem; }
	.ai-motion-visual { max-inline-size: 32rem; inline-size: 100%; justify-self: center; }
	.ai-motion-route ol { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.ai-motion-route a { min-block-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ai-motion-stage *, [data-ai-motion] .sonub-card { animation: none !important; transition: none !important; }
}