/* 리엔 뒤의 AI 로봇 장면(SSOT 23절). 장면마다 다른 방향으로 크게 움직이고 차례로 겹쳐 바뀐다. 그 위로 로봇이 날아다니고 빛 알갱이가 떠오른다. 그림은 Codex CLI 이미지 생성 모델로 만들었다. */
.home .home-scenes {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	direction: ltr; /* 장식이라 RTL 에서도 같은 방향으로 난다. */
	overflow: clip;
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 94%, transparent);
	mask-composite: intersect;
}
.home .home-scenes-image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0;
	transform: var(--scene-from);
	transition: opacity 1.4s ease;
	animation: home-scenes-pan 12s ease-in-out infinite alternate;
}
.home .home-scenes-image.is-active { opacity: 1; }
.home .home-scenes-lab { --scene-from: scale(1.1) translate(4%, 1%); --scene-to: scale(1.22) translate(-5%, -2%); }
.home .home-scenes-network { --scene-from: scale(1.24) rotate(-2deg); --scene-to: scale(1.06) translate(2%, 3%) rotate(1.5deg); animation-delay: -3s; }
.home .home-scenes-space { --scene-from: scale(1.16) translate(-6%, 2%) rotate(-2.5deg); --scene-to: scale(1.18) translate(6%, -2%) rotate(2.5deg); animation-delay: -6s; }
.home .home-scenes-city { --scene-from: scale(1.12) translateY(5%); --scene-to: scale(1.22) translateY(-5%); animation-delay: -9s; }
@keyframes home-scenes-pan { from { transform: var(--scene-from); } to { transform: var(--scene-to); } }

/* 장면을 비스듬히 훑고 지나가는 빛줄기. */
.home .home-scenes::after {
	content: '';
	position: absolute;
	inset: -20%;
	background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--wa-color-surface-raised) 45%, transparent) 50%, transparent 60%);
	transform: translateX(-70%);
	animation: home-scenes-shine 7s ease-in-out infinite;
}
@keyframes home-scenes-shine { 0%, 15% { transform: translateX(-70%); } 70%, 100% { transform: translateX(70%); } }

/* 날아다니는 로봇. 받기 전(src 없음)에는 숨긴다. */
.home .home-scenes-sprite { position: absolute; inline-size: 14%; block-size: auto; animation: 10s ease-in-out infinite; }
.home .home-scenes-sprite:not([src]) { visibility: hidden; }
.home .home-scenes-sprite-robot { inset-block-start: 52%; inset-inline-start: 4%; inline-size: 17%; animation-name: home-sprite-bob; animation-duration: 3.2s; animation-direction: alternate; }
.home .home-scenes-sprite-drone { inset-block-start: 15%; inset-inline-start: 0; inline-size: 13%; animation-name: home-sprite-patrol; animation-duration: 11s; }
.home .home-scenes-sprite-chip { inset-block-start: 3%; inset-inline-start: 44%; inline-size: 13%; animation-name: home-sprite-pulse; animation-duration: 2.6s; animation-direction: alternate; }
.home .home-scenes-sprite-rocket { inset-block-end: 0; inset-inline-start: 0; inline-size: 13%; animation-name: home-sprite-launch; animation-duration: 9s; animation-timing-function: ease-in; animation-delay: -2s; }
.home .home-scenes-sprite-satellite { inset-block-start: 40%; inset-inline-start: 43%; inline-size: 12%; animation-name: home-sprite-orbit; animation-duration: 14s; animation-timing-function: linear; }
.home .home-scenes-sprite-bubble { inset-block-start: 46%; inset-inline-end: 4%; inline-size: 15%; animation-name: home-sprite-bob; animation-duration: 4s; animation-direction: alternate; animation-delay: -1.5s; }
@keyframes home-sprite-bob { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-28%) rotate(6deg); } }
@keyframes home-sprite-pulse { from { transform: scale(0.88) rotate(-8deg); filter: brightness(1); } to { transform: scale(1.12) rotate(8deg); filter: brightness(1.15); } }
@keyframes home-sprite-patrol {
	0% { transform: translate(-20%, 0) rotate(4deg); }
	25% { transform: translate(260%, 40%) rotate(-4deg); }
	50% { transform: translate(560%, 0) rotate(4deg) scaleX(-1); }
	51% { transform: translate(560%, 0) rotate(-4deg) scaleX(-1); }
	75% { transform: translate(260%, 60%) rotate(4deg) scaleX(-1); }
	100% { transform: translate(-20%, 0) rotate(-4deg) scaleX(-1); }
}
@keyframes home-sprite-launch {
	0% { transform: translate(0, 40%) rotate(15deg); opacity: 0; }
	10% { opacity: 1; }
	80% { opacity: 1; }
	100% { transform: translate(620%, -620%) rotate(15deg); opacity: 0; }
}
@keyframes home-sprite-orbit {
	from { transform: rotate(0deg) translateX(330%) rotate(0deg) scale(0.9); }
	to { transform: rotate(360deg) translateX(330%) rotate(-360deg) scale(0.9); }
}

