/* HOME AI residents: presence, movement and direct reactions. */
.lab-site .lab-ai-residents {
	--lab-residents-viewport-left: 0px;
	--lab-residents-viewport-top: 0px;
	--lab-residents-viewport-width: 100vw;
	--lab-residents-viewport-height: 100vh;
	--lab-residents-viewport-height: 100dvh;
	--lab-resident-safe-top: env(safe-area-inset-top, 0px);
	--lab-resident-safe-bottom: env(safe-area-inset-bottom, 0px);
	position: fixed;
	z-index: 5;
	top: var(--lab-residents-viewport-top);
	left: var(--lab-residents-viewport-left);
	width: var(--lab-residents-viewport-width);
	height: var(--lab-residents-viewport-height);
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

.lab-site .lab-ai-resident {
	position: absolute;
	width: clamp(64px, 5.5vw, 84px);
	height: auto;
	aspect-ratio: 1;
	transform: translate3d(var(--lab-resident-x, 0), var(--lab-resident-y, 0), 0);
	transition: transform var(--lab-resident-walk-duration, 0ms) linear;
	opacity: 0;
	visibility: hidden;
}

.lab-site .lab-ai-resident.is-present {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	cursor: pointer;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.lab-site .lab-ai-resident.is-walking {
	will-change: transform;
}

.lab-site .lab-ai-resident img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	transform:
		translate3d(
			var(--lab-resident-event-shift-x, 0px),
			var(--lab-resident-event-shift-y, 0px),
			0
		)
		scaleX(var(--lab-resident-facing, 1))
		scale(var(--lab-resident-event-scale, 1));
	transform-origin: center center;
	transition: transform 160ms ease;
}

.lab-site .lab-ai-resident.is-facing-right img {
	--lab-resident-facing: -1;
}

.lab-site .lab-ai-resident.is-click-reacting img {
	animation: lab-ai-resident-click-reaction 900ms ease-in-out both;
}

.lab-site .lab-ai-resident.is-rapid-reacting img {
	animation: lab-ai-resident-rapid-reaction 420ms ease-in-out 3;
}

.lab-site .lab-ai-resident.is-giant img {
	transition-duration: 360ms;
	transition-timing-function: cubic-bezier(.2, .8, .2, 1);
	will-change: transform;
}

.lab-site .lab-ai-resident.is-giant {
	z-index: 10;
}

@keyframes lab-ai-resident-click-reaction {
	0%, 100% {
		transform:
			translate3d(0, 0, 0)
			scaleX(var(--lab-resident-facing, 1))
			scale(1);
	}
	45% {
		transform:
			translate3d(0, -7px, 0)
			scaleX(var(--lab-resident-facing, 1))
			scale(1.14);
	}
}

@keyframes lab-ai-resident-rapid-reaction {
	0%, 100% {
		transform:
			translate3d(-4px, 0, 0)
			scaleX(var(--lab-resident-facing, 1))
			scale(1.02);
	}
	50% {
		transform:
			translate3d(4px, -5px, 0)
			scaleX(var(--lab-resident-facing, 1))
			scale(1.16);
	}
}

.lab-site .lab-ai-resident--mofuo {
	top: 24%;
	left: max(6px, calc((100vw - 1420px) / 2));
}

@media (prefers-reduced-motion: reduce) {
	.lab-site .lab-ai-resident.is-click-reacting img,
	.lab-site .lab-ai-resident.is-rapid-reacting img {
		animation: none;
	}

	.lab-site .lab-ai-resident.is-giant img {
		transition-duration: 1ms;
	}
}

.lab-site .lab-ai-resident--nyanko {
	top: 41%;
	right: max(6px, calc((100vw - 1420px) / 2));
}

.lab-site .lab-ai-resident--meme {
	bottom: 23%;
	left: max(6px, calc((100vw - 1420px) / 2));
}

.lab-site .lab-ai-resident--tsuno {
	right: max(6px, calc((100vw - 1420px) / 2));
	bottom: 9%;
}

@media (max-width: 666px) and (orientation: portrait) {
	.lab-site .lab-ai-resident {
		width: 70px;
	}

	.lab-site .lab-ai-resident--mofuo {
		top: 17%;
		left: 2px;
	}

	.lab-site .lab-ai-resident--nyanko {
		top: 45%;
		right: 2px;
	}

	.lab-site .lab-ai-resident--meme {
		top: 58%;
		bottom: auto;
		left: 2px;
	}

	.lab-site .lab-ai-resident--tsuno {
		top: 82%;
		right: 2px;
		bottom: auto;
	}
}

@media (min-width: 667px) and (max-width: 932px) and (orientation: landscape) {
	.lab-site .lab-ai-resident {
		width: 54px;
	}

	.lab-site .lab-ai-resident--mofuo {
		top: 22%;
		left: 32%;
	}

	.lab-site .lab-ai-resident--nyanko {
		top: 43%;
		right: 4px;
	}

	.lab-site .lab-ai-resident--meme {
		top: 84%;
		bottom: auto;
		left: 4px;
	}

	.lab-site .lab-ai-resident--tsuno {
		top: 84%;
		right: 4px;
		bottom: auto;
	}
}