
.virtual-host {
	display: block;
	width: min(100%, 420px);
	height: 100%;
	margin: auto;
	overflow: visible;
}
.host-body {
	animation: host-breathe 5.4s ease-in-out infinite;
	transform-origin: 210px 420px;
}
.host-head {
	transform-box: view-box;
	transform-origin: 210px 244px;
}
.host-mouth {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
.speaking .host-mouth {
	opacity: 1;
	animation: host-speak 0.34s ease-in-out infinite alternate;
}
.host-eyes {
	animation: host-blink 6.3s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}
.idle .host-head {
	animation: host-idle-head 7.6s ease-in-out infinite;
}
.idle .host-body {
	animation: host-breathe 5.4s ease-in-out infinite, host-weight-shift 8.5s ease-in-out infinite;
}
.wave-arm,
.product-arm {
	transform-box: view-box;
}
.wave-arm {
	transform-origin: 302px 291px;
	animation: host-wave 7.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
.wave-wrist {
	transform-box: view-box;
	transform-origin: 367px 253px;
	animation: host-wrist 1.15s ease-in-out 1.15s 3;
}
.product-arm {
	transform-origin: 121px 294px;
	animation: host-present 5.2s cubic-bezier(.25, .8, .25, 1) infinite;
}
.present .host-body {
	animation: host-breathe 5.4s ease-in-out infinite, host-present-body 5.2s ease-in-out infinite;
}
.nod .host-head {
	animation: host-nod 5.4s cubic-bezier(.36, 0, .28, 1) infinite;
}
.nod-accent {
	animation: host-accent 5.4s ease-in-out infinite;
	transform-origin: center;
}
@keyframes host-wave {
	0%, 38%, 74%, 100% { transform: rotate(0); }
	8%, 20%, 32%, 84%, 96% { transform: rotate(-9deg); }
	14%, 26%, 90% { transform: rotate(8deg); }
}
@keyframes host-wrist {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(-13deg); }
}
@keyframes host-present {
	0%, 34%, 72%, 100% { transform: rotate(0); }
	14%, 82% { transform: rotate(-8deg); }
	24%, 90% { transform: rotate(3deg); }
}
@keyframes host-present-body {
	0%, 100% { transform: translateX(0) rotate(0); }
	20%, 72% { transform: translateX(-5px) rotate(-1deg); }
}
@keyframes host-nod {
	0%, 18%, 100% { transform: rotate(0); }
	23% { transform: rotate(2deg); }
	29% { transform: rotate(-7deg) translateY(4px); }
	35% { transform: rotate(2deg) translateY(-1px); }
	41% { transform: rotate(0); }
	64% { transform: rotate(-5deg) translateY(3px); }
	71% { transform: rotate(1deg); }
	77% { transform: rotate(0); }
}
@keyframes host-idle-head {
	0%, 100% { transform: rotate(0); }
	28% { transform: rotate(-1.3deg); }
	65% { transform: rotate(1.5deg); }
}
@keyframes host-weight-shift {
	0%, 100% { transform: translateY(0) translateX(0); }
	31% { transform: translateY(-2px) translateX(-2px); }
	67% { transform: translateY(0) translateX(2px); }
}
@keyframes host-breathe {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
@keyframes host-speak {
	from { transform: scaleY(.22); }
	to { transform: scaleY(1.18); }
}
@keyframes host-blink {
	0%, 42%, 46%, 100% { transform: scaleY(1); }
	44% { transform: scaleY(.12); }
	78%, 81% { transform: scaleY(.18); }
}
@keyframes host-accent {
	0%, 100% { opacity: 0; transform: translate(0, 0); }
	28%, 68% { opacity: .9; transform: translate(4px, 2px); }
}
@media (prefers-reduced-motion: reduce) {
	.host-body,
	.host-head,
	.host-eyes,
	.speaking .host-mouth,
	.wave-arm,
	.wave-wrist,
	.product-arm,
	.nod-accent {
		animation: none;
	}
	.wave-arm { opacity: 1; transform: rotate(0); }
	.product-arm { opacity: 1; transform: rotate(0); }
}
