.spice-spin {
	display: block;
	width: var( --spin-size, 300px );
	aspect-ratio: 45 / 48;
	opacity: var( --spin-opacity, 0.1 );
	perspective: var( --spin-depth, 900px );
	perspective-origin: 48.941% 50.366%;
	pointer-events: none;
}

.spice-spin__turn {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: 48.941% 50.366%;
	animation: spice-spin var( --spin-dur, 14s ) linear infinite;
	will-change: transform;
}

.spice-spin__face {
	position: absolute;
	inset: 0;
	display: block;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-origin: 48.941% 50.366%;
}

.spice-spin__face--back {
	transform: rotateY( 180deg );
}

.spice-spin__face svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.spice-spin__face svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: var( --spin-stroke, 0.7 );
}

.spice-spin.is-offscreen .spice-spin__turn {
	animation-play-state: paused;
}

@keyframes spice-spin {
	to {
		transform: rotateY( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.spice-spin__turn {
		animation: none;
	}
}

.spice-spin-layer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.spice-spin-layer > .container {
	display: flex;
	align-items: center;
	height: 100%;
}

.spice-spin-layer--hero-right > .container {
	justify-content: flex-end;
}

@media ( max-width: 1024px ) {
	.spice-spin-layer {
		display: none;
	}
}