/* Homepage N9+ product motion.
 * Uses only the approved Nonagon N9+ device + smartphone artwork already stored
 * in the Dr. Miltie media library. No invented app screens or exam overlays. */
.dm-official-motion {
	position: relative;
	isolation: isolate;
	overflow: visible;
	background: #ffffff;
	border: 1px solid #dce6ef;
	border-radius: 2rem;
	padding: 1.25rem;
}

@media (min-width: 640px) {
	.dm-official-motion {
		padding: 2rem;
	}
}

.dm-official-stage {
	position: relative;
	min-height: clamp(430px, 46vw, 610px);
	border-radius: 1.55rem;
	overflow: hidden;
	background:
		radial-gradient(circle at 70% 25%, rgba(121, 208, 232, .28), transparent 29%),
		radial-gradient(circle at 26% 70%, rgba(104, 77, 183, .16), transparent 30%),
		linear-gradient(145deg, #f7fbff 0%, #eef7fb 48%, #f8f7fd 100%);
}

.dm-official-art-wrap {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 2.4rem);
}

.dm-official-product-art {
	position: relative;
	z-index: 5;
	display: block;
	width: min(93%, 560px);
	height: auto !important;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 24px 30px rgba(8, 38, 61, .16));
	transform-origin: 50% 58%;
	animation: dm-product-float 6.8s ease-in-out infinite;
}

.dm-official-halo {
	position: absolute;
	z-index: 1;
	left: 17%;
	top: 13%;
	width: 66%;
	aspect-ratio: 1;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(91, 180, 219, .25) 0%, rgba(91, 180, 219, .08) 48%, transparent 70%);
	filter: blur(2px);
	animation: dm-halo-breathe 7.5s ease-in-out infinite;
}

.dm-official-orbit {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	border: 1px solid rgba(15, 116, 168, .15);
	border-radius: 999px;
	pointer-events: none;
}

.dm-official-orbit::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(15, 116, 168, .42);
	box-shadow: 0 0 0 6px rgba(15, 116, 168, .07);
}

.dm-official-orbit-one {
	width: 72%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%) rotate(-12deg);
	animation: dm-orbit-drift-one 18s linear infinite;
}

.dm-official-orbit-one::after {
	right: 17%;
	top: 2%;
}

.dm-official-orbit-two {
	width: 56%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%) rotate(28deg);
	border-color: rgba(104, 77, 183, .13);
	animation: dm-orbit-drift-two 22s linear infinite;
}

.dm-official-orbit-two::after {
	left: 4%;
	bottom: 21%;
	background: rgba(104, 77, 183, .38);
	box-shadow: 0 0 0 6px rgba(104, 77, 183, .07);
}

.dm-official-sheen {
	position: absolute;
	z-index: 3;
	inset: -20% -35%;
	background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.48) 49%, rgba(255,255,255,.12) 57%, transparent 66%);
	transform: translateX(-38%) rotate(2deg);
	animation: dm-sheen-pass 8.5s ease-in-out infinite;
	pointer-events: none;
}

.dm-official-caption {
	position: absolute;
	z-index: 8;
	left: clamp(.8rem, 2vw, 1.3rem);
	bottom: clamp(.8rem, 2vw, 1.3rem);
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .62rem .78rem;
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 999px;
	background: rgba(255,255,255,.78);
	box-shadow: 0 10px 24px rgba(8,38,61,.09);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #08263d;
}

.dm-official-caption strong {
	font-size: .82rem;
	line-height: 1;
	color: #0f74a8;
}

.dm-official-caption span {
	font-size: .71rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .01em;
}

.dm-motion-toggle {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 30;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1px solid rgba(255, 255, 255, .72);
	border-radius: 999px;
	background: rgba(8, 38, 61, .84);
	color: #fff;
	padding: 7px 12px;
	font: inherit;
	font-size: .72rem;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	touch-action: manipulation;
	box-shadow: 0 8px 24px rgba(8, 38, 61, .16);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.dm-motion-toggle:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 3px #0f74a8, 0 8px 24px rgba(8, 38, 61, .16);
}

