/* ==========================================================================
   Klain - Animations | klain-animations.css
   ========================================================================== */

.klain-squares-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* Padding gives breathing room for accents orbiting outside the SVG bounds */
	padding: 12%;
	box-sizing: border-box;
}

.klain-squares-wrapper svg {
	width: 100%;
	height: auto;
	max-width: 570px;
	overflow: visible;
	display: block;
}

/* Blue frame — clockwise 8s */
#klain-frame-blue {
	transform-origin: 285px 292px;
	animation: klain-spin-cw 8s linear infinite;
}

/* Orange frame — clockwise 12s */
#klain-frame-orange {
	transform-origin: 285px 292px;
	animation: klain-spin-cw 12s linear infinite;
}

/* Accents group baseline — overridden by JS for CCW + mouse combo */
#klain-accents-group {
	transform-origin: 285px 292px;
}

@keyframes klain-spin-cw {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}