/* Backward-compatibility aliases for legacy cps-* classes */
.acls-overlay { position: fixed; inset: 0; width: 100%; height: 100%; }
.cps-spinner { display: inline-block; position: relative; }
/*
 * CP Spinners - Public Stylesheet
 *
 * Frontend overlay and spinner animation styles for CP Spinners.
 *
 * @package CP_Spinners
 */

/* ==========================================================================
	SECTION 1: Core Overlay Layout
	========================================================================== */

#acls-overlay,
.acls-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--acls-overlay-color, rgba(255, 255, 255, 0.85));
	background-attachment: scroll;
	opacity: 1;
	pointer-events: all;
	transition: opacity 400ms ease, backdrop-filter 400ms ease, background-color 400ms ease;
}

#acls-overlay.acls-hidden,
.acls-overlay.acls-hidden {
	display: none;
}

#acls-overlay.acls-hiding,
.acls-overlay.acls-hiding {
	opacity: 0;
	pointer-events: none;
}

#acls-overlay.acls-visible,
.acls-overlay.acls-visible {
	opacity: 1;
}

/* Ensure background always scrolls with the page */
#acls-overlay,
.acls-overlay,
body.acls-loading {
	background-attachment: scroll;
}

/* Overlay opacity classes used by public/js/cps-public.js. */
#acls-overlay.acls-opacity-20,
.acls-overlay.acls-opacity-20 {
	background: rgba(255, 255, 255, 0.2);
}

#acls-overlay.acls-opacity-40,
.acls-overlay.acls-opacity-40 {
	background: rgba(255, 255, 255, 0.4);
}

#acls-overlay.acls-opacity-60,
.acls-overlay.acls-opacity-60 {
	background: rgba(255, 255, 255, 0.6);
}

#acls-overlay.acls-opacity-80,
.acls-overlay.acls-opacity-80 {
	background: rgba(255, 255, 255, 0.8);
}

#acls-overlay.acls-opacity-100,
.acls-overlay.acls-opacity-100 {
	background: rgba(255, 255, 255, 1);
}

/* Overlay blur classes used by public/js/cps-public.js. */
#acls-overlay.acls-blur-0,
.acls-overlay.acls-blur-0 {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

#acls-overlay.acls-blur-sm,
.acls-overlay.acls-blur-sm {
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

#acls-overlay.acls-blur-md,
.acls-overlay.acls-blur-md {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

#acls-overlay.acls-blur-lg,
.acls-overlay.acls-blur-lg {
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Fade speed classes used by public/js/cps-public.js. */
#acls-overlay.acls-fade-fast,
.acls-overlay.acls-fade-fast {
	transition-duration: 150ms;
}

#acls-overlay.acls-fade-normal,
.acls-overlay.acls-fade-normal {
	transition-duration: 400ms;
}

#acls-overlay.acls-fade-slow,
.acls-overlay.acls-fade-slow {
	transition-duration: 900ms;
}

/* Z-index classes used by public/js/cps-public.js. */
#acls-overlay.acls-z-normal,
.acls-overlay.acls-z-normal {
	z-index: 99999;
}

#acls-overlay.acls-z-high,
.acls-overlay.acls-z-high {
	z-index: 999999;
}

#acls-overlay.acls-z-max,
.acls-overlay.acls-z-max {
	z-index: 2147483647;
}

/* Backdrop fallback for browsers without backdrop-filter support. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#acls-overlay.acls-blur-sm,
	#acls-overlay.acls-blur-md,
	#acls-overlay.acls-blur-lg,
	.acls-overlay.acls-blur-sm,
	.acls-overlay.acls-blur-md,
	.acls-overlay.acls-blur-lg {
		background: rgba(255, 255, 255, 0.92);
	}
}

/* ==========================================================================
	SECTION 2: Spinner Wrapper, Sizing, and Color Classes
	========================================================================== */

.acls-spinner-wrap {
	--acls-color: #4f46e5;
	--acls-secondary: #e0e7ff;
	--acls-size: 60px;
	--acls-shadow: rgba(0, 0, 0, 0.18);

	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
	max-height: 90vh;
	filter: drop-shadow(0 8px 12px var(--acls-shadow));
}

.acls-spinner-wrap,
.acls-spinner-wrap *,
.acls-spinner-wrap *::before,
.acls-spinner-wrap *::after {
	box-sizing: border-box;
}

.acls-size-xs {
	--acls-size: 28px;
}

.acls-size-sm {
	--acls-size: 44px;
}

.acls-size-md {
	--acls-size: 60px;
}

.acls-size-lg {
	--acls-size: 88px;
}

.acls-size-xl {
	--acls-size: 120px;
}

.acls-primary-default,
.acls-primary-indigo {
	--acls-color: #4f46e5;
}

.acls-primary-soft-indigo {
	--acls-color: #e0e7ff;
}

.acls-primary-white {
	--acls-color: #ffffff;
}

.acls-primary-black {
	--acls-color: #000000;
}

.acls-secondary-default,
.acls-secondary-soft-indigo {
	--acls-secondary: #e0e7ff;
}

.acls-secondary-indigo {
	--acls-secondary: #4f46e5;
}

.acls-secondary-white {
	--acls-secondary: #ffffff;
}

.acls-secondary-black {
	--acls-secondary: #000000;
}

.acls-spinner {
	display: inline-block;
}

/* ==========================================================================
	SECTION 3: Spinner - Ring
	========================================================================== */

.acls-ring {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
}

.acls-ring div {
	position: absolute;
	display: block;
	width: 80%;
	height: 80%;
	margin: 10%;
	border: calc(var(--acls-size) * 0.1) solid transparent;
	border-top-color: var(--acls-color);
	border-radius: 50%;
	animation: cps-ring-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.acls-ring div:nth-child(1) {
	animation-delay: -0.45s;
}

.acls-ring div:nth-child(2) {
	animation-delay: -0.3s;
}

.acls-ring div:nth-child(3) {
	animation-delay: -0.15s;
}

@keyframes cps-ring-spin {
	0% {
		transform: rotate(0deg) translateZ(0);
	}

	100% {
		transform: rotate(360deg) translateZ(0);
	}
}

/* ==========================================================================
	SECTION 4: Spinner - Dual Ring
	========================================================================== */

.acls-dual-ring {
	width: var(--acls-size);
	height: var(--acls-size);
	border: calc(var(--acls-size) * 0.1) solid var(--acls-secondary);
	border-top-color: var(--acls-color);
	border-bottom-color: var(--acls-color);
	border-radius: 50%;
	animation: cps-dual-ring-spin 0.9s linear infinite;
}

@keyframes cps-dual-ring-spin {
	to {
		transform: rotate(360deg) translateZ(0);
	}
}

/* ==========================================================================
	SECTION 5: Spinner - Circle
	========================================================================== */

.acls-circle {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
}

.acls-circle .acls-c {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.acls-circle .acls-c::before {
	content: "";
	display: block;
	width: 15%;
	height: 15%;
	margin: 0 auto;
	background: var(--acls-color);
	border-radius: 50%;
	animation: cps-circle-fade 1.2s ease-in-out infinite both;
}

.acls-circle .acls-circle2 {
	transform: rotate(30deg);
}

.acls-circle .acls-circle3 {
	transform: rotate(60deg);
}

.acls-circle .acls-circle4 {
	transform: rotate(90deg);
}

.acls-circle .acls-circle5 {
	transform: rotate(120deg);
}

.acls-circle .acls-circle6 {
	transform: rotate(150deg);
}

.acls-circle .acls-circle7 {
	transform: rotate(180deg);
}

.acls-circle .acls-circle8 {
	transform: rotate(210deg);
}

.acls-circle .acls-circle9 {
	transform: rotate(240deg);
}

.acls-circle .acls-circle10 {
	transform: rotate(270deg);
}

.acls-circle .acls-circle11 {
	transform: rotate(300deg);
}

.acls-circle .acls-circle12 {
	transform: rotate(330deg);
}

.acls-circle .acls-circle2::before {
	animation-delay: -1.1s;
}

.acls-circle .acls-circle3::before {
	animation-delay: -1s;
}

.acls-circle .acls-circle4::before {
	animation-delay: -0.9s;
}

.acls-circle .acls-circle5::before {
	animation-delay: -0.8s;
}

.acls-circle .acls-circle6::before {
	animation-delay: -0.7s;
}

.acls-circle .acls-circle7::before {
	animation-delay: -0.6s;
}

.acls-circle .acls-circle8::before {
	animation-delay: -0.5s;
}

.acls-circle .acls-circle9::before {
	animation-delay: -0.4s;
}

.acls-circle .acls-circle10::before {
	animation-delay: -0.3s;
}

.acls-circle .acls-circle11::before {
	animation-delay: -0.2s;
}

.acls-circle .acls-circle12::before {
	animation-delay: -0.1s;
}

@keyframes cps-circle-fade {
	0%,
	39%,
	100% {
		opacity: 0.18;
		transform: scale(0.55);
	}

	40% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ==========================================================================
	SECTION 6: Spinner - Dots
	========================================================================== */

.acls-dots,
.acls-pulse-dots,
.acls-wave-dots,
.acls-rainbow-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--acls-size);
}

.acls-dots {
	gap: calc(var(--acls-size) * 0.15);
}

.acls-dots div {
	width: calc(var(--acls-size) * 0.25);
	height: calc(var(--acls-size) * 0.25);
	background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--acls-color) 38%, var(--acls-color) 100%);
	border-radius: 50%;
	animation: cps-dots-bounce 1.4s ease-in-out infinite both;
}

.acls-dots div:nth-child(1) {
	animation-delay: -0.32s;
}

.acls-dots div:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes cps-dots-bounce {
	0%,
	80%,
	100% {
		transform: scale(0) translateY(0);
	}

	40% {
		transform: scale(1) translateY(-10px);
	}
}

.acls-pulse-dots {
	gap: calc(var(--acls-size) * 0.12);
}

.acls-pulse-dots span {
	display: block;
	width: calc(var(--acls-size) * 0.22);
	height: calc(var(--acls-size) * 0.22);
	background: var(--acls-color);
	border-radius: 50%;
	animation: cps-pulse 1.4s ease-in-out infinite;
}

.acls-pulse-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

.acls-pulse-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes cps-pulse {
	0%,
	100% {
		opacity: 0.4;
		transform: scale(0.6);
	}

	50% {
		opacity: 1;
		transform: scale(1);
	}
}

.acls-wave-dots {
	gap: calc(var(--acls-size) * 0.1);
}

.acls-wave-dots div {
	width: calc(var(--acls-size) * 0.18);
	height: calc(var(--acls-size) * 0.18);
	background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--acls-color) 42%, var(--acls-color) 100%);
	border-radius: 50%;
	animation: cps-wave 1.4s ease-in-out infinite;
}

.acls-wave-dots div:nth-child(1) {
	animation-delay: 0s;
}

.acls-wave-dots div:nth-child(2) {
	animation-delay: 0.14s;
}

.acls-wave-dots div:nth-child(3) {
	animation-delay: 0.28s;
}

.acls-wave-dots div:nth-child(4) {
	animation-delay: 0.42s;
}

.acls-wave-dots div:nth-child(5) {
	animation-delay: 0.56s;
}

@keyframes cps-wave {
	0%,
	60%,
	100% {
		transform: translateY(0);
	}

	30% {
		transform: translateY(calc(var(--acls-size) * -0.4));
	}
}

/* ==========================================================================
	SECTION 7: Spinner - Dot Spin
	========================================================================== */

.acls-dot-spin {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
}

.acls-dot-spin .acls-ds-circle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.acls-dot-spin .acls-ds-circle::before {
	content: "";
	display: block;
	width: 15%;
	height: 15%;
	margin: 0 auto;
	background: var(--acls-color);
	border-radius: 50%;
	animation: cps-ds-fade 1.2s ease-in-out infinite both;
}

.acls-dot-spin .acls-ds-circle2 {
	transform: rotate(45deg);
}

.acls-dot-spin .acls-ds-circle3 {
	transform: rotate(90deg);
}

.acls-dot-spin .acls-ds-circle4 {
	transform: rotate(135deg);
}

.acls-dot-spin .acls-ds-circle5 {
	transform: rotate(180deg);
}

.acls-dot-spin .acls-ds-circle6 {
	transform: rotate(225deg);
}

.acls-dot-spin .acls-ds-circle7 {
	transform: rotate(270deg);
}

.acls-dot-spin .acls-ds-circle8 {
	transform: rotate(315deg);
}

.acls-dot-spin .acls-ds-circle2::before {
	animation-delay: -1.1s;
}

.acls-dot-spin .acls-ds-circle3::before {
	animation-delay: -1s;
}

.acls-dot-spin .acls-ds-circle4::before {
	animation-delay: -0.9s;
}

.acls-dot-spin .acls-ds-circle5::before {
	animation-delay: -0.8s;
}

.acls-dot-spin .acls-ds-circle6::before {
	animation-delay: -0.7s;
}

.acls-dot-spin .acls-ds-circle7::before {
	animation-delay: -0.6s;
}

.acls-dot-spin .acls-ds-circle8::before {
	animation-delay: -0.5s;
}

@keyframes cps-ds-fade {
	0%,
	39%,
	100% {
		opacity: 0.15;
		transform: scale(0.8);
	}

	40% {
		opacity: 1;
		transform: scale(1.1);
	}
}

/* ==========================================================================
	SECTION 8: Spinner - Bars and Equalizer
	========================================================================== */

.acls-bars,
.acls-equalizer,
.acls-music-bars {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: var(--acls-size);
}

.acls-bars,
.acls-equalizer {
	gap: calc(var(--acls-size) * 0.07);
}

.acls-bars div {
	width: calc(var(--acls-size) * 0.12);
	background: linear-gradient(to top, var(--acls-color), #ffffff);
	border-radius: 4px;
	animation: cps-bars-wave 1.2s ease-in-out infinite;
	transform-origin: bottom center;
}

.acls-bars div:nth-child(1) {
	height: 40%;
	animation-delay: 0s;
}

.acls-bars div:nth-child(2) {
	height: 60%;
	animation-delay: 0.1s;
}

.acls-bars div:nth-child(3) {
	height: 100%;
	animation-delay: 0.2s;
}

.acls-bars div:nth-child(4) {
	height: 60%;
	animation-delay: 0.3s;
}

.acls-bars div:nth-child(5) {
	height: 40%;
	animation-delay: 0.4s;
}

@keyframes cps-bars-wave {
	0%,
	100% {
		opacity: 0.5;
		transform: scaleY(0.5);
	}

	50% {
		opacity: 1;
		transform: scaleY(1);
	}
}

.acls-equalizer span {
	display: block;
	width: calc(var(--acls-size) * 0.12);
	background: var(--acls-color);
	border-radius: 4px 4px 0 0;
	animation: cps-eq 1s ease-in-out infinite alternate;
	transform-origin: bottom center;
}

.acls-equalizer span:nth-child(1) {
	height: 50%;
	animation-delay: 0s;
}

.acls-equalizer span:nth-child(2) {
	height: 80%;
	animation-delay: 0.15s;
}

.acls-equalizer span:nth-child(3) {
	height: 100%;
	animation-delay: 0.3s;
}

.acls-equalizer span:nth-child(4) {
	height: 70%;
	animation-delay: 0.45s;
}

.acls-equalizer span:nth-child(5) {
	height: 40%;
	animation-delay: 0.6s;
}

@keyframes cps-eq {
	from {
		transform: scaleY(0.3);
	}

	to {
		transform: scaleY(1);
	}
}

/* ==========================================================================
	SECTION 9: Spinner - Ripple and Roller
	========================================================================== */

.acls-ripple,
.acls-roller {
	position: relative;
	display: inline-block;
	width: var(--acls-size);
	height: var(--acls-size);
}

.acls-ripple div {
	position: absolute;
	border: calc(var(--acls-size) * 0.067) solid var(--acls-color);
	border-radius: 50%;
	animation: cps-ripple-anim 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.acls-ripple div:nth-child(2) {
	animation-delay: -0.5s;
}

@keyframes cps-ripple-anim {
	0% {
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		opacity: 1;
	}

	100% {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
}

.acls-roller div {
	animation: cps-roller-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: calc(var(--acls-size) * 0.5) calc(var(--acls-size) * 0.5);
}

.acls-roller div::after {
	content: "";
	position: absolute;
	display: block;
	width: 9%;
	height: 9%;
	margin: -4.5% 0 0 -4.5%;
	background: var(--acls-color);
	border-radius: 50%;
}

.acls-roller div:nth-child(1) {
	animation-delay: -0.036s;
}

.acls-roller div:nth-child(1)::after {
	top: 79%;
	left: 79%;
}

.acls-roller div:nth-child(2) {
	animation-delay: -0.072s;
}

.acls-roller div:nth-child(2)::after {
	top: 85%;
	left: 68%;
}

.acls-roller div:nth-child(3) {
	animation-delay: -0.108s;
}

.acls-roller div:nth-child(3)::after {
	top: 88%;
	left: 55%;
}

.acls-roller div:nth-child(4) {
	animation-delay: -0.144s;
}

.acls-roller div:nth-child(4)::after {
	top: 85%;
	left: 43%;
}

.acls-roller div:nth-child(5) {
	animation-delay: -0.18s;
}

.acls-roller div:nth-child(5)::after {
	top: 79%;
	left: 31%;
}

.acls-roller div:nth-child(6) {
	animation-delay: -0.216s;
}

.acls-roller div:nth-child(6)::after {
	top: 68%;
	left: 21%;
}

.acls-roller div:nth-child(7) {
	animation-delay: -0.252s;
}

.acls-roller div:nth-child(7)::after {
	top: 55%;
	left: 17%;
}

.acls-roller div:nth-child(8) {
	animation-delay: -0.288s;
}

.acls-roller div:nth-child(8)::after {
	top: 43%;
	left: 21%;
}

@keyframes cps-roller-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
	SECTION 10: Spinner - Shapes
	========================================================================== */

.acls-hourglass,
.acls-flip,
.acls-gradient-ring,
.acls-color-wheel,
.acls-hourglass-color,
.acls-gear {
	display: inline-block;
	width: var(--acls-size);
	height: var(--acls-size);
}

.acls-hourglass {
	border: calc(var(--acls-size) * 0.1) solid transparent;
	border-top-color: var(--acls-color);
	border-bottom-color: var(--acls-color);
	border-radius: 50%;
	animation: cps-hourglass-spin 1.4s linear infinite;
}

@keyframes cps-hourglass-spin {
	0% {
		border-top-color: var(--acls-color);
		transform: rotate(0deg);
	}

	50% {
		border-top-color: var(--acls-secondary);
		transform: rotate(180deg);
	}

	100% {
		border-top-color: var(--acls-color);
		transform: rotate(360deg);
	}
}

.acls-heart {
	position: relative;
	display: inline-block;
	width: var(--acls-size);
	height: var(--acls-size);
	transform: rotate(-45deg);
	animation: cps-heart-pulse 1.2s ease-in-out infinite;
}

.acls-heart div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--acls-color);
}

.acls-heart::before,
.acls-heart::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--acls-color);
	border-radius: 50%;
}

