/* Progressive native motion: same original image, no video request. */
.hero-assembly {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.hero-assembly[hidden] { display: none; }
.is-motion-ready .hero-assembly[hidden] { display: block; }
.is-motion-ready > img { opacity: 0; }
.hero-assembly-board, .hero-assembly-lid, .hero-assembly-screen {
	transform-origin: 0 0;
	transform-box: view-box;
	animation-duration: 12s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}
.hero-assembly-board { animation-name: vmr-hero-board; }
.hero-assembly-lid { animation-name: vmr-hero-lid; }
.hero-assembly-screen { animation-name: vmr-hero-screen; }
.is-motion-playing .hero-assembly-board,
.is-motion-playing .hero-assembly-lid,
.is-motion-playing .hero-assembly-screen { animation-play-state: running; }
@keyframes vmr-hero-board {
	0%, 12%, 98%, 100% { transform: translateY(0); }
	30%, 86% { transform: translateY(112px); }
}
@keyframes vmr-hero-lid {
	0%, 20%, 94%, 100% { transform: matrix(1, 0, 0, 1, 0, 0); }
	44%, 80% { transform: matrix(.973, .0156, .0095, 1.074, -3.3, 254.9); }
}
@keyframes vmr-hero-screen {
	0%, 43%, 84%, 100% { opacity: 0; }
	47%, 78% { opacity: .32; }
}
/* Keep the explicitly requested continuous sequence on its twelve-second clock. */
@media (prefers-reduced-motion: reduce) {
	.hero-assembly-board,
	.hero-assembly-lid,
	.hero-assembly-screen,
	.hero-connectivity-part {
		animation-duration: 12s !important;
		animation-iteration-count: infinite !important;
	}
}

/* All parts share the same assembly clock. */
.hero-connectivity-part {
	transform-origin: 0 0;
	transform-box: view-box;
	animation-duration: 12s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}
.is-motion-playing .hero-connectivity-part { animation-play-state: running; }
.hero-phone-scene { animation-name: vmr-hero-phone; }
.hero-phone-linked { animation-name: vmr-hero-linked; }
.hero-wifi-wave-one { animation-name: vmr-hero-wave-one; }
.hero-wifi-wave-two { animation-name: vmr-hero-wave-two; }
.hero-wifi-wave-three { animation-name: vmr-hero-wave-three; }
@keyframes vmr-hero-phone {
	0%, 47% { opacity: 0; transform: translateY(12px); }
	52%, 76% { opacity: 1; transform: translateY(0); }
	80%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes vmr-hero-wave-one {
	0%, 50%, 77%, 100% { opacity: 0; }
	54%, 73% { opacity: 1; }
}
@keyframes vmr-hero-wave-two {
	0%, 54%, 77%, 100% { opacity: 0; }
	58%, 73% { opacity: .85; }
}
@keyframes vmr-hero-wave-three {
	0%, 58%, 77%, 100% { opacity: 0; }
	62%, 73% { opacity: .65; }
}
@keyframes vmr-hero-linked {
	0%, 62%, 78%, 100% { opacity: 0; }
	66%, 75% { opacity: 1; }
}