/* 아래에서 위로 떠오르는 빛 알갱이. */
.home .home-scenes-spark {
	position: absolute;
	inset-block-end: -4%;
	inset-inline-start: calc(var(--spark-x) * 1%);
	inline-size: calc(var(--spark-size) * 1px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 55%, var(--wa-color-surface-raised));
	box-shadow: 0 0 calc(var(--spark-size) * 2px) color-mix(in srgb, var(--wa-color-brand-fill-loud) 60%, transparent);
	opacity: 0;
	animation: home-spark-rise calc(var(--spark-time) * 1s) linear calc(var(--spark-delay) * -1s) infinite;
}
@keyframes home-spark-rise {
	0% { transform: translate(0, 0); opacity: 0; }
	15% { opacity: 0.85; }
	85% { opacity: 0.6; }
	100% { transform: translate(calc(var(--spark-drift) * 1%), -2600%); opacity: 0; }
}
.home .home-scenes-spark:nth-child(1) { --spark-x: 6; --spark-size: 6; --spark-time: 7; --spark-delay: 0; --spark-drift: 300; }
.home .home-scenes-spark:nth-child(2) { --spark-x: 13; --spark-size: 4; --spark-time: 9; --spark-delay: 3; --spark-drift: -200; }
.home .home-scenes-spark:nth-child(3) { --spark-x: 20; --spark-size: 8; --spark-time: 8; --spark-delay: 6; --spark-drift: 250; }
.home .home-scenes-spark:nth-child(4) { --spark-x: 27; --spark-size: 5; --spark-time: 10; --spark-delay: 1; --spark-drift: -300; }
.home .home-scenes-spark:nth-child(5) { --spark-x: 33; --spark-size: 4; --spark-time: 6; --spark-delay: 4; --spark-drift: 150; }
.home .home-scenes-spark:nth-child(6) { --spark-x: 39; --spark-size: 7; --spark-time: 11; --spark-delay: 8; --spark-drift: -150; }
.home .home-scenes-spark:nth-child(7) { --spark-x: 45; --spark-size: 5; --spark-time: 8; --spark-delay: 2; --spark-drift: 200; }
.home .home-scenes-spark:nth-child(8) { --spark-x: 51; --spark-size: 4; --spark-time: 7; --spark-delay: 5; --spark-drift: -250; }
.home .home-scenes-spark:nth-child(9) { --spark-x: 57; --spark-size: 6; --spark-time: 9; --spark-delay: 7; --spark-drift: 300; }
.home .home-scenes-spark:nth-child(10) { --spark-x: 63; --spark-size: 5; --spark-time: 10; --spark-delay: 0; --spark-drift: -200; }
.home .home-scenes-spark:nth-child(11) { --spark-x: 69; --spark-size: 8; --spark-time: 8; --spark-delay: 4; --spark-drift: 150; }
.home .home-scenes-spark:nth-child(12) { --spark-x: 75; --spark-size: 4; --spark-time: 6; --spark-delay: 2; --spark-drift: -300; }
.home .home-scenes-spark:nth-child(13) { --spark-x: 81; --spark-size: 6; --spark-time: 11; --spark-delay: 9; --spark-drift: 250; }
.home .home-scenes-spark:nth-child(14) { --spark-x: 87; --spark-size: 5; --spark-time: 7; --spark-delay: 6; --spark-drift: -150; }
.home .home-scenes-spark:nth-child(15) { --spark-x: 93; --spark-size: 7; --spark-time: 9; --spark-delay: 1; --spark-drift: -250; }
.home .home-scenes-spark:nth-child(16) { --spark-x: 98; --spark-size: 4; --spark-time: 10; --spark-delay: 5; --spark-drift: -350; }

/* 보이는 동안만 움직인다(home-ai-scenes.js 가 is-moving 을 붙인다). */
.home .home-scenes :is(.home-scenes-image, .home-scenes-sprite, .home-scenes-spark),
.home .home-scenes::after { animation-play-state: paused; }
.home .home-scenes.is-moving :is(.home-scenes-image, .home-scenes-sprite, .home-scenes-spark),
.home .home-scenes.is-moving::after { animation-play-state: running; }
:root[data-sonub-theme='dark'] .home .home-scenes-image { filter: brightness(0.42) saturate(1.2); }
:root[data-sonub-theme='dark'] .home .home-scenes::after { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
	.home .home-scenes :is(.home-scenes-image, .home-scenes-sprite, .home-scenes-spark),
	.home .home-scenes::after { animation: none; transition: none; }
	.home .home-scenes :is(.home-scenes-spark, .home-scenes-sprite-rocket, .home-scenes-sprite-drone),
	.home .home-scenes::after { display: none; }
}