.acls-heart::before {
	top: -50%;
	left: 0;
}

.acls-heart::after {
	top: 0;
	left: 50%;
}

@keyframes cps-heart-pulse {
	0%,
	100% {
		transform: rotate(-45deg) scale(0.85);
	}

	50% {
		transform: rotate(-45deg) scale(1.05);
	}
}

.acls-square-spin {
	width: var(--acls-size);
	height: var(--acls-size);
	perspective: 300px;
}

.acls-square-spin div {
	width: 80%;
	height: 80%;
	margin: 10%;
	background: linear-gradient(135deg, var(--acls-color), var(--acls-secondary));
	border-radius: 8px;
	animation: cps-sq-flip 2s ease-in-out infinite;
	transform-style: preserve-3d;
}

@keyframes cps-sq-flip {
	0% {
		transform: rotateX(0) rotateY(0);
	}

	50% {
		transform: rotateX(-180deg) rotateY(0);
	}

	100% {
		transform: rotateX(-180deg) rotateY(-180deg);
	}
}

.acls-fold {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	transform: rotateZ(45deg);
}

.acls-fold .acls-f {
	position: relative;
	float: left;
	width: 50%;
	height: 50%;
	transform: scale(1.1);
}

.acls-fold .acls-f::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--acls-color);
	animation: cps-fold-anim 2.4s infinite linear both;
	transform-origin: 100% 100%;
}

.acls-fold .acls-fold2 {
	transform: scale(1.1) rotateZ(90deg);
}

.acls-fold .acls-fold3 {
	transform: scale(1.1) rotateZ(180deg);
}

.acls-fold .acls-fold4 {
	transform: scale(1.1) rotateZ(270deg);
}

.acls-fold .acls-fold2::before {
	animation-delay: 0.3s;
}

.acls-fold .acls-fold3::before {
	animation-delay: 0.6s;
}

.acls-fold .acls-fold4::before {
	animation-delay: 0.9s;
}

@keyframes cps-fold-anim {
	0%,
	10% {
		opacity: 0;
		transform: perspective(140px) rotateX(-180deg);
	}

	25%,
	75% {
		opacity: 1;
		transform: perspective(140px) rotateX(0deg);
	}

	90%,
	100% {
		opacity: 0;
		transform: perspective(140px) rotateY(180deg);
	}
}

.acls-orbit {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	border: calc(var(--acls-size) * 0.05) solid var(--acls-secondary);
	border-radius: 50%;
	animation: cps-orbit-spin 1.5s linear infinite;
}

.acls-orbit-inner {
	position: absolute;
	top: calc(50% - calc(var(--acls-size) * 0.1));
	left: calc(var(--acls-size) * -0.12);
	width: calc(var(--acls-size) * 0.2);
	height: calc(var(--acls-size) * 0.2);
	background: var(--acls-color);
	border-radius: 50%;
}

@keyframes cps-orbit-spin {
	to {
		transform: rotate(360deg);
	}
}

.acls-flip {
	width: calc(var(--acls-size) * 0.7);
	height: calc(var(--acls-size) * 0.7);
	background: linear-gradient(135deg, var(--acls-color), var(--acls-secondary));
	border-radius: 8px;
	animation: cps-flip-anim 1.2s ease-in-out infinite;
}

@keyframes cps-flip-anim {
	0% {
		transform: perspective(250px) rotateX(0) rotateY(0);
	}

	33% {
		transform: perspective(250px) rotateX(-180deg) rotateY(0);
	}

	66% {
		transform: perspective(250px) rotateX(-180deg) rotateY(-180deg);
	}

	100% {
		transform: perspective(250px) rotateX(-360deg) rotateY(-180deg);
	}
}

.acls-bounce {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
}

.acls-bounce div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--acls-color);
	border-radius: 50%;
	opacity: 0.6;
	animation: cps-bounce-anim 2s ease-in-out infinite;
}

.acls-bounce div:nth-child(2) {
	animation-delay: -1s;
}

@keyframes cps-bounce-anim {
	0%,
	100% {
		opacity: 0;
		transform: scale(0);
	}

	50% {
		opacity: 0.8;
		transform: scale(1);
	}
}

/* ==========================================================================
	SECTION 11: Spinner - Gradient, Chase, and Grid Shapes
	========================================================================== */

.acls-gradient-ring {
	border-radius: 50%;
	background: conic-gradient(var(--acls-color) 0deg, var(--acls-secondary) 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - calc(var(--acls-size) * 0.12)), #000 0);
	mask: radial-gradient(farthest-side, transparent calc(100% - calc(var(--acls-size) * 0.12)), #000 0);
	animation: cps-gradient-ring-spin 0.9s linear infinite;
}

@supports not ((mask: radial-gradient(#000, transparent)) or (-webkit-mask: radial-gradient(#000, transparent))) {
	.acls-gradient-ring,
	.acls-color-wheel {
		border: calc(var(--acls-size) * 0.1) solid var(--acls-secondary);
		border-top-color: var(--acls-color);
		background: transparent;
	}
}

@keyframes cps-gradient-ring-spin {
	to {
		transform: rotate(360deg);
	}
}

.acls-chase {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	animation: cps-chase-rotate 2.5s infinite linear both;
}

.acls-chase-dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: cps-chase-follow 2.5s infinite ease-in-out both;
}

.acls-chase-dot::before {
	content: "";
	display: block;
	width: 25%;
	height: 25%;
	background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--acls-color) 42%, var(--acls-color) 100%);
	border-radius: 50%;
	animation: cps-chase-dot-size 2.5s infinite ease-in-out both;
}

.acls-chase-dot:nth-child(1),
.acls-chase-dot:nth-child(1)::before {
	animation-delay: -1.1s;
}

.acls-chase-dot:nth-child(2),
.acls-chase-dot:nth-child(2)::before {
	animation-delay: -1s;
}

.acls-chase-dot:nth-child(3),
.acls-chase-dot:nth-child(3)::before {
	animation-delay: -0.9s;
}

.acls-chase-dot:nth-child(4),
.acls-chase-dot:nth-child(4)::before {
	animation-delay: -0.8s;
}

.acls-chase-dot:nth-child(5),
.acls-chase-dot:nth-child(5)::before {
	animation-delay: -0.7s;
}

.acls-chase-dot:nth-child(6),
.acls-chase-dot:nth-child(6)::before {
	animation-delay: -0.6s;
}

@keyframes cps-chase-rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes cps-chase-follow {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes cps-chase-dot-size {
	80%,
	100% {
		transform: scale(0);
	}
}

.acls-cube-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5%;
	width: var(--acls-size);
	height: var(--acls-size);
}

.acls-cube-grid div {
	background: linear-gradient(135deg, var(--acls-secondary), var(--acls-color));
	border-radius: 4px;
	animation: cps-cube-grid-anim 1.5s infinite ease-in-out;
}

.acls-cube-grid div:nth-child(1) {
	animation-delay: 0.2s;
}

.acls-cube-grid div:nth-child(2),
.acls-cube-grid div:nth-child(4) {
	animation-delay: 0.3s;
}

.acls-cube-grid div:nth-child(3),
.acls-cube-grid div:nth-child(5),
.acls-cube-grid div:nth-child(7) {
	animation-delay: 0.4s;
}

.acls-cube-grid div:nth-child(6),
.acls-cube-grid div:nth-child(8) {
	animation-delay: 0.5s;
}

.acls-cube-grid div:nth-child(9) {
	animation-delay: 0.6s;
}

@keyframes cps-cube-grid-anim {
	0%,
	70%,
	100% {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}

	35% {
		opacity: 0;
		transform: scale3d(0, 0, 1);
	}
}

.acls-diamond-fold {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	transform: rotate(45deg);
}

.acls-diamond-fold div {
	position: absolute;
	width: 50%;
	height: 50%;
	background: var(--acls-color);
	animation: cps-diamond-fold-anim 1.5s infinite linear;
	transform-origin: 100% 100%;
}

.acls-diamond-fold div:nth-child(1) {
	top: 0;
	left: 0;
}

.acls-diamond-fold div:nth-child(2) {
	top: 0;
	right: 0;
	animation-delay: 0.3s;
	transform-origin: 0 100%;
}

.acls-diamond-fold div:nth-child(3) {
	right: 0;
	bottom: 0;
	animation-delay: 0.6s;
	transform-origin: 0 0;
}

.acls-diamond-fold div:nth-child(4) {
	bottom: 0;
	left: 0;
	animation-delay: 0.9s;
	transform-origin: 100% 0;
}

@keyframes cps-diamond-fold-anim {
	0%,
	10% {
		opacity: 0;
		transform: perspective(140px) rotateX(-180deg);
	}

	25%,
	75% {
		opacity: 1;
		transform: perspective(140px) rotateX(0deg);
	}

	90%,
	100% {
		opacity: 0;
		transform: perspective(140px) rotateY(180deg);
	}
}

/* ==========================================================================
	SECTION 12: Spinner - Indicators
	========================================================================== */

