/* ==================================================

	Motion toggle

	Pause/play for auto-playing motion. Pausing hands the page the same stills and animation stops as prefers-reduced-motion; hidden while that preference is on, since nothing would be left to pause.

================================================== */

.motion-toggle {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: calc(var(--z-ice-cream) + 1);

	display: flex;
	align-items: center;
	justify-content: center;

	width:  24px;
	height: 24px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background-color: var(--deel-purple);

	color: var(--white);
	cursor: pointer;
}

.motion-toggle:hover {
	color: var(--deel-purple-light);
}

.motion-toggle__icon {
	display: block;

	width:  12px;
	height: 12px;
	margin-left: 0.5px;
}

.motion-toggle__icon--play {
	margin-left: 1px;
}

.motion-toggle__icon--play,
.is-motion-paused .motion-toggle__icon--pause {
	display: none;
}

.is-motion-paused .motion-toggle__icon--play {
	display: block;
}

@media ( prefers-reduced-motion: reduce ) {

	.motion-toggle {
		display: none;
	}

}

/* -------------------------------------
	=Mobile

	Tucked into the header card's empty corner: the card runs nearly edge to edge, so the page corner would straddle its rounded edge.
------------------------------------- */

@media ( max-width: 720px ) {

	.motion-toggle {
		display: none;

		top: 20px;
		right: 24px;

		width:  28px;
		height: 28px;
	}

	.motion-toggle:focus-visible {
		outline-color: var(--cream-warm);
	}

}