[data-dm-motion].is-paused .dm-official-product-art,
[data-dm-motion].is-paused .dm-official-halo,
[data-dm-motion].is-paused .dm-official-orbit-one,
[data-dm-motion].is-paused .dm-official-orbit-two,
[data-dm-motion].is-paused .dm-official-sheen,
[data-dm-motion].is-auto-paused .dm-official-product-art,
[data-dm-motion].is-auto-paused .dm-official-halo,
[data-dm-motion].is-auto-paused .dm-official-orbit-one,
[data-dm-motion].is-auto-paused .dm-official-orbit-two,
[data-dm-motion].is-auto-paused .dm-official-sheen {
	animation-play-state: paused;
}

@keyframes dm-product-float {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-.15deg) scale(1); }
	50% { transform: translate3d(0, -10px, 0) rotate(.2deg) scale(1.012); }
}

@keyframes dm-halo-breathe {
	0%, 100% { opacity: .72; transform: scale(.96); }
	50% { opacity: 1; transform: scale(1.05); }
}

@keyframes dm-orbit-drift-one {
	from { transform: translate(-50%, -50%) rotate(-12deg); }
	to { transform: translate(-50%, -50%) rotate(348deg); }
}

@keyframes dm-orbit-drift-two {
	from { transform: translate(-50%, -50%) rotate(28deg); }
	to { transform: translate(-50%, -50%) rotate(-332deg); }
}

@keyframes dm-sheen-pass {
	0%, 18% { transform: translateX(-42%) rotate(2deg); opacity: 0; }
	30% { opacity: .75; }
	48% { transform: translateX(42%) rotate(2deg); opacity: 0; }
	100% { transform: translateX(42%) rotate(2deg); opacity: 0; }
}

@media (max-width: 1023px) {
	.dm-official-stage {
		min-height: clamp(430px, 64vw, 590px);
	}
	.dm-official-product-art {
		width: min(88%, 530px);
	}
}

@media (max-width: 767px) {
	.dm-official-stage {
		min-height: clamp(360px, 105vw, 500px);
		border-radius: 1.25rem;
	}
	.dm-official-art-wrap {
		padding: 1.25rem .75rem 2.4rem;
	}
	.dm-official-product-art {
		width: min(94%, 430px);
	}
	.dm-motion-toggle {
		right: 10px;
		bottom: 10px;
		padding: 6px 9px;
		font-size: .68rem;
	}
	.dm-official-caption {
		left: 10px;
		bottom: 10px;
		max-width: calc(100% - 122px);
	}
	.dm-official-caption span {
		font-size: .64rem;
	}
}

@media (max-width: 520px) {
	.dm-official-stage {
		min-height: 345px;
	}
	.dm-official-orbit-one { width: 86%; }
	.dm-official-orbit-two { width: 68%; }
	.dm-official-caption span { display: none; }
	.dm-official-caption { padding: .58rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dm-official-product-art,
	.dm-official-halo,
	.dm-official-orbit-one,
	.dm-official-orbit-two,
	.dm-official-sheen {
		animation: none !important;
	}
	.dm-official-product-art { transform: none; }
	.dm-motion-toggle { display: none; }
}

@media (forced-colors: active) {
	.dm-official-motion,
	.dm-official-stage,
	.dm-official-caption {
		border-color: CanvasText;
		background: Canvas;
		color: CanvasText;
	}

	.dm-official-halo,
	.dm-official-sheen {
		display: none;
	}

	.dm-official-orbit,
	.dm-official-orbit::after {
		border-color: CanvasText;
		background: CanvasText;
		box-shadow: none;
	}

	.dm-motion-toggle {
		border-color: ButtonText;
		background: ButtonFace;
		color: ButtonText;
		box-shadow: none;
	}

	.dm-motion-toggle:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 3px;
		box-shadow: none;
	}
}