.acls-gear {
	position: relative;
	background: var(--acls-color);
	border-radius: 50%;
	animation: cps-gear-spin 4s linear infinite;
	-webkit-mask: radial-gradient(circle, transparent 30%, #000 32%), repeating-conic-gradient(#000 0deg, #000 15deg, transparent 15deg, transparent 30deg);
	mask: radial-gradient(circle, transparent 30%, #000 32%), repeating-conic-gradient(#000 0deg, #000 15deg, transparent 15deg, transparent 30deg);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

@supports not ((mask: radial-gradient(#000, transparent)) or (-webkit-mask: radial-gradient(#000, transparent))) {
	.acls-gear {
		border: calc(var(--acls-size) * 0.12) dashed var(--acls-color);
		background: transparent;
	}
}

@keyframes cps-gear-spin {
	to {
		transform: rotate(360deg);
	}
}

.acls-sun {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	animation: cps-gear-spin 10s linear infinite;
}

.acls-sun div {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 10%;
	margin: auto;
	background: var(--acls-color);
	border-radius: 4px;
}

.acls-sun div:nth-child(2) {
	transform: rotate(45deg);
}

.acls-sun div:nth-child(3) {
	transform: rotate(90deg);
}

.acls-sun div:nth-child(4) {
	transform: rotate(135deg);
}

.acls-sun::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 60%;
	height: 60%;
	margin: auto;
	background: var(--acls-secondary);
	border-radius: 50%;
}

.acls-clock {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	background: radial-gradient(circle, #ffffff, #f9fafb);
	border: calc(var(--acls-size) * 0.08) solid var(--acls-color);
	border-radius: 50%;
}

.acls-clock::before,
.acls-clock::after {
	content: "";
	position: absolute;
	bottom: 50%;
	left: 50%;
	background: var(--acls-color);
	border-radius: 4px;
	transform: translateX(-50%);
	transform-origin: bottom center;
}

.acls-clock::before {
	width: 4px;
	height: 35%;
	animation: cps-clock-spin 6s linear infinite;
}

.acls-clock::after {
	width: 3px;
	height: 45%;
	animation: cps-clock-spin 0.5s linear infinite;
}

@keyframes cps-clock-spin {
	to {
		transform: translateX(-50%) rotate(360deg);
	}
}

.acls-target {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
}

.acls-target div {
	position: absolute;
	top: 50%;
	left: 50%;
	border: calc(var(--acls-size) * 0.05) solid var(--acls-color);
	border-radius: 50%;
	animation: cps-target-anim 2s infinite ease-in-out alternate;
	transform: translate(-50%, -50%);
}

.acls-target div:nth-child(1) {
	width: 100%;
	height: 100%;
	animation-delay: 0s;
}

.acls-target div:nth-child(2) {
	width: 66%;
	height: 66%;
	animation-delay: 0.2s;
}

.acls-target div:nth-child(3) {
	width: 33%;
	height: 33%;
	background: var(--acls-color);
	animation-delay: 0.4s;
}

@keyframes cps-target-anim {
	0% {
		opacity: 0.5;
		transform: translate(-50%, -50%) scale(0.8);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.acls-radar {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	overflow: hidden;
	border: 2px solid var(--acls-secondary);
	border-radius: 50%;
}

.acls-radar div {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	background: conic-gradient(transparent 0deg, var(--acls-color) 90deg);
	animation: cps-radar-sweep 2s linear infinite;
	transform-origin: bottom left;
}

@keyframes cps-radar-sweep {
	to {
		transform: rotate(360deg);
	}
}

.acls-wifi {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: var(--acls-size);
	height: var(--acls-size);
	overflow: hidden;
}

.acls-wifi div {
	border: calc(var(--acls-size) * 0.08) solid transparent;
	border-top-color: var(--acls-color);
	border-radius: 50%;
	animation: cps-wifi-anim 1.5s infinite;
}

.acls-wifi div:nth-child(1) {
	width: 100%;
	height: 50%;
	animation-delay: 0.4s;
}

.acls-wifi div:nth-child(2) {
	width: 60%;
	height: 30%;
	margin-top: -30%;
	animation-delay: 0.2s;
}

.acls-wifi div:nth-child(3) {
	width: 20%;
	height: 10%;
	margin-top: -15%;
	background: var(--acls-color);
	animation-delay: 0s;
}

@keyframes cps-wifi-anim {
	0%,
	100% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}
}

.acls-heartbeat {
	width: calc(var(--acls-size) * 1.5);
	height: var(--acls-size);
	background: linear-gradient(
		to right,
		transparent 20%,
		var(--acls-color) 20%,
		var(--acls-color) 25%,
		transparent 25%,
		transparent 40%,
		var(--acls-color) 40%,
		var(--acls-color) 45%,
		transparent 45%,
		transparent 60%,
		var(--acls-color) 60%,
		var(--acls-color) 65%,
		transparent 65%,
		transparent 80%,
		var(--acls-color) 80%,
		var(--acls-color) 85%,
		transparent 85%
	);
	clip-path: polygon(0 50%, 15% 50%, 20% 20%, 25% 80%, 30% 50%, 100% 50%, 100% 52%, 30% 52%, 25% 82%, 20% 22%, 15% 52%, 0 52%);
	animation: cps-heartbeat-anim 2s linear infinite;
}

@keyframes cps-heartbeat-anim {
	0% {
		clip-path: polygon(0 50%, 0 50%, 0 20%, 0 80%, 0 50%, 0 50%, 0 52%, 0 52%, 0 82%, 0 22%, 0 52%, 0 52%);
	}

	100% {
		clip-path: polygon(0 50%, 15% 50%, 20% 20%, 25% 80%, 30% 50%, 100% 50%, 100% 52%, 30% 52%, 25% 82%, 20% 22%, 15% 52%, 0 52%);
	}
}

.acls-battery {
	position: relative;
	width: calc(var(--acls-size) * 1.2);
	height: calc(var(--acls-size) * 0.6);
	padding: 2px;
	background: #ffffff;
	border: calc(var(--acls-size) * 0.05) solid var(--acls-color);
	border-radius: 6px;
}

.acls-battery::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--acls-size) * -0.1);
	width: calc(var(--acls-size) * 0.08);
	height: calc(var(--acls-size) * 0.2);
	background: var(--acls-color);
	border-radius: 0 2px 2px 0;
	transform: translateY(-50%);
}

.acls-battery div {
	height: 100%;
	background: linear-gradient(to bottom, var(--acls-secondary), var(--acls-color));
	border-radius: 2px;
	animation: cps-battery-anim 2s steps(4, end) infinite;
}

@keyframes cps-battery-anim {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

.acls-music-bars {
	gap: 5px;
}

.acls-music-bars span {
	width: calc(var(--acls-size) * 0.15);
	height: 100%;
	border-radius: 4px 4px 0 0;
	animation: cps-music-anim 1s ease-in-out infinite alternate;
	transform-origin: bottom center;
}

.acls-music-bars span:nth-child(1) {
	background: #ff3b30;
	animation-delay: 0.1s;
}

.acls-music-bars span:nth-child(2) {
	background: #ffcc00;
	animation-delay: 0.4s;
}

.acls-music-bars span:nth-child(3) {
	background: #34c759;
	animation-delay: 0.2s;
}

.acls-music-bars span:nth-child(4) {
	background: #007aff;
	animation-delay: 0.5s;
}

@keyframes cps-music-anim {
	0% {
		transform: scaleY(0.1);
	}

	100% {
		transform: scaleY(1);
	}
}

.acls-hourglass-color {
	position: relative;
	background: var(--acls-secondary);
	clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
	animation: cps-hourglass-color-spin 2s ease-in-out infinite;
}

.acls-hourglass-color::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--acls-color), var(--acls-secondary));
	animation: cps-hourglass-fill 2s ease-in-out infinite;
}

@keyframes cps-hourglass-color-spin {
	0%,
	40% {
		transform: rotate(0deg);
	}

	50%,
	90% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes cps-hourglass-fill {
	0% {
		transform: translateY(-100%);
	}

	40%,
	50% {
		transform: translateY(0%);
	}

	90%,
	100% {
		transform: translateY(100%);
	}
}

/* ==========================================================================
	SECTION 13: Text Spinners
	========================================================================== */

.acls-text-blink,
.acls-text-wave,
.acls-text-glow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--acls-color);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: calc(var(--acls-size) * 0.4);
	font-weight: 800;
	line-height: 1;
}

.acls-text-blink {
	align-items: flex-end;
}

.acls-text-blink span {
	animation: cps-text-blink-anim 1.4s infinite both;
}

.acls-text-blink span:nth-child(1) {
	animation-delay: 0s;
}

.acls-text-blink span:nth-child(2) {
	animation-delay: 0.2s;
}

.acls-text-blink span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes cps-text-blink-anim {
	0%,
	80%,
	100% {
		opacity: 0;
		transform: translateY(5px);
	}

	40% {
		opacity: 1;
		transform: translateY(0);
	}
}

.acls-text-wave span {
	display: inline-block;
	animation: cps-text-wave-anim 1.5s ease-in-out infinite;
}

.acls-text-wave span:nth-child(1) {
	animation-delay: 0s;
}

.acls-text-wave span:nth-child(2) {
	animation-delay: 0.1s;
}

.acls-text-wave span:nth-child(3) {
	animation-delay: 0.2s;
}

.acls-text-wave span:nth-child(4) {
	animation-delay: 0.3s;
}

.acls-text-wave span:nth-child(5) {
	animation-delay: 0.4s;
}

.acls-text-wave span:nth-child(6) {
	animation-delay: 0.5s;
}

.acls-text-wave span:nth-child(7) {
	animation-delay: 0.6s;
}

@keyframes cps-text-wave-anim {
	0%,
	40%,
	100% {
		transform: translateY(0);
	}

	20% {
		transform: translateY(-30%);
	}
}

.acls-text-glow {
	letter-spacing: 0.08em;
	text-shadow: 0 0 8px var(--acls-color), 0 0 18px var(--acls-color);
	animation: cps-text-glow-anim 1.6s ease-in-out infinite alternate;
}

@keyframes cps-text-glow-anim {
	0% {
		opacity: 0.55;
		text-shadow: 0 0 4px var(--acls-color);
	}

	100% {
		opacity: 1;
		text-shadow: 0 0 10px var(--acls-color), 0 0 24px var(--acls-color);
	}
}

/* ==========================================================================
	SECTION 14: Colorful Spinners
	========================================================================== */

.acls-rainbow-circle {
	width: var(--acls-size);
	height: var(--acls-size);
	border: calc(var(--acls-size) * 0.1) solid transparent;
	border-top-color: #ff0000;
	border-radius: 50%;
	animation: cps-rainbow-circle-spin 1.5s linear infinite, cps-rainbow-color 4s linear infinite;
}

@keyframes cps-rainbow-circle-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes cps-rainbow-color {
	0% {
		border-top-color: hsl(0, 100%, 50%);
	}

	25% {
		border-top-color: hsl(90, 100%, 50%);
	}

	50% {
		border-top-color: hsl(180, 100%, 50%);
	}

	75% {
		border-top-color: hsl(270, 100%, 50%);
	}

	100% {
		border-top-color: hsl(360, 100%, 50%);
	}
}

.acls-rainbow-dots {
	gap: calc(var(--acls-size) * 0.1);
}

.acls-rainbow-dots div {
	width: calc(var(--acls-size) * 0.2);
	height: calc(var(--acls-size) * 0.2);
	border-radius: 50%;
	animation: cps-rainbow-dots-anim 1s ease-in-out infinite alternate;
}

.acls-rainbow-dots div:nth-child(1) {
	background: #ff3b30;
	animation-delay: 0s;
}

.acls-rainbow-dots div:nth-child(2) {
	background: #ffcc00;
	animation-delay: 0.2s;
}

.acls-rainbow-dots div:nth-child(3) {
	background: #34c759;
	animation-delay: 0.4s;
}

.acls-rainbow-dots div:nth-child(4) {
	background: #007aff;
	animation-delay: 0.6s;
}

@keyframes cps-rainbow-dots-anim {
	0% {
		transform: translateY(0) scale(1);
	}

	100% {
		transform: translateY(calc(var(--acls-size) * -0.3)) scale(1.2);
	}
}

.acls-rainbow-bar {
	width: calc(var(--acls-size) * 1.5);
	height: calc(var(--acls-size) * 0.15);
	background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
	background-size: 200% 100%;
	border-radius: 999px;
	animation: cps-rainbow-bar-anim 2s linear infinite;
}

@keyframes cps-rainbow-bar-anim {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}

.acls-color-pulse {
	width: var(--acls-size);
	height: var(--acls-size);
	background: hsl(0, 100%, 50%);
	border-radius: 50%;
	animation: cps-color-pulse-anim 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cps-color-pulse-anim {
	0% {
		opacity: 1;
		background: hsl(0, 100%, 50%);
		transform: scale(0.5);
	}

	50% {
		background: hsl(120, 100%, 50%);
	}

	100% {
		opacity: 0;
		background: hsl(240, 100%, 50%);
		transform: scale(1.5);
	}
}

.acls-color-wheel {
	border-radius: 50%;
	background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - calc(var(--acls-size) * 0.15)), #000 0);
	mask: radial-gradient(farthest-side, transparent calc(100% - calc(var(--acls-size) * 0.15)), #000 0);
	animation: cps-rainbow-circle-spin 2s linear infinite;
}

/* ==========================================================================
	SECTION 15: Additional Presets (Infinity, Atom, DNA, Hexagon, Gyroscope, Soundwave, Pulsar, Meteor, Matrix, Gem)
	========================================================================== */

/* 1. Infinity Loop */
.acls-infinity {
	position: relative;
	width: calc(var(--acls-size) * 1.25);
	height: calc(var(--acls-size) * 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-infinity div {
	position: absolute;
	width: calc(var(--acls-size) * 0.55);
	height: calc(var(--acls-size) * 0.55);
	border: calc(var(--acls-size) * 0.07) solid var(--acls-color);
	border-radius: 50%;
	box-sizing: border-box;
}

.acls-infinity div:first-child {
	left: 0;
	border-right-color: transparent;
	animation: cps-infinity-left 1.4s ease-in-out infinite;
}

.acls-infinity div:last-child {
	right: 0;
	border-color: var(--acls-secondary);
	border-left-color: transparent;
	animation: cps-infinity-right 1.4s ease-in-out infinite;
}

@keyframes cps-infinity-left {
	0%,
	100% {
		transform: scale(0.85) rotate(0deg);
		border-color: var(--acls-color);
		border-right-color: transparent;
	}

	50% {
		transform: scale(1.15) rotate(180deg);
		border-color: var(--acls-secondary);
		border-right-color: transparent;
	}
}

@keyframes cps-infinity-right {
	0%,
	100% {
		transform: scale(1.15) rotate(0deg);
		border-color: var(--acls-secondary);
		border-left-color: transparent;
	}

	50% {
		transform: scale(0.85) rotate(-180deg);
		border-color: var(--acls-color);
		border-left-color: transparent;
	}
}

/* 2. Atom */
.acls-atom {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 600px;
}

.acls-atom-core {
	width: calc(var(--acls-size) * 0.22);
	height: calc(var(--acls-size) * 0.22);
	background: var(--acls-color);
	border-radius: 50%;
	box-shadow: 0 0 calc(var(--acls-size) * 0.1) var(--acls-color);
	animation: cps-atom-pulse 1.6s ease-in-out infinite alternate;
	z-index: 2;
}

.acls-atom-orbit {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.05) solid var(--acls-secondary);
	border-top-color: var(--acls-color);
	box-sizing: border-box;
}

.acls-atom-orbit1 {
	transform: rotateZ(0deg) rotateX(65deg);
	animation: cps-atom-spin1 1.2s linear infinite;
}

.acls-atom-orbit2 {
	transform: rotateZ(60deg) rotateX(65deg);
	animation: cps-atom-spin2 1.2s linear infinite;
	animation-delay: -0.4s;
}

.acls-atom-orbit3 {
	transform: rotateZ(120deg) rotateX(65deg);
	animation: cps-atom-spin3 1.2s linear infinite;
	animation-delay: -0.8s;
}

@keyframes cps-atom-pulse {
	0% {
		transform: scale(0.8);
		opacity: 0.8;
	}

	100% {
		transform: scale(1.2);
		opacity: 1;
	}
}

@keyframes cps-atom-spin1 {
	0% {
		transform: rotateZ(0deg) rotateX(65deg) rotateZ(0deg);
	}

	100% {
		transform: rotateZ(0deg) rotateX(65deg) rotateZ(360deg);
	}
}

@keyframes cps-atom-spin2 {
	0% {
		transform: rotateZ(60deg) rotateX(65deg) rotateZ(0deg);
	}

	100% {
		transform: rotateZ(60deg) rotateX(65deg) rotateZ(360deg);
	}
}

@keyframes cps-atom-spin3 {
	0% {
		transform: rotateZ(120deg) rotateX(65deg) rotateZ(0deg);
	}

	100% {
		transform: rotateZ(120deg) rotateX(65deg) rotateZ(360deg);
	}
}

/* 3. DNA Helix */
.acls-dna {
	position: relative;
	width: var(--acls-size);
	height: calc(var(--acls-size) * 0.7);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.acls-dna div {
	position: relative;
	width: calc(var(--acls-size) * 0.12);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.acls-dna div::before,
.acls-dna div::after {
	content: "";
	display: block;
	width: calc(var(--acls-size) * 0.12);
	height: calc(var(--acls-size) * 0.12);
	border-radius: 50%;
}

.acls-dna div::before {
	background: var(--acls-color);
	animation: cps-dna-anim-a 1.4s ease-in-out infinite;
}

.acls-dna div::after {
	background: var(--acls-secondary);
	animation: cps-dna-anim-b 1.4s ease-in-out infinite;
}

.acls-dna div:nth-child(1)::before,
.acls-dna div:nth-child(1)::after {
	animation-delay: 0s;
}

.acls-dna div:nth-child(2)::before,
.acls-dna div:nth-child(2)::after {
	animation-delay: 0.15s;
}

.acls-dna div:nth-child(3)::before,
.acls-dna div:nth-child(3)::after {
	animation-delay: 0.3s;
}

.acls-dna div:nth-child(4)::before,
.acls-dna div:nth-child(4)::after {
	animation-delay: 0.45s;
}

.acls-dna div:nth-child(5)::before,
.acls-dna div:nth-child(5)::after {
	animation-delay: 0.6s;
}

.acls-dna div:nth-child(6)::before,
.acls-dna div:nth-child(6)::after {
	animation-delay: 0.75s;
}

@keyframes cps-dna-anim-a {
	0%,
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
		z-index: 2;
	}

	50% {
		transform: translateY(calc(var(--acls-size) * 0.58)) scale(0.65);
		opacity: 0.5;
		z-index: 1;
	}
}

@keyframes cps-dna-anim-b {
	0%,
	100% {
		transform: translateY(0) scale(0.65);
		opacity: 0.5;
		z-index: 1;
	}

	50% {
		transform: translateY(calc(var(--acls-size) * -0.58)) scale(1);
		opacity: 1;
		z-index: 2;
	}
}

/* 4. Hexagon Pulse */
.acls-hexagon {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-hexagon div {
	position: absolute;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.acls-hexagon div:nth-child(1) {
	width: 100%;
	height: 100%;
	background: var(--acls-secondary);
	opacity: 0.35;
	animation: cps-hexagon-spin 3s linear infinite reverse;
}

.acls-hexagon div:nth-child(2) {
	width: 70%;
	height: 70%;
	background: var(--acls-secondary);
	animation: cps-hexagon-spin 2s ease-in-out infinite;
}

.acls-hexagon div:nth-child(3) {
	width: 40%;
	height: 40%;
	background: var(--acls-color);
	animation: cps-hexagon-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes cps-hexagon-spin {
	0% {
		transform: rotate(0deg) scale(0.9);
	}

	50% {
		transform: rotate(180deg) scale(1.05);
	}

	100% {
		transform: rotate(360deg) scale(0.9);
	}
}

@keyframes cps-hexagon-pulse {
	0% {
		transform: rotate(0deg) scale(0.75);
	}

	100% {
		transform: rotate(60deg) scale(1.15);
	}
}

/* 5. Gyroscope */
.acls-gyroscope {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	perspective: 400px;
	transform-style: preserve-3d;
}

.acls-gyroscope div {
	position: absolute;
	border-radius: 50%;
	box-sizing: border-box;
}

.acls-gyroscope div:nth-child(1) {
	inset: 0;
	border: calc(var(--acls-size) * 0.06) solid var(--acls-color);
	border-left-color: transparent;
	border-right-color: transparent;
	animation: cps-gyro-1 1.8s linear infinite;
}

.acls-gyroscope div:nth-child(2) {
	inset: 15%;
	border: calc(var(--acls-size) * 0.06) solid var(--acls-secondary);
	border-top-color: transparent;
	border-bottom-color: transparent;
	animation: cps-gyro-2 1.4s linear infinite reverse;
}

.acls-gyroscope div:nth-child(3) {
	inset: 30%;
	border: calc(var(--acls-size) * 0.06) solid var(--acls-color);
	border-left-color: transparent;
	border-top-color: transparent;
	animation: cps-gyro-3 1s linear infinite;
}

@keyframes cps-gyro-1 {
	0% {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}

	100% {
		transform: rotateX(360deg) rotateY(180deg) rotateZ(0deg);
	}
}

@keyframes cps-gyro-2 {
	0% {
		transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
	}

	100% {
		transform: rotateY(360deg) rotateX(180deg) rotateZ(180deg);
	}
}

@keyframes cps-gyro-3 {
	0% {
		transform: rotateZ(0deg) rotateY(0deg);
	}

	100% {
		transform: rotateZ(360deg) rotateY(360deg);
	}
}

/* 6. Soundwave */
.acls-soundwave {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--acls-size) * 0.07);
	width: var(--acls-size);
	height: calc(var(--acls-size) * 0.7);
}

.acls-soundwave span {
	display: block;
	width: calc(var(--acls-size) * 0.1);
	height: 100%;
	border-radius: 999px;
	background: var(--acls-color);
	animation: cps-soundwave-anim 1.2s ease-in-out infinite alternate;
	transform-origin: center center;
}

.acls-soundwave span:nth-child(1),
.acls-soundwave span:nth-child(5) {
	background: var(--acls-secondary);
	animation-delay: -0.8s;
}

.acls-soundwave span:nth-child(2),
.acls-soundwave span:nth-child(4) {
	animation-delay: -0.4s;
}

.acls-soundwave span:nth-child(3) {
	animation-delay: 0s;
}

@keyframes cps-soundwave-anim {
	0% {
		transform: scaleY(0.2);
		opacity: 0.5;
	}

	100% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* 7. Pulsar */
.acls-pulsar {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-pulsar-core {
	width: calc(var(--acls-size) * 0.28);
	height: calc(var(--acls-size) * 0.28);
	background: var(--acls-color);
	border-radius: 50%;
	z-index: 2;
	box-shadow: 0 0 calc(var(--acls-size) * 0.08) var(--acls-color);
	animation: cps-pulsar-core-anim 1.6s ease-in-out infinite;
}

.acls-pulsar-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.04) solid var(--acls-secondary);
	opacity: 0;
	animation: cps-pulsar-wave 1.6s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
	box-sizing: border-box;
}

.acls-pulsar-ring:nth-of-type(2) {
	animation-delay: 0.8s;
}

@keyframes cps-pulsar-core-anim {
	0%,
	100% {
		transform: scale(0.85);
		opacity: 0.85;
	}

	50% {
		transform: scale(1.15);
		opacity: 1;
	}
}

@keyframes cps-pulsar-wave {
	0% {
		transform: scale(0.3);
		opacity: 0.9;
		border-color: var(--acls-color);
	}

	80% {
		opacity: 0.3;
	}

	100% {
		transform: scale(1.1);
		opacity: 0;
		border-color: var(--acls-secondary);
	}
}

/* 8. Meteor */
.acls-meteor {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-meteor div {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.08) solid transparent;
	border-top-color: var(--acls-color);
	border-right-color: var(--acls-secondary);
	animation: cps-meteor-spin 0.85s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
	box-sizing: border-box;
}

.acls-meteor div::before {
	content: "";
	position: absolute;
	top: calc(var(--acls-size) * -0.04);
	right: calc(var(--acls-size) * 0.1);
	width: calc(var(--acls-size) * 0.18);
	height: calc(var(--acls-size) * 0.18);
	background: var(--acls-color);
	border-radius: 50%;
	box-shadow: 0 0 calc(var(--acls-size) * 0.1) var(--acls-color);
}

@keyframes cps-meteor-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* 9. Digital Matrix */
.acls-matrix {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: calc(var(--acls-size) * 0.85);
	height: var(--acls-size);
	overflow: hidden;
}

.acls-matrix div {
	position: relative;
	width: calc(var(--acls-size) * 0.14);
	height: 100%;
	background: rgba(0, 0, 0, 0.06);
	border-radius: calc(var(--acls-size) * 0.04);
	overflow: hidden;
	box-sizing: border-box;
}

.acls-matrix div::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background: linear-gradient(180deg, transparent, var(--acls-secondary) 50%, var(--acls-color) 100%);
	border-radius: inherit;
	animation: cps-matrix-fall 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.acls-matrix div:nth-child(1)::after {
	animation-delay: 0s;
}

.acls-matrix div:nth-child(2)::after {
	animation-delay: -0.4s;
}

.acls-matrix div:nth-child(3)::after {
	animation-delay: -0.8s;
}

.acls-matrix div:nth-child(4)::after {
	animation-delay: -0.2s;
}

@keyframes cps-matrix-fall {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	80% {
		opacity: 1;
	}

	100% {
		transform: translateY(260%);
		opacity: 0;
	}
}

/* 10. Crystal Gem */
.acls-gem {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-gem div:first-child {
	position: absolute;
	width: 65%;
	height: 65%;
	border: calc(var(--acls-size) * 0.06) solid var(--acls-color);
	border-radius: calc(var(--acls-size) * 0.08);
	animation: cps-gem-spin 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
	box-sizing: border-box;
}

.acls-gem div:last-child {
	position: absolute;
	width: 38%;
	height: 38%;
	background: var(--acls-secondary);
	border-radius: calc(var(--acls-size) * 0.04);
	animation: cps-gem-spin 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite reverse;
	animation-delay: -0.5s;
	box-sizing: border-box;
}

@keyframes cps-gem-spin {
	0% {
		transform: rotate(45deg) scale(0.85);
		border-color: var(--acls-color);
	}

	50% {
		transform: rotate(225deg) scale(1.1);
		border-color: var(--acls-secondary);
	}

	100% {
		transform: rotate(405deg) scale(0.85);
		border-color: var(--acls-color);
	}
}

/* ==========================================================================
	SECTION 16: Extended Presets (Newton's Cradle, Droplet, Infinity Dots, Eclipse, Vortex, Sonar, Prism, Hypercube, Signal Beacon, Sandflow, Typewriter, Pendulum, Kaleidoscope, Neon Ring, Crosshair, Glitch, Pinwheel, Staircase, Planetary, Hive)
	========================================================================== */

/* 11. Newton's Cradle */
.acls-newtons-cradle {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: calc(var(--acls-size) * 1.1);
	height: calc(var(--acls-size) * 0.8);
	padding-top: calc(var(--acls-size) * 0.05);
	box-sizing: border-box;
}

.acls-newtons-cradle div {
	position: relative;
	width: calc(var(--acls-size) * 0.18);
	height: calc(var(--acls-size) * 0.65);
	transform-origin: top center;
}

.acls-newtons-cradle div::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1.5px;
	height: calc(var(--acls-size) * 0.45);
	background: var(--acls-secondary);
	transform: translateX(-50%);
}

.acls-newtons-cradle div::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(var(--acls-size) * 0.18);
	height: calc(var(--acls-size) * 0.18);
	background: var(--acls-color);
	border-radius: 50%;
}

.acls-newtons-cradle div:first-child {
	animation: cps-cradle-left 1.2s ease-in-out infinite;
}

.acls-newtons-cradle div:last-child {
	animation: cps-cradle-right 1.2s ease-in-out infinite;
}

@keyframes cps-cradle-left {
	0%,
	50%,
	100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(38deg);
	}
}

@keyframes cps-cradle-right {
	0%,
	50%,
	100% {
		transform: rotate(0deg);
	}

	75% {
		transform: rotate(-38deg);
	}
}

/* 12. Water Droplet */
.acls-droplet {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-drop {
	position: absolute;
	top: 10%;
	width: calc(var(--acls-size) * 0.2);
	height: calc(var(--acls-size) * 0.2);
	background: var(--acls-color);
	border-radius: 0 50% 50% 50%;
	transform: rotate(45deg);
	animation: cps-drop-fall 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.acls-droplet-ripple {
	position: absolute;
	bottom: 15%;
	width: calc(var(--acls-size) * 0.7);
	height: calc(var(--acls-size) * 0.22);
	border: calc(var(--acls-size) * 0.04) solid var(--acls-secondary);
	border-radius: 50%;
	animation: cps-droplet-ripple-anim 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
	box-sizing: border-box;
}

@keyframes cps-drop-fall {
	0% {
		top: 10%;
		opacity: 1;
		transform: rotate(45deg) scale(1);
	}

	50% {
		top: 65%;
		opacity: 1;
		transform: rotate(45deg) scale(0.7);
	}

	55% {
		top: 70%;
		opacity: 0;
		transform: rotate(45deg) scale(0.2);
	}

	100% {
		top: 10%;
		opacity: 0;
		transform: rotate(45deg) scale(0.8);
	}
}

@keyframes cps-droplet-ripple-anim {
	0%,
	45% {
		transform: scale(0.1);
		opacity: 0;
	}

	55% {
		opacity: 1;
		border-color: var(--acls-color);
	}

	100% {
		transform: scale(1.2);
		opacity: 0;
		border-color: var(--acls-secondary);
	}
}

/* 13. Infinity Dots */
.acls-infinity-dots {
	position: relative;
	width: calc(var(--acls-size) * 1.2);
	height: calc(var(--acls-size) * 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-infinity-dots div {
	position: absolute;
	width: calc(var(--acls-size) * 0.16);
	height: calc(var(--acls-size) * 0.16);
	background: var(--acls-color);
	border-radius: 50%;
	box-shadow: 0 0 calc(var(--acls-size) * 0.06) var(--acls-color);
	animation: cps-inf-dot 2.2s linear infinite;
}

.acls-infinity-dots div:nth-child(1) {
	animation-delay: 0s;
}

.acls-infinity-dots div:nth-child(2) {
	animation-delay: -0.44s;
	background: var(--acls-secondary);
}

.acls-infinity-dots div:nth-child(3) {
	animation-delay: -0.88s;
}

.acls-infinity-dots div:nth-child(4) {
	animation-delay: -1.32s;
	background: var(--acls-secondary);
}

.acls-infinity-dots div:nth-child(5) {
	animation-delay: -1.76s;
}

@keyframes cps-inf-dot {
	0% {
		transform: translate(calc(var(--acls-size) * -0.4), 0) scale(0.7);
	}

	25% {
		transform: translate(calc(var(--acls-size) * -0.2), calc(var(--acls-size) * -0.22)) scale(1.1);
	}

	50% {
		transform: translate(calc(var(--acls-size) * 0.2), calc(var(--acls-size) * 0.22)) scale(0.7);
	}

	75% {
		transform: translate(calc(var(--acls-size) * 0.4), 0) scale(1.1);
	}

	100% {
		transform: translate(calc(var(--acls-size) * -0.4), 0) scale(0.7);
	}
}

/* 14. Solar Eclipse */
.acls-eclipse {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-eclipse-sun {
	position: absolute;
	width: calc(var(--acls-size) * 0.65);
	height: calc(var(--acls-size) * 0.65);
	background: var(--acls-color);
	border-radius: 50%;
	box-shadow: 0 0 calc(var(--acls-size) * 0.2) var(--acls-color), 0 0 calc(var(--acls-size) * 0.35) var(--acls-secondary);
	animation: cps-eclipse-flare 2.5s ease-in-out infinite alternate;
}

.acls-eclipse-moon {
	position: absolute;
	width: calc(var(--acls-size) * 0.65);
	height: calc(var(--acls-size) * 0.65);
	background: #111827;
	border-radius: 50%;
	animation: cps-eclipse-transit 3s ease-in-out infinite alternate;
}

@keyframes cps-eclipse-flare {
	0% {
		box-shadow: 0 0 calc(var(--acls-size) * 0.1) var(--acls-color);
	}

	100% {
		box-shadow: 0 0 calc(var(--acls-size) * 0.28) var(--acls-color), 0 0 calc(var(--acls-size) * 0.45) var(--acls-secondary);
	}
}

@keyframes cps-eclipse-transit {
	0% {
		transform: translateX(calc(var(--acls-size) * -0.35));
	}

	100% {
		transform: translateX(calc(var(--acls-size) * 0.35));
	}
}

/* 15. Spiral Vortex */
.acls-vortex {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-vortex div {
	position: absolute;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.06) solid transparent;
	animation: cps-vortex-spin 1.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	box-sizing: border-box;
}

.acls-vortex div:nth-child(1) {
	width: 100%;
	height: 100%;
	border-top-color: var(--acls-color);
	border-right-color: var(--acls-color);
	animation-duration: 2s;
}

.acls-vortex div:nth-child(2) {
	width: 65%;
	height: 65%;
	border-bottom-color: var(--acls-secondary);
	border-left-color: var(--acls-secondary);
	animation-duration: 1.4s;
	animation-direction: reverse;
}

.acls-vortex div:nth-child(3) {
	width: 32%;
	height: 32%;
	border-top-color: var(--acls-color);
	border-bottom-color: var(--acls-secondary);
	animation-duration: 0.9s;
}

@keyframes cps-vortex-spin {
	0% {
		transform: rotate(0deg) scale(0.9);
	}

	50% {
		transform: rotate(180deg) scale(1.1);
	}

	100% {
		transform: rotate(360deg) scale(0.9);
	}
}

/* 16. Sonar Ping */
.acls-sonar {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	border-radius: 50%;
	background: radial-gradient(circle, transparent 20%, rgba(79, 70, 229, 0.05) 20%, transparent 40%, rgba(79, 70, 229, 0.05) 40%, transparent 60%, rgba(79, 70, 229, 0.05) 60%, transparent 80%);
	border: calc(var(--acls-size) * 0.04) solid var(--acls-secondary);
	overflow: hidden;
	box-sizing: border-box;
}

.acls-sonar-ring {
	position: absolute;
	inset: 20%;
	border: 1px dashed var(--acls-secondary);
	border-radius: 50%;
}

.acls-sonar-sweep {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 50%;
	background: conic-gradient(from 0deg, transparent 0deg, var(--acls-color) 60deg, transparent 90deg);
	transform-origin: bottom left;
	animation: cps-sonar-scan 2.2s linear infinite;
}

.acls-sonar-blip {
	position: absolute;
	top: 30%;
	right: 32%;
	width: calc(var(--acls-size) * 0.12);
	height: calc(var(--acls-size) * 0.12);
	background: var(--acls-color);
	border-radius: 50%;
	box-shadow: 0 0 6px var(--acls-color);
	animation: cps-sonar-ping 2.2s ease-out infinite;
}

@keyframes cps-sonar-scan {
	to {
		transform: rotate(360deg);
	}
}

@keyframes cps-sonar-ping {
	0%,
	65% {
		opacity: 0;
		transform: scale(0.5);
	}

	70% {
		opacity: 1;
		transform: scale(1.3);
	}

	85% {
		opacity: 0.8;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(0.6);
	}
}

/* 17. Prism Light */
.acls-prism {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-prism-triangle {
	position: absolute;
	width: calc(var(--acls-size) * 0.7);
	height: calc(var(--acls-size) * 0.6);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	background: linear-gradient(180deg, var(--acls-secondary) 0%, rgba(255, 255, 255, 0.1) 100%);
	border-bottom: calc(var(--acls-size) * 0.05) solid var(--acls-color);
	animation: cps-prism-float 2s ease-in-out infinite alternate;
}

.acls-prism-rays {
	position: absolute;
	right: 5%;
	width: calc(var(--acls-size) * 0.45);
	height: calc(var(--acls-size) * 0.35);
	background: linear-gradient(90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de);
	clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0 60%);
	opacity: 0.85;
	animation: cps-prism-disperse 1.8s ease-in-out infinite alternate;
}

@keyframes cps-prism-float {
	0% {
		transform: translateY(calc(var(--acls-size) * -0.05)) rotate(0deg);
	}

	100% {
		transform: translateY(calc(var(--acls-size) * 0.05)) rotate(3deg);
	}
}

@keyframes cps-prism-disperse {
	0% {
		opacity: 0.4;
		transform: scaleX(0.7);
	}

	100% {
		opacity: 0.95;
		transform: scaleX(1.1);
	}
}

/* 18. Tesseract Hypercube */
.acls-hypercube {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 400px;
}

.acls-cube-outer,
.acls-cube-inner {
	position: absolute;
	border: calc(var(--acls-size) * 0.05) solid var(--acls-color);
	border-radius: 4px;
	box-sizing: border-box;
}

.acls-cube-outer {
	width: 80%;
	height: 80%;
	animation: cps-hyper-outer 2.4s ease-in-out infinite;
}

.acls-cube-inner {
	width: 44%;
	height: 44%;
	border-color: var(--acls-secondary);
	animation: cps-hyper-inner 2.4s ease-in-out infinite;
}

@keyframes cps-hyper-outer {
	0%,
	100% {
		transform: rotate(0deg) scale(1);
		border-color: var(--acls-color);
	}

	50% {
		transform: rotate(180deg) scale(0.65);
		border-color: var(--acls-secondary);
	}
}

@keyframes cps-hyper-inner {
	0%,
	100% {
		transform: rotate(0deg) scale(1);
		border-color: var(--acls-secondary);
	}

	50% {
		transform: rotate(-180deg) scale(1.6);
		border-color: var(--acls-color);
	}
}

/* 19. Signal Beacon */
.acls-signal-beacon {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-beacon-mast {
	position: absolute;
	bottom: 12%;
	width: calc(var(--acls-size) * 0.12);
	height: calc(var(--acls-size) * 0.45);
	background: var(--acls-color);
	border-radius: 2px 2px 0 0;
	z-index: 2;
}

.acls-beacon-mast::before {
	content: "";
	position: absolute;
	top: calc(var(--acls-size) * -0.1);
	left: 50%;
	width: calc(var(--acls-size) * 0.22);
	height: calc(var(--acls-size) * 0.22);
	background: var(--acls-color);
	border-radius: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 8px var(--acls-color);
}

.acls-beacon-arc {
	position: absolute;
	top: 15%;
	border: calc(var(--acls-size) * 0.05) solid transparent;
	border-top-color: var(--acls-secondary);
	border-radius: 50%;
	animation: cps-beacon-broadcast 1.8s ease-out infinite;
	box-sizing: border-box;
}

.acls-arc1 {
	width: 45%;
	height: 45%;
	animation-delay: 0s;
}

.acls-arc2 {
	width: 70%;
	height: 70%;
	animation-delay: 0.35s;
}

.acls-arc3 {
	width: 95%;
	height: 95%;
	animation-delay: 0.7s;
}

@keyframes cps-beacon-broadcast {
	0% {
		opacity: 0.1;
		transform: scale(0.6);
	}

	50% {
		opacity: 1;
		border-top-color: var(--acls-color);
	}

	100% {
		opacity: 0;
		transform: scale(1.15);
	}
}

/* 20. Sandflow */
.acls-sandflow {
	position: relative;
	width: calc(var(--acls-size) * 0.7);
	height: var(--acls-size);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	animation: cps-sandflow-flip 3s ease-in-out infinite;
}

.acls-sf-top,
.acls-sf-bottom {
	width: 100%;
	height: 44%;
	box-sizing: border-box;
	border: calc(var(--acls-size) * 0.05) solid var(--acls-color);
}

.acls-sf-top {
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: linear-gradient(180deg, var(--acls-color) 0%, var(--acls-secondary) 100%);
	animation: cps-sand-drain 3s ease-in-out infinite;
	transform-origin: bottom center;
}

.acls-sf-bottom {
	clip-path: polygon(50% 0, 0 100%, 100% 100%);
	background: linear-gradient(0deg, var(--acls-color) 0%, var(--acls-secondary) 100%);
	animation: cps-sand-fill 3s ease-in-out infinite;
	transform-origin: bottom center;
}

.acls-sf-stream {
	width: calc(var(--acls-size) * 0.06);
	height: 12%;
	background: var(--acls-color);
	animation: cps-sand-stream 3s linear infinite;
}

@keyframes cps-sandflow-flip {
	0%,
	85% {
		transform: rotate(0deg);
	}

	95%,
	100% {
		transform: rotate(180deg);
	}
}

@keyframes cps-sand-drain {
	0% {
		transform: scaleY(1);
	}

	85%,
	100% {
		transform: scaleY(0);
	}
}

@keyframes cps-sand-fill {
	0% {
		transform: scaleY(0);
	}

	85%,
	100% {
		transform: scaleY(1);
	}
}

@keyframes cps-sand-stream {
	0%,
	85% {
		opacity: 1;
	}

	86%,
	100% {
		opacity: 0;
	}
}

/* 21. Text: Typewriter */
.acls-text-typewriter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: calc(var(--acls-size) * 0.38);
	font-weight: 700;
	color: var(--acls-color);
	line-height: 1;
}

.acls-type-text {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	border-right: 2px solid transparent;
	animation: cps-typewriter-anim 2.8s steps(7, end) infinite;
}

.acls-type-cursor {
	color: var(--acls-color);
	animation: cps-cursor-blink 0.7s step-end infinite alternate;
	margin-left: 2px;
}

@keyframes cps-typewriter-anim {
	0%,
	15% {
		width: 0;
	}

	55%,
	80% {
		width: 100%;
	}

	95%,
	100% {
		width: 0;
	}
}

@keyframes cps-cursor-blink {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

/* 22. Pendulum Wave */
.acls-pendulum {
	position: relative;
	width: calc(var(--acls-size) * 1.1);
	height: var(--acls-size);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: calc(var(--acls-size) * 0.12);
}

.acls-pendulum div {
	position: relative;
	width: calc(var(--acls-size) * 0.16);
	height: calc(var(--acls-size) * 0.85);
	transform-origin: top center;
	animation: cps-pendulum-swing 1.6s ease-in-out infinite alternate;
}

.acls-pendulum div::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1.5px;
	height: calc(var(--acls-size) * 0.65);
	background: var(--acls-secondary);
	transform: translateX(-50%);
}

.acls-pendulum div::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(var(--acls-size) * 0.16);
	height: calc(var(--acls-size) * 0.16);
	background: var(--acls-color);
	border-radius: 50%;
}

.acls-pendulum div:nth-child(1) {
	animation-delay: 0s;
}

.acls-pendulum div:nth-child(2) {
	animation-delay: 0.25s;
}

.acls-pendulum div:nth-child(3) {
	animation-delay: 0.5s;
}

@keyframes cps-pendulum-swing {
	0% {
		transform: rotate(28deg);
	}

	100% {
		transform: rotate(-28deg);
	}
}

/* 23. Kaleidoscope */
.acls-kaleidoscope {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: cps-kaleido-rot 4s linear infinite;
}

.acls-kaleidoscope div {
	position: absolute;
	width: 50%;
	height: 50%;
	border-radius: 50% 0 50% 0;
	opacity: 0.8;
	animation: cps-kaleido-morph 2s ease-in-out infinite alternate;
}

.acls-kaleidoscope div:nth-child(1) {
	top: 0;
	left: 0;
	background: #ff3b30;
	transform-origin: bottom right;
}

.acls-kaleidoscope div:nth-child(2) {
	top: 0;
	right: 0;
	background: #ffcc00;
	transform-origin: bottom left;
	transform: rotate(90deg);
}

.acls-kaleidoscope div:nth-child(3) {
	bottom: 0;
	right: 0;
	background: #34c759;
	transform-origin: top left;
	transform: rotate(180deg);
}

.acls-kaleidoscope div:nth-child(4) {
	bottom: 0;
	left: 0;
	background: #007aff;
	transform-origin: top right;
	transform: rotate(270deg);
}

@keyframes cps-kaleido-rot {
	to {
		transform: rotate(360deg);
	}
}

@keyframes cps-kaleido-morph {
	0% {
		border-radius: 50% 0 50% 0;
		transform: scale(0.85);
	}

	100% {
		border-radius: 0 50% 0 50%;
		transform: scale(1.15);
	}
}

/* 24. Neon Ring */
.acls-neon-ring {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-neon-ring div {
	width: 85%;
	height: 85%;
	border: calc(var(--acls-size) * 0.08) solid var(--acls-secondary);
	border-top-color: var(--acls-color);
	border-right-color: var(--acls-color);
	border-radius: 50%;
	box-shadow: 0 0 calc(var(--acls-size) * 0.12) var(--acls-color), inset 0 0 calc(var(--acls-size) * 0.12) var(--acls-color);
	animation: cps-neon-spin 1s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
	box-sizing: border-box;
}

@keyframes cps-neon-spin {
	0% {
		transform: rotate(0deg);
		filter: hue-rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
		filter: hue-rotate(90deg);
	}
}

/* 25. Crosshair Lock */
.acls-crosshair {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-ch-circle {
	position: absolute;
	width: 75%;
	height: 75%;
	border: calc(var(--acls-size) * 0.05) solid var(--acls-secondary);
	border-top-color: var(--acls-color);
	border-bottom-color: var(--acls-color);
	border-radius: 50%;
	animation: cps-crosshair-spin 2s linear infinite;
	box-sizing: border-box;
}

.acls-ch-lines {
	position: absolute;
	width: 100%;
	height: 100%;
	animation: cps-crosshair-pulse 1.4s ease-in-out infinite alternate;
}

.acls-ch-lines::before,
.acls-ch-lines::after {
	content: "";
	position: absolute;
	background: var(--acls-color);
}

.acls-ch-lines::before {
	top: 50%;
	left: 5%;
	width: 90%;
	height: calc(var(--acls-size) * 0.04);
	transform: translateY(-50%);
}

.acls-ch-lines::after {
	left: 50%;
	top: 5%;
	height: 90%;
	width: calc(var(--acls-size) * 0.04);
	transform: translateX(-50%);
}

@keyframes cps-crosshair-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes cps-crosshair-pulse {
	0% {
		transform: scale(0.85);
		opacity: 0.6;
	}

	100% {
		transform: scale(1.05);
		opacity: 1;
	}
}

/* 26. Cyber Glitch */
.acls-glitch {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-glitch div {
	position: absolute;
	width: 70%;
	height: 70%;
	border: calc(var(--acls-size) * 0.06) solid var(--acls-color);
	box-sizing: border-box;
}

.acls-glitch div:nth-child(1) {
	animation: cps-glitch-a 1.6s steps(2, start) infinite;
}

.acls-glitch div:nth-child(2) {
	border-color: #ff0055;
	opacity: 0.75;
	animation: cps-glitch-b 1.6s steps(2, start) infinite;
}

.acls-glitch div:nth-child(3) {
	border-color: #00f0ff;
	opacity: 0.75;
	animation: cps-glitch-c 1.6s steps(2, start) infinite;
}

@keyframes cps-glitch-a {
	0%,
	100% {
		transform: translate(0, 0);
	}

	20% {
		transform: translate(-3px, 3px);
	}

	40% {
		transform: translate(-3px, -3px);
	}

	60% {
		transform: translate(3px, 3px);
	}

	80% {
		transform: translate(3px, -3px);
	}
}

@keyframes cps-glitch-b {
	0%,
	100% {
		transform: translate(0, 0);
	}

	25% {
		transform: translate(4px, -2px);
		clip-path: inset(20% 0 30% 0);
	}

	65% {
		transform: translate(-4px, 2px);
		clip-path: inset(50% 0 10% 0);
	}
}

@keyframes cps-glitch-c {
	0%,
	100% {
		transform: translate(0, 0);
	}

	35% {
		transform: translate(-4px, 2px);
		clip-path: inset(10% 0 60% 0);
	}

	75% {
		transform: translate(4px, -2px);
		clip-path: inset(40% 0 20% 0);
	}
}

/* 27. Origami Pinwheel */
.acls-pinwheel {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: cps-pinwheel-spin 1s linear infinite;
}

.acls-pinwheel div {
	position: absolute;
	width: 50%;
	height: 50%;
	background: var(--acls-color);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	transform-origin: 100% 100%;
}

.acls-pinwheel div:nth-child(1) {
	top: 0;
	left: 0;
	background: var(--acls-color);
}

.acls-pinwheel div:nth-child(2) {
	top: 0;
	left: 0;
	transform: rotate(90deg);
	background: var(--acls-secondary);
}

.acls-pinwheel div:nth-child(3) {
	top: 0;
	left: 0;
	transform: rotate(180deg);
	background: var(--acls-color);
}

.acls-pinwheel div:nth-child(4) {
	top: 0;
	left: 0;
	transform: rotate(270deg);
	background: var(--acls-secondary);
}

@keyframes cps-pinwheel-spin {
	to {
		transform: rotate(360deg);
	}
}

/* 28. Staircase Bars */
.acls-staircase {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: calc(var(--acls-size) * 0.05);
	width: var(--acls-size);
	height: calc(var(--acls-size) * 0.7);
}

.acls-staircase span {
	display: block;
	width: calc(var(--acls-size) * 0.15);
	background: var(--acls-color);
	border-radius: 3px 3px 0 0;
	animation: cps-staircase-anim 1.2s ease-in-out infinite alternate;
}

.acls-staircase span:nth-child(1) {
	height: 20%;
	animation-delay: 0.1s;
	background: var(--acls-secondary);
}

.acls-staircase span:nth-child(2) {
	height: 40%;
	animation-delay: 0.2s;
}

.acls-staircase span:nth-child(3) {
	height: 60%;
	animation-delay: 0.3s;
	background: var(--acls-secondary);
}

.acls-staircase span:nth-child(4) {
	height: 80%;
	animation-delay: 0.4s;
}

.acls-staircase span:nth-child(5) {
	height: 100%;
	animation-delay: 0.5s;
	background: var(--acls-secondary);
}

@keyframes cps-staircase-anim {
	0% {
		transform: scaleY(0.3);
		opacity: 0.4;
	}

	100% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* 29. Planetary Rings */
.acls-planetary {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 400px;
}

.acls-planet-sphere {
	width: calc(var(--acls-size) * 0.45);
	height: calc(var(--acls-size) * 0.45);
	background: radial-gradient(circle at 35% 35%, var(--acls-secondary), var(--acls-color));
	border-radius: 50%;
	box-shadow: 0 0 calc(var(--acls-size) * 0.1) var(--acls-color);
	z-index: 2;
	animation: cps-planet-pulse 2s ease-in-out infinite alternate;
}

.acls-planet-ring {
	position: absolute;
	width: 95%;
	height: 38%;
	border: calc(var(--acls-size) * 0.05) solid var(--acls-secondary);
	border-radius: 50%;
	transform: rotateX(70deg) rotateZ(-20deg);
	animation: cps-ring-orbit 2s linear infinite;
	box-sizing: border-box;
}

@keyframes cps-planet-pulse {
	0% {
		transform: scale(0.92);
	}

	100% {
		transform: scale(1.08);
	}
}

@keyframes cps-ring-orbit {
	0% {
		transform: rotateX(70deg) rotateZ(0deg);
	}

	100% {
		transform: rotateX(70deg) rotateZ(360deg);
	}
}

/* 30. Honeycomb Hive */
.acls-hive {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-hive div {
	position: absolute;
	width: calc(var(--acls-size) * 0.28);
	height: calc(var(--acls-size) * 0.28);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: var(--acls-color);
	animation: cps-hive-pulse 1.4s ease-in-out infinite alternate;
}

.acls-hive div:nth-child(1) {
	background: var(--acls-secondary);
	animation-delay: 0s;
}

.acls-hive div:nth-child(2) {
	top: 5%;
	left: 36%;
	animation-delay: 0.15s;
}

.acls-hive div:nth-child(3) {
	top: 25%;
	right: 5%;
	animation-delay: 0.3s;
}

.acls-hive div:nth-child(4) {
	bottom: 25%;
	right: 5%;
	animation-delay: 0.45s;
}

.acls-hive div:nth-child(5) {
	bottom: 5%;
	left: 36%;
	animation-delay: 0.6s;
}

.acls-hive div:nth-child(6) {
	bottom: 25%;
	left: 5%;
	animation-delay: 0.75s;
}

.acls-hive div:nth-child(7) {
	top: 25%;
	left: 5%;
	animation-delay: 0.9s;
}

@keyframes cps-hive-pulse {
	0% {
		transform: scale(0.6);
		opacity: 0.4;
	}

	100% {
		transform: scale(1.05);
		opacity: 1;
	}
}

/* 31. Black Hole */
.acls-black-hole {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 500px;
}

.acls-bh-core {
	position: absolute;
	width: calc(var(--acls-size) * 0.42);
	height: calc(var(--acls-size) * 0.42);
	background: #000000;
	border-radius: 50%;
	box-shadow: 0 0 calc(var(--acls-size) * 0.08) var(--acls-color), 0 0 calc(var(--acls-size) * 0.16) var(--acls-secondary);
	z-index: 2;
	animation: cps-bh-pulse 2s ease-in-out infinite alternate;
}

.acls-bh-disk {
	position: absolute;
	width: 95%;
	height: 95%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.06) solid transparent;
	border-top-color: var(--acls-color);
	border-right-color: var(--acls-secondary);
	border-bottom-color: var(--acls-color);
	filter: drop-shadow(0 0 calc(var(--acls-size) * 0.06) var(--acls-color));
	transform: rotateX(68deg) rotateZ(0deg);
	animation: cps-bh-disk-spin 1s linear infinite;
	box-sizing: border-box;
}

@keyframes cps-bh-pulse {
	0% {
		transform: scale(0.92);
		box-shadow: 0 0 calc(var(--acls-size) * 0.06) var(--acls-color);
	}

	100% {
		transform: scale(1.08);
		box-shadow: 0 0 calc(var(--acls-size) * 0.12) var(--acls-color), 0 0 calc(var(--acls-size) * 0.22) var(--acls-secondary);
	}
}

@keyframes cps-bh-disk-spin {
	0% {
		transform: rotateX(68deg) rotateZ(0deg);
	}

	100% {
		transform: rotateX(68deg) rotateZ(360deg);
	}
}

/* 32. Yin Yang */
.acls-yin-yang {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	border-radius: 50%;
	background: linear-gradient(to right, var(--acls-color) 50%, var(--acls-secondary) 50%);
	box-shadow: 0 0 calc(var(--acls-size) * 0.08) rgba(0, 0, 0, 0.15);
	animation: cps-yy-spin 2s linear infinite;
	box-sizing: border-box;
	overflow: hidden;
}

.acls-yin-yang::before {
	content: "";
	position: absolute;
	top: 0;
	left: 25%;
	width: 50%;
	height: 50%;
	background: var(--acls-color);
	border-radius: 50%;
}

.acls-yin-yang::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 50%;
	height: 50%;
	background: var(--acls-secondary);
	border-radius: 50%;
}

.acls-yy-dot1 {
	position: absolute;
	top: 17%;
	left: 42%;
	width: 16%;
	height: 16%;
	background: var(--acls-secondary);
	border-radius: 50%;
	z-index: 2;
}

.acls-yy-dot2 {
	position: absolute;
	bottom: 17%;
	left: 42%;
	width: 16%;
	height: 16%;
	background: var(--acls-color);
	border-radius: 50%;
	z-index: 2;
}

@keyframes cps-yy-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* 33. Quantum Orbit */
.acls-quantum-orbit {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	perspective: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-qo-ring1,
.acls-qo-ring2,
.acls-qo-ring3 {
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.04) solid var(--acls-secondary);
	border-top-color: var(--acls-color);
	box-sizing: border-box;
}

.acls-qo-ring1 span,
.acls-qo-ring2 span,
.acls-qo-ring3 span {
	position: absolute;
	top: -10%;
	left: 45%;
	width: calc(var(--acls-size) * 0.12);
	height: calc(var(--acls-size) * 0.12);
	border-radius: 50%;
	background: var(--acls-color);
	box-shadow: 0 0 calc(var(--acls-size) * 0.08) var(--acls-color);
}

.acls-qo-ring1 {
	transform: rotateX(65deg) rotateY(0deg);
	animation: cps-qo-spin1 1.8s linear infinite;
}

.acls-qo-ring2 {
	transform: rotateX(65deg) rotateY(60deg);
	animation: cps-qo-spin2 1.8s linear infinite -0.6s;
}

.acls-qo-ring3 {
	transform: rotateX(65deg) rotateY(120deg);
	animation: cps-qo-spin3 1.8s linear infinite -1.2s;
}

@keyframes cps-qo-spin1 {
	0% {
		transform: rotateX(65deg) rotateY(0deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(65deg) rotateY(0deg) rotateZ(360deg);
	}
}

@keyframes cps-qo-spin2 {
	0% {
		transform: rotateX(65deg) rotateY(60deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(65deg) rotateY(60deg) rotateZ(360deg);
	}
}

@keyframes cps-qo-spin3 {
	0% {
		transform: rotateX(65deg) rotateY(120deg) rotateZ(0deg);
	}
	100% {
		transform: rotateX(65deg) rotateY(120deg) rotateZ(360deg);
	}
}

/* 34. Cyber Hexagon */
.acls-cyber-hexagon {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-chx-outer {
	position: absolute;
	width: 95%;
	height: 95%;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: conic-gradient(from 0deg, var(--acls-color), var(--acls-secondary), var(--acls-color));
	padding: calc(var(--acls-size) * 0.05);
	animation: cps-chx-cw 3s linear infinite;
	box-sizing: border-box;
}

.acls-chx-outer::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: #ffffff;
}

.acls-chx-inner {
	position: absolute;
	width: 60%;
	height: 60%;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: var(--acls-secondary);
	opacity: 0.85;
	animation: cps-chx-ccw 2s linear infinite;
}

.acls-chx-core {
	position: absolute;
	width: 25%;
	height: 25%;
	border-radius: 50%;
	background: var(--acls-color);
	box-shadow: 0 0 calc(var(--acls-size) * 0.1) var(--acls-color);
	animation: cps-chx-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes cps-chx-cw {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes cps-chx-ccw {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes cps-chx-pulse {
	0% {
		transform: scale(0.7);
		opacity: 0.6;
	}
	100% {
		transform: scale(1.15);
		opacity: 1;
	}
}

/* 35. Galaxy Spiral */
.acls-galaxy-spiral {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: cps-gal-rot 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.acls-gal-core {
	position: absolute;
	width: 28%;
	height: 28%;
	border-radius: 50%;
	background: radial-gradient(circle, #ffffff 0%, var(--acls-color) 70%, var(--acls-secondary) 100%);
	box-shadow: 0 0 calc(var(--acls-size) * 0.15) var(--acls-color);
	z-index: 2;
}

.acls-gal-arm1,
.acls-gal-arm2 {
	position: absolute;
	width: 88%;
	height: 88%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.06) solid transparent;
	box-sizing: border-box;
}

.acls-gal-arm1 {
	border-top-color: var(--acls-color);
	border-right-color: var(--acls-secondary);
	transform: rotate(25deg);
	filter: drop-shadow(0 0 calc(var(--acls-size) * 0.05) var(--acls-color));
}

.acls-gal-arm2 {
	border-bottom-color: var(--acls-color);
	border-left-color: var(--acls-secondary);
	transform: rotate(205deg);
	filter: drop-shadow(0 0 calc(var(--acls-size) * 0.05) var(--acls-secondary));
}

@keyframes cps-gal-rot {
	0% {
		transform: rotate(0deg) scale(0.95);
	}
	50% {
		transform: rotate(180deg) scale(1.05);
	}
	100% {
		transform: rotate(360deg) scale(0.95);
	}
}

/* 36. Portal Vortex */
.acls-portal-vortex {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-pv-ring1,
.acls-pv-ring2,
.acls-pv-ring3 {
	position: absolute;
	border-radius: 50%;
	box-sizing: border-box;
}

.acls-pv-ring1 {
	width: 95%;
	height: 95%;
	border: calc(var(--acls-size) * 0.05) dashed #8b5cf6;
	border-top-color: #ec4899;
	border-bottom-color: #3b82f6;
	animation: cps-pv-spin1 2s linear infinite;
}

.acls-pv-ring2 {
	width: 70%;
	height: 70%;
	border: calc(var(--acls-size) * 0.05) dotted #10b981;
	border-left-color: #f59e0b;
	border-right-color: #06b6d4;
	animation: cps-pv-spin2 1.4s linear infinite reverse;
}

.acls-pv-ring3 {
	width: 45%;
	height: 45%;
	border: calc(var(--acls-size) * 0.05) solid #f43f5e;
	border-top-color: transparent;
	animation: cps-pv-spin1 0.9s ease-in-out infinite;
}

.acls-pv-center {
	position: absolute;
	width: 20%;
	height: 20%;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 calc(var(--acls-size) * 0.12) #ec4899;
	animation: cps-pv-glow 1.2s ease-in-out infinite alternate;
}

@keyframes cps-pv-spin1 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes cps-pv-spin2 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes cps-pv-glow {
	0% {
		transform: scale(0.8);
		filter: hue-rotate(0deg);
	}
	100% {
		transform: scale(1.2);
		filter: hue-rotate(180deg);
	}
}

/* 37. Metronome Tick */
.acls-metronome {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.acls-metro-base {
	position: absolute;
	bottom: 5%;
	width: 70%;
	height: 14%;
	background: var(--acls-secondary);
	border-radius: 4px;
	border: calc(var(--acls-size) * 0.02) solid var(--acls-color);
}

.acls-metro-arm {
	position: absolute;
	bottom: 12%;
	width: calc(var(--acls-size) * 0.06);
	height: 75%;
	background: var(--acls-color);
	transform-origin: bottom center;
	border-radius: 3px;
	animation: cps-metro-swing 0.8s ease-in-out infinite alternate;
}

.acls-metro-weight {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translateX(-50%);
	width: calc(var(--acls-size) * 0.22);
	height: calc(var(--acls-size) * 0.18);
	background: var(--acls-secondary);
	border: calc(var(--acls-size) * 0.03) solid var(--acls-color);
	border-radius: 3px;
}

@keyframes cps-metro-swing {
	0% {
		transform: rotate(-38deg);
	}
	100% {
		transform: rotate(38deg);
	}
}

/* 38. Chromatic Helix */
.acls-dna-cascade {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	perspective: 350px;
}

.acls-dna-cascade span {
	display: block;
	height: calc(var(--acls-size) * 0.06);
	width: 80%;
	border-radius: 4px;
	background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b);
	background-size: 200% 100%;
	animation: cps-dna-helix 1.6s ease-in-out infinite alternate;
}

.acls-dna-cascade span:nth-child(1) { animation-delay: 0.0s; }
.acls-dna-cascade span:nth-child(2) { animation-delay: 0.15s; }
.acls-dna-cascade span:nth-child(3) { animation-delay: 0.3s; }
.acls-dna-cascade span:nth-child(4) { animation-delay: 0.45s; }
.acls-dna-cascade span:nth-child(5) { animation-delay: 0.6s; }
.acls-dna-cascade span:nth-child(6) { animation-delay: 0.75s; }
.acls-dna-cascade span:nth-child(7) { animation-delay: 0.9s; }
.acls-dna-cascade span:nth-child(8) { animation-delay: 1.05s; }

@keyframes cps-dna-helix {
	0% {
		transform: rotateY(-70deg) scaleX(0.25);
		background-position: 0% 50%;
		opacity: 0.4;
	}
	100% {
		transform: rotateY(70deg) scaleX(1);
		background-position: 100% 50%;
		opacity: 1;
	}
}

/* 39. Liquid Bubbles */
.acls-liquid-bubble {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	overflow: hidden;
}

.acls-lb-drop1,
.acls-lb-drop2,
.acls-lb-drop3,
.acls-lb-drop4 {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--acls-color) 60%, var(--acls-secondary) 100%);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	animation: cps-lb-rise 2s ease-in-out infinite;
}

.acls-lb-drop1 {
	width: 38%;
	height: 38%;
	left: 31%;
	bottom: -20%;
	animation-delay: 0s;
}

.acls-lb-drop2 {
	width: 28%;
	height: 28%;
	left: 10%;
	bottom: -20%;
	animation-delay: 0.5s;
}

.acls-lb-drop3 {
	width: 32%;
	height: 32%;
	right: 12%;
	bottom: -20%;
	animation-delay: 1s;
}

.acls-lb-drop4 {
	width: 22%;
	height: 22%;
	left: 45%;
	bottom: -20%;
	animation-delay: 1.5s;
}

@keyframes cps-lb-rise {
	0% {
		bottom: -25%;
		transform: scale(0.6) scaleX(1.1);
		opacity: 0;
	}
	20% {
		opacity: 0.9;
	}
	80% {
		opacity: 0.9;
		transform: scale(1.05) scaleY(1.1);
	}
	100% {
		bottom: 110%;
		transform: scale(0.7);
		opacity: 0;
	}
}

/* 40. Origami Crane */
.acls-origami-crane {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 400px;
}

.acls-oc-body {
	position: absolute;
	width: 30%;
	height: 70%;
	clip-path: polygon(50% 0%, 100% 60%, 50% 100%, 0% 60%);
	background: var(--acls-color);
	z-index: 2;
}

.acls-oc-wing-left {
	position: absolute;
	left: 8%;
	width: 44%;
	height: 60%;
	clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
	background: var(--acls-secondary);
	transform-origin: right center;
	animation: cps-oc-flap-l 1s ease-in-out infinite alternate;
}

.acls-oc-wing-right {
	position: absolute;
	right: 8%;
	width: 44%;
	height: 60%;
	clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
	background: var(--acls-secondary);
	transform-origin: left center;
	animation: cps-oc-flap-r 1s ease-in-out infinite alternate;
}

@keyframes cps-oc-flap-l {
	0% {
		transform: rotateY(0deg) rotateZ(5deg);
		opacity: 0.8;
	}
	100% {
		transform: rotateY(65deg) rotateZ(-15deg);
		opacity: 1;
	}
}

@keyframes cps-oc-flap-r {
	0% {
		transform: rotateY(0deg) rotateZ(-5deg);
		opacity: 0.8;
	}
	100% {
		transform: rotateY(-65deg) rotateZ(15deg);
		opacity: 1;
	}
}

/* 41. Compass Rose */
.acls-compass-rose {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-cr-dial {
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.04) solid var(--acls-secondary);
	box-shadow: 0 0 calc(var(--acls-size) * 0.06) rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

.acls-cr-dial::before,
.acls-cr-dial::after {
	content: "";
	position: absolute;
	background: var(--acls-secondary);
}

.acls-cr-dial::before {
	top: 0;
	left: 48%;
	width: 4%;
	height: 100%;
}

.acls-cr-dial::after {
	top: 48%;
	left: 0;
	width: 100%;
	height: 4%;
}

.acls-cr-needle {
	position: absolute;
	width: 20%;
	height: 75%;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	background: linear-gradient(to bottom, var(--acls-color) 50%, var(--acls-secondary) 50%);
	animation: cps-cr-seek 2.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
	z-index: 2;
}

.acls-cr-pivot {
	position: absolute;
	width: 16%;
	height: 16%;
	border-radius: 50%;
	background: #ffffff;
	border: calc(var(--acls-size) * 0.03) solid var(--acls-color);
	z-index: 3;
}

@keyframes cps-cr-seek {
	0% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotate(140deg);
	}
	55% {
		transform: rotate(-45deg);
	}
	75% {
		transform: rotate(15deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

/* 42. Hyper Tunnel */
.acls-hyper-tunnel {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 400px;
}

.acls-hyper-tunnel div {
	position: absolute;
	width: 85%;
	height: 85%;
	border: calc(var(--acls-size) * 0.05) solid var(--acls-color);
	border-radius: 4px;
	box-sizing: border-box;
	animation: cps-ht-zoom 2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.acls-hyper-tunnel div:nth-child(1) { animation-delay: 0s; }
.acls-hyper-tunnel div:nth-child(2) { animation-delay: 0.5s; }
.acls-hyper-tunnel div:nth-child(3) { animation-delay: 1s; }
.acls-hyper-tunnel div:nth-child(4) { animation-delay: 1.5s; }

@keyframes cps-ht-zoom {
	0% {
		transform: scale(0.1) rotate(0deg);
		opacity: 0;
		border-color: var(--acls-secondary);
	}
	50% {
		opacity: 1;
		border-color: var(--acls-color);
	}
	100% {
		transform: scale(1.15) rotate(45deg);
		opacity: 0;
		border-color: var(--acls-secondary);
	}
}

/* 43. Radial Equalizer */
.acls-sound-equalizer-radial {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-sound-equalizer-radial span {
	position: absolute;
	width: calc(var(--acls-size) * 0.08);
	height: 90%;
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.acls-sound-equalizer-radial span::before,
.acls-sound-equalizer-radial span::after {
	content: "";
	display: block;
	width: 100%;
	height: 35%;
	background: var(--acls-color);
	border-radius: 3px;
	animation: cps-ser-pulse 1.1s ease-in-out infinite alternate;
	transform-origin: center;
}

.acls-sound-equalizer-radial span::after {
	background: var(--acls-secondary);
}

.acls-sound-equalizer-radial span:nth-child(1) { transform: rotate(0deg); }
.acls-sound-equalizer-radial span:nth-child(2) { transform: rotate(45deg); }
.acls-sound-equalizer-radial span:nth-child(3) { transform: rotate(90deg); }
.acls-sound-equalizer-radial span:nth-child(4) { transform: rotate(135deg); }
.acls-sound-equalizer-radial span:nth-child(5) { transform: rotate(180deg); }
.acls-sound-equalizer-radial span:nth-child(6) { transform: rotate(225deg); }
.acls-sound-equalizer-radial span:nth-child(7) { transform: rotate(270deg); }
.acls-sound-equalizer-radial span:nth-child(8) { transform: rotate(315deg); }

.acls-sound-equalizer-radial span:nth-child(1)::before, .acls-sound-equalizer-radial span:nth-child(1)::after { animation-delay: 0s; }
.acls-sound-equalizer-radial span:nth-child(2)::before, .acls-sound-equalizer-radial span:nth-child(2)::after { animation-delay: 0.15s; }
.acls-sound-equalizer-radial span:nth-child(3)::before, .acls-sound-equalizer-radial span:nth-child(3)::after { animation-delay: 0.3s; }
.acls-sound-equalizer-radial span:nth-child(4)::before, .acls-sound-equalizer-radial span:nth-child(4)::after { animation-delay: 0.45s; }
.acls-sound-equalizer-radial span:nth-child(5)::before, .acls-sound-equalizer-radial span:nth-child(5)::after { animation-delay: 0.6s; }
.acls-sound-equalizer-radial span:nth-child(6)::before, .acls-sound-equalizer-radial span:nth-child(6)::after { animation-delay: 0.75s; }
.acls-sound-equalizer-radial span:nth-child(7)::before, .acls-sound-equalizer-radial span:nth-child(7)::after { animation-delay: 0.9s; }
.acls-sound-equalizer-radial span:nth-child(8)::before, .acls-sound-equalizer-radial span:nth-child(8)::after { animation-delay: 1.05s; }

@keyframes cps-ser-pulse {
	0% {
		height: 12%;
		opacity: 0.4;
	}
	100% {
		height: 42%;
		opacity: 1;
	}
}

/* 44. Ninja Shuriken */
.acls-shuriken {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: cps-sh-spin 0.7s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.acls-sh-blade1,
.acls-sh-blade2,
.acls-sh-blade3,
.acls-sh-blade4 {
	position: absolute;
	width: 32%;
	height: 50%;
	top: 0;
	left: 34%;
	clip-path: polygon(50% 0%, 100% 100%, 0% 75%);
	background: var(--acls-color);
	transform-origin: 50% 100%;
}

.acls-sh-blade2 {
	transform: rotate(90deg);
	background: var(--acls-secondary);
}

.acls-sh-blade3 {
	transform: rotate(180deg);
}

.acls-sh-blade4 {
	transform: rotate(270deg);
	background: var(--acls-secondary);
}

.acls-sh-hub {
	position: absolute;
	width: 28%;
	height: 28%;
	border-radius: 50%;
	background: #ffffff;
	border: calc(var(--acls-size) * 0.04) solid var(--acls-color);
	z-index: 2;
}

@keyframes cps-sh-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* 45. Firefly Swarm */
.acls-firefly-swarm {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
}

.acls-firefly-swarm div {
	position: absolute;
	width: calc(var(--acls-size) * 0.16);
	height: calc(var(--acls-size) * 0.16);
	border-radius: 50%;
	background: var(--acls-color);
	box-shadow: 0 0 calc(var(--acls-size) * 0.08) var(--acls-color);
	animation: cps-ff-drift 2.5s ease-in-out infinite alternate;
}

.acls-firefly-swarm div:nth-child(1) {
	top: 20%;
	left: 20%;
	animation-delay: 0s;
	background: var(--acls-color);
}

.acls-firefly-swarm div:nth-child(2) {
	top: 65%;
	left: 25%;
	animation-delay: -0.5s;
	background: var(--acls-secondary);
	box-shadow: 0 0 calc(var(--acls-size) * 0.08) var(--acls-secondary);
}

.acls-firefly-swarm div:nth-child(3) {
	top: 30%;
	left: 65%;
	animation-delay: -1s;
	background: var(--acls-color);
}

.acls-firefly-swarm div:nth-child(4) {
	top: 70%;
	left: 70%;
	animation-delay: -1.5s;
	background: var(--acls-secondary);
	box-shadow: 0 0 calc(var(--acls-size) * 0.08) var(--acls-secondary);
}

.acls-firefly-swarm div:nth-child(5) {
	top: 45%;
	left: 45%;
	animation-delay: -2s;
	background: var(--acls-color);
}

@keyframes cps-ff-drift {
	0% {
		transform: translate(0, 0) scale(0.6);
		opacity: 0.3;
	}
	50% {
		transform: translate(calc(var(--acls-size) * 0.15), calc(var(--acls-size) * -0.15)) scale(1.15);
		opacity: 1;
	}
	100% {
		transform: translate(calc(var(--acls-size) * -0.15), calc(var(--acls-size) * 0.15)) scale(0.7);
		opacity: 0.4;
	}
}

/* 46. Isometric Cube */
.acls-cube-flip-3d {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: cps-cf-tumble 2.2s ease-in-out infinite;
}

.acls-cf-top,
.acls-cf-left,
.acls-cf-right {
	position: absolute;
	width: 50%;
	height: 50%;
	box-sizing: border-box;
}

.acls-cf-top {
	top: 8%;
	background: var(--acls-secondary);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	transform: scaleY(0.6);
}

.acls-cf-left {
	bottom: 12%;
	left: 10%;
	background: var(--acls-color);
	clip-path: polygon(0% 0%, 100% 30%, 100% 100%, 0% 70%);
	opacity: 0.9;
}

.acls-cf-right {
	bottom: 12%;
	right: 10%;
	background: var(--acls-color);
	clip-path: polygon(0% 30%, 100% 0%, 100% 70%, 0% 100%);
	opacity: 0.7;
}

@keyframes cps-cf-tumble {
	0% {
		transform: rotate(0deg) scale(0.9);
	}
	50% {
		transform: rotate(180deg) scale(1.1);
	}
	100% {
		transform: rotate(360deg) scale(0.9);
	}
}

/* 47. Solar Flare */
.acls-solar-flare {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-sf-sun {
	position: absolute;
	width: 44%;
	height: 44%;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0%, #f59e0b 60%, #ef4444 100%);
	box-shadow: 0 0 calc(var(--acls-size) * 0.15) #f59e0b;
	animation: cps-sfl-pulse 1.5s ease-in-out infinite alternate;
	z-index: 2;
}

.acls-sf-flare1,
.acls-sf-flare2 {
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.05) solid transparent;
	box-sizing: border-box;
}

.acls-sf-flare1 {
	border-top-color: #f97316;
	border-right-color: #fbbf24;
	animation: cps-sfl-spin 1.8s linear infinite;
	filter: drop-shadow(0 0 6px #f97316);
}

.acls-sf-flare2 {
	width: 75%;
	height: 75%;
	border-bottom-color: #ef4444;
	border-left-color: #f43f5e;
	animation: cps-sfl-spin 1.2s linear infinite reverse;
	filter: drop-shadow(0 0 6px #ef4444);
}

@keyframes cps-sfl-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes cps-sfl-pulse {
	0% {
		transform: scale(0.85);
		box-shadow: 0 0 calc(var(--acls-size) * 0.08) #f59e0b;
	}
	100% {
		transform: scale(1.1);
		box-shadow: 0 0 calc(var(--acls-size) * 0.22) #ef4444;
	}
}

/* 48. Biohazard Sign */
.acls-biohazard {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: cps-bio-spin 3s linear infinite;
}

.acls-bio-ring1,
.acls-bio-ring2,
.acls-bio-ring3 {
	position: absolute;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.06) solid var(--acls-color);
	box-sizing: border-box;
}

.acls-bio-ring1 {
	top: 10%;
	left: 25%;
}

.acls-bio-ring2 {
	bottom: 12%;
	left: 10%;
}

.acls-bio-ring3 {
	bottom: 12%;
	right: 10%;
}

.acls-bio-center {
	position: absolute;
	width: 22%;
	height: 22%;
	border-radius: 50%;
	background: var(--acls-secondary);
	border: calc(var(--acls-size) * 0.03) solid var(--acls-color);
	z-index: 2;
}

@keyframes cps-bio-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* 49. Text: Shimmer Stream */
.acls-text-shimmer {
	font-size: calc(var(--acls-size) * 0.35);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	background: linear-gradient(110deg, var(--acls-color) 25%, #ffffff 50%, var(--acls-color) 75%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: cps-txt-shimmer 1.8s ease-in-out infinite;
	display: inline-block;
}

@keyframes cps-txt-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

/* 50. Text: 3D Flip */
.acls-text-flip {
	font-size: calc(var(--acls-size) * 0.35);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--acls-color);
	perspective: 400px;
	display: inline-block;
	animation: cps-txt-flip 2s ease-in-out infinite;
}

@keyframes cps-txt-flip {
	0% {
		transform: rotateX(0deg);
		opacity: 1;
	}
	50% {
		transform: rotateX(180deg);
		opacity: 0.3;
		color: var(--acls-secondary);
	}
	100% {
		transform: rotateX(360deg);
		opacity: 1;
	}
}

/* 51. Lunar Orbiters */
.acls-orbiting-moons {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 400px;
}

.acls-om-planet {
	position: absolute;
	width: 38%;
	height: 38%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--acls-secondary), var(--acls-color));
	box-shadow: 0 0 calc(var(--acls-size) * 0.08) var(--acls-color);
	z-index: 2;
}

.acls-om-track1,
.acls-om-track2 {
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	border: 1px dashed var(--acls-secondary);
	box-sizing: border-box;
}

.acls-om-track1 {
	transform: rotateX(65deg) rotateY(20deg);
	animation: cps-om-spin1 2s linear infinite;
}

.acls-om-track2 {
	transform: rotateX(65deg) rotateY(-40deg);
	animation: cps-om-spin2 1.4s linear infinite reverse;
}

.acls-om-moon1,
.acls-om-moon2 {
	position: absolute;
	top: -10%;
	left: 45%;
	width: calc(var(--acls-size) * 0.14);
	height: calc(var(--acls-size) * 0.14);
	border-radius: 50%;
	background: var(--acls-color);
	box-shadow: 0 0 6px var(--acls-color);
}

.acls-om-moon2 {
	background: var(--acls-secondary);
	box-shadow: 0 0 6px var(--acls-secondary);
}

@keyframes cps-om-spin1 {
	0% { transform: rotateX(65deg) rotateY(20deg) rotateZ(0deg); }
	100% { transform: rotateX(65deg) rotateY(20deg) rotateZ(360deg); }
}

@keyframes cps-om-spin2 {
	0% { transform: rotateX(65deg) rotateY(-40deg) rotateZ(0deg); }
	100% { transform: rotateX(65deg) rotateY(-40deg) rotateZ(360deg); }
}

/* 52. Dual Synchro Gears */
.acls-infinity-gear {
	position: relative;
	width: var(--acls-size);
	height: calc(var(--acls-size) * 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--acls-size) * 0.02);
}

.acls-ig-gear1,
.acls-ig-gear2 {
	position: relative;
	width: calc(var(--acls-size) * 0.48);
	height: calc(var(--acls-size) * 0.48);
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.06) dashed var(--acls-color);
	box-sizing: border-box;
}

.acls-ig-gear1 {
	animation: cps-ig-cw 2s linear infinite;
}

.acls-ig-gear2 {
	border-color: var(--acls-secondary);
	animation: cps-ig-ccw 2s linear infinite;
}

.acls-ig-gear1::after,
.acls-ig-gear2::after {
	content: "";
	position: absolute;
	top: 30%;
	left: 30%;
	width: 40%;
	height: 40%;
	border-radius: 50%;
	background: var(--acls-color);
}

.acls-ig-gear2::after {
	background: var(--acls-secondary);
}

@keyframes cps-ig-cw {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes cps-ig-ccw {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-360deg); }
}

/* 53. Digital Chrono */
.acls-digital-clockwork {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-dc-dial {
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.04) solid var(--acls-secondary);
	box-sizing: border-box;
}

.acls-dc-arc {
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.05) solid transparent;
	border-top-color: var(--acls-color);
	border-right-color: var(--acls-color);
	animation: cps-dc-sweep 1.2s linear infinite;
	box-sizing: border-box;
}

.acls-dc-hand {
	position: absolute;
	bottom: 50%;
	left: 48%;
	width: calc(var(--acls-size) * 0.04);
	height: 38%;
	background: var(--acls-color);
	border-radius: 2px;
	transform-origin: bottom center;
	animation: cps-dc-tick 2.4s steps(12) infinite;
}

@keyframes cps-dc-sweep {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes cps-dc-tick {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 54. Neon Cyber Ring */
.acls-neon-hex {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-nh-hex1,
.acls-nh-hex2 {
	position: absolute;
	width: 85%;
	height: 85%;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6, #ec4899);
	padding: calc(var(--acls-size) * 0.06);
	box-sizing: border-box;
	animation: cps-nh-spin1 3s linear infinite;
}

.acls-nh-hex1::after,
.acls-nh-hex2::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: #ffffff;
}

.acls-nh-hex2 {
	width: 60%;
	height: 60%;
	animation: cps-nh-spin2 2s linear infinite reverse;
}

.acls-nh-beam {
	position: absolute;
	width: 100%;
	height: 4%;
	background: linear-gradient(90deg, transparent, #ec4899, transparent);
	animation: cps-nh-scan 1.5s ease-in-out infinite alternate;
}

@keyframes cps-nh-spin1 {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes cps-nh-spin2 {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-360deg); }
}

@keyframes cps-nh-scan {
	0% { transform: translateY(calc(var(--acls-size) * -0.35)); opacity: 0.2; }
	100% { transform: translateY(calc(var(--acls-size) * 0.35)); opacity: 1; }
}

/* 55. Dot Matrix Wave */
.acls-ripple-matrix {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(var(--acls-size) * 0.1);
	width: var(--acls-size);
	height: var(--acls-size);
	align-items: center;
	justify-items: center;
}

.acls-ripple-matrix div {
	width: calc(var(--acls-size) * 0.2);
	height: calc(var(--acls-size) * 0.2);
	border-radius: 50%;
	background: var(--acls-color);
	animation: cps-rm-scale 1.3s ease-in-out infinite;
}

.acls-ripple-matrix div:nth-child(1) { animation-delay: 0s; }
.acls-ripple-matrix div:nth-child(2), .acls-ripple-matrix div:nth-child(4) { animation-delay: 0.15s; background: var(--acls-secondary); }
.acls-ripple-matrix div:nth-child(3), .acls-ripple-matrix div:nth-child(5), .acls-ripple-matrix div:nth-child(7) { animation-delay: 0.3s; }
.acls-ripple-matrix div:nth-child(6), .acls-ripple-matrix div:nth-child(8) { animation-delay: 0.45s; background: var(--acls-secondary); }
.acls-ripple-matrix div:nth-child(9) { animation-delay: 0.6s; }

@keyframes cps-rm-scale {
	0%, 100% {
		transform: scale(0.35);
		opacity: 0.3;
	}
	50% {
		transform: scale(1.15);
		opacity: 1;
	}
}

/* 56. Star Constellation */
.acls-constellation {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-st-star1,
.acls-st-star2,
.acls-st-star3,
.acls-st-star4 {
	position: absolute;
	width: calc(var(--acls-size) * 0.18);
	height: calc(var(--acls-size) * 0.18);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	background: var(--acls-color);
	box-shadow: 0 0 8px var(--acls-color);
	animation: cps-st-twinkle 1.4s ease-in-out infinite alternate;
}

.acls-st-star1 { top: 12%; left: 18%; animation-delay: 0s; }
.acls-st-star2 { top: 18%; right: 15%; animation-delay: 0.35s; background: var(--acls-secondary); }
.acls-st-star3 { bottom: 15%; right: 20%; animation-delay: 0.7s; }
.acls-st-star4 { bottom: 18%; left: 22%; animation-delay: 1.05s; background: var(--acls-secondary); }

.acls-st-line1,
.acls-st-line2 {
	position: absolute;
	width: 75%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--acls-color), transparent);
	opacity: 0.6;
	animation: cps-st-rot 4s linear infinite;
}

.acls-st-line2 {
	animation-duration: 2.8s;
	animation-direction: reverse;
}

@keyframes cps-st-twinkle {
	0% { transform: scale(0.6) rotate(0deg); opacity: 0.4; }
	100% { transform: scale(1.25) rotate(45deg); opacity: 1; }
}

@keyframes cps-st-rot {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 57. Tesla Plasma Ball */
.acls-plasma-ball {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-pb-shell {
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.04) solid rgba(139, 92, 246, 0.4);
	box-shadow: inset 0 0 10px rgba(236, 72, 153, 0.3), 0 0 12px rgba(59, 130, 246, 0.3);
	box-sizing: border-box;
}

.acls-pb-core {
	position: absolute;
	width: 25%;
	height: 25%;
	border-radius: 50%;
	background: #ec4899;
	box-shadow: 0 0 12px #ec4899;
	z-index: 2;
}

.acls-pb-spark1,
.acls-pb-spark2 {
	position: absolute;
	width: 80%;
	height: 80%;
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	border: calc(var(--acls-size) * 0.04) solid #8b5cf6;
	border-top-color: #06b6d4;
	animation: cps-pb-discharge1 1.6s ease-in-out infinite alternate;
}

.acls-pb-spark2 {
	border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
	border-color: #3b82f6;
	border-left-color: #ec4899;
	animation: cps-pb-discharge2 2.1s ease-in-out infinite alternate;
}

@keyframes cps-pb-discharge1 {
	0% { transform: rotate(0deg) scale(0.8); filter: hue-rotate(0deg); }
	100% { transform: rotate(360deg) scale(1.05); filter: hue-rotate(180deg); }
}

@keyframes cps-pb-discharge2 {
	0% { transform: rotate(360deg) scale(1.05); }
	100% { transform: rotate(0deg) scale(0.8); }
}

/* 58. Orbital Satellite */
.acls-satellite-dish {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-sat-dish {
	position: absolute;
	bottom: 20%;
	left: 20%;
	width: 45%;
	height: 45%;
	border-radius: 50%;
	border-top: calc(var(--acls-size) * 0.08) solid var(--acls-color);
	border-left: calc(var(--acls-size) * 0.08) solid var(--acls-color);
	border-right: calc(var(--acls-size) * 0.08) solid transparent;
	border-bottom: calc(var(--acls-size) * 0.08) solid transparent;
	transform: rotate(-30deg);
}

.acls-sat-signal {
	position: absolute;
	top: 38%;
	left: 38%;
	width: calc(var(--acls-size) * 0.1);
	height: calc(var(--acls-size) * 0.1);
	border-radius: 50%;
	background: var(--acls-secondary);
}

.acls-sat-beam1,
.acls-sat-beam2 {
	position: absolute;
	top: 15%;
	right: 15%;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.04) solid transparent;
	border-top-color: var(--acls-color);
	border-right-color: var(--acls-color);
	transform: rotate(15deg);
	box-sizing: border-box;
}

.acls-sat-beam1 {
	width: 50%;
	height: 50%;
	animation: cps-sat-pulse 1.2s ease-out infinite;
}

.acls-sat-beam2 {
	width: 75%;
	height: 75%;
	animation: cps-sat-pulse 1.2s ease-out infinite 0.4s;
}

@keyframes cps-sat-pulse {
	0% { transform: rotate(15deg) scale(0.4); opacity: 0; }
	50% { opacity: 1; }
	100% { transform: rotate(15deg) scale(1.1); opacity: 0; }
}

/* 59. Card Stack Shuffle */
.acls-card-shuffle {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-cs-card1,
.acls-cs-card2,
.acls-cs-card3 {
	position: absolute;
	width: 55%;
	height: 70%;
	border-radius: 6px;
	border: calc(var(--acls-size) * 0.03) solid var(--acls-color);
	background: var(--acls-secondary);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.acls-cs-card1 {
	z-index: 3;
	animation: cps-cs-slide1 1.8s ease-in-out infinite;
}

.acls-cs-card2 {
	z-index: 2;
	background: var(--acls-color);
	border-color: var(--acls-secondary);
	animation: cps-cs-slide2 1.8s ease-in-out infinite;
}

.acls-cs-card3 {
	z-index: 1;
	animation: cps-cs-slide3 1.8s ease-in-out infinite;
}

@keyframes cps-cs-slide1 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	33% { transform: translate(-30%, -15%) rotate(-15deg); }
	66% { transform: translate(15%, 10%) rotate(10deg); }
}

@keyframes cps-cs-slide2 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	33% { transform: translate(25%, -10%) rotate(12deg); }
	66% { transform: translate(-20%, 15%) rotate(-8deg); }
}

@keyframes cps-cs-slide3 {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	33% { transform: translate(0%, 20%) rotate(5deg); }
	66% { transform: translate(0%, -20%) rotate(-5deg); }
}

/* 60. Cascading Halos */
.acls-cascade-rings {
	position: relative;
	width: var(--acls-size);
	height: var(--acls-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acls-cascade-rings div {
	position: absolute;
	border-radius: 50%;
	border: calc(var(--acls-size) * 0.04) solid var(--acls-color);
	box-sizing: border-box;
	animation: cps-cas-expand 1.8s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}

.acls-cascade-rings div:nth-child(1) {
	width: 35%;
	height: 35%;
	animation-delay: 0s;
	border-color: var(--acls-color);
}

.acls-cascade-rings div:nth-child(2) {
	width: 65%;
	height: 65%;
	animation-delay: 0.3s;
	border-color: var(--acls-secondary);
}

.acls-cascade-rings div:nth-child(3) {
	width: 95%;
	height: 95%;
	animation-delay: 0.6s;
	border-color: var(--acls-color);
}

@keyframes cps-cas-expand {
	0% {
		transform: scale(0.6);
		opacity: 0.2;
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	100% {
		transform: scale(0.6);
		opacity: 0.2;
	}
}

/* ==========================================================================
	SECTION 17: Reduced Motion
	========================================================================== */

@media (prefers-reduced-motion: reduce) {
	#acls-overlay,
	.acls-overlay,
	.acls-spinner-wrap,
	.acls-spinner-wrap *,
	.acls-spinner-wrap *::before,
	.acls-spinner-wrap *::after {
		animation-duration: 0.001ms;
		animation-iteration-count: 1;
		scroll-behavior: auto;
		transition-duration: 0.001ms;
	}
}

#acls-overlay.acls-reduced-motion,
#acls-overlay.acls-reduced-motion *,
#acls-overlay.acls-reduced-motion *::before,
#acls-overlay.acls-reduced-motion *::after,
.acls-overlay.acls-reduced-motion,
.acls-overlay.acls-reduced-motion *,
.acls-overlay.acls-reduced-motion *::before,
.acls-overlay.acls-reduced-motion *::after {
	animation-duration: 0.001ms;
	animation-iteration-count: 1;
	transition-duration: 0.001ms;
}

/* ==========================================================================
	SECTION 18: Print
	========================================================================== */

@media print {
	#acls-overlay,
	.acls-overlay {
		display: none;
	}
}