/*
 * CP Spinners - Public Stylesheet
 *
 * Frontend overlay and spinner animation styles for CP Spinners.
 *
 * @package CP_Spinners
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#cps-overlay.cps-z-max,
.cps-overlay.cps-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))) {
	#cps-overlay.cps-blur-sm,
	#cps-overlay.cps-blur-md,
	#cps-overlay.cps-blur-lg,
	.cps-overlay.cps-blur-sm,
	.cps-overlay.cps-blur-md,
	.cps-overlay.cps-blur-lg {
		background: rgba(255, 255, 255, 0.92);
	}
}

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

.cps-spinner-wrap {
	--cps-color: #4f46e5;
	--cps-secondary: #e0e7ff;
	--cps-size: 60px;
	--cps-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(--cps-shadow));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cps-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
   ========================================================================== */

.cps-dual-ring {
	width: var(--cps-size);
	height: var(--cps-size);
	border: calc(var(--cps-size) * 0.1) solid var(--cps-secondary);
	border-top-color: var(--cps-color);
	border-bottom-color: var(--cps-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
   ========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cps-circle .cps-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
   ========================================================================== */

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

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

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

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

.cps-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);
	}
}

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

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

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

.cps-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);
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cps-dot-spin .cps-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
   ========================================================================== */

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

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

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

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

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

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

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

.cps-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);
	}
}

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

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

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

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

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

.cps-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
   ========================================================================== */

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

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

.cps-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;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cps-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
   ========================================================================== */

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

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

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

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

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

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

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

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

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

.cps-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);
	}
}

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

.cps-square-spin div {
	width: 80%;
	height: 80%;
	margin: 10%;
	background: linear-gradient(135deg, var(--cps-color), var(--cps-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);
	}
}

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

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

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

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

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

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

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

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

.cps-fold .cps-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);
	}
}

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

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

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

.cps-flip {
	width: calc(var(--cps-size) * 0.7);
	height: calc(var(--cps-size) * 0.7);
	background: linear-gradient(135deg, var(--cps-color), var(--cps-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);
	}
}

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

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

.cps-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
   ========================================================================== */

.cps-gradient-ring {
	border-radius: 50%;
	background: conic-gradient(var(--cps-color) 0deg, var(--cps-secondary) 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - calc(var(--cps-size) * 0.12)), #000 0);
	mask: radial-gradient(farthest-side, transparent calc(100% - calc(var(--cps-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))) {
	.cps-gradient-ring,
	.cps-color-wheel {
		border: calc(var(--cps-size) * 0.1) solid var(--cps-secondary);
		border-top-color: var(--cps-color);
		background: transparent;
	}
}

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

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

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

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

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

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

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

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

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

.cps-chase-dot:nth-child(6),
.cps-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);
	}
}

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

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

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

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

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

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

.cps-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);
	}
}

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

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

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

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

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

.cps-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
   ========================================================================== */

.cps-gear {
	position: relative;
	background: var(--cps-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))) {
	.cps-gear {
		border: calc(var(--cps-size) * 0.12) dashed var(--cps-color);
		background: transparent;
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cps-target div:nth-child(3) {
	width: 33%;
	height: 33%;
	background: var(--cps-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);
	}
}

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

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

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

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

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

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

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

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

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

	50% {
		opacity: 1;
	}
}

.cps-heartbeat {
	width: calc(var(--cps-size) * 1.5);
	height: var(--cps-size);
	background: linear-gradient(
		to right,
		transparent 20%,
		var(--cps-color) 20%,
		var(--cps-color) 25%,
		transparent 25%,
		transparent 40%,
		var(--cps-color) 40%,
		var(--cps-color) 45%,
		transparent 45%,
		transparent 60%,
		var(--cps-color) 60%,
		var(--cps-color) 65%,
		transparent 65%,
		transparent 80%,
		var(--cps-color) 80%,
		var(--cps-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%);
	}
}

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

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

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

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

	100% {
		width: 100%;
	}
}

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

.cps-music-bars span {
	width: calc(var(--cps-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;
}

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

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

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

.cps-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);
	}
}

.cps-hourglass-color {
	position: relative;
	background: var(--cps-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;
}

.cps-hourglass-color::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--cps-color), var(--cps-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
   ========================================================================== */

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

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

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

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

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

.cps-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);
	}
}

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

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

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

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

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

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

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

.cps-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%);
	}
}

.cps-text-glow {
	letter-spacing: 0.08em;
	text-shadow: 0 0 8px var(--cps-color), 0 0 18px var(--cps-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(--cps-color);
	}

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

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

.cps-rainbow-circle {
	width: var(--cps-size);
	height: var(--cps-size);
	border: calc(var(--cps-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%);
	}
}

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

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

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

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

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

.cps-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(--cps-size) * -0.3)) scale(1.2);
	}
}

.cps-rainbow-bar {
	width: calc(var(--cps-size) * 1.5);
	height: calc(var(--cps-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;
	}
}

.cps-color-pulse {
	width: var(--cps-size);
	height: var(--cps-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);
	}
}

.cps-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(--cps-size) * 0.15)), #000 0);
	mask: radial-gradient(farthest-side, transparent calc(100% - calc(var(--cps-size) * 0.15)), #000 0);
	animation: cps-rainbow-circle-spin 2s linear infinite;
}

/* ==========================================================================
   SECTION 15: Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	#cps-overlay,
	.cps-overlay,
	.cps-spinner-wrap,
	.cps-spinner-wrap *,
	.cps-spinner-wrap *::before,
	.cps-spinner-wrap *::after {
		animation-duration: 0.001ms;
		animation-iteration-count: 1;
		scroll-behavior: auto;
		transition-duration: 0.001ms;
	}
}

#cps-overlay.cps-reduced-motion,
#cps-overlay.cps-reduced-motion *,
#cps-overlay.cps-reduced-motion *::before,
#cps-overlay.cps-reduced-motion *::after,
.cps-overlay.cps-reduced-motion,
.cps-overlay.cps-reduced-motion *,
.cps-overlay.cps-reduced-motion *::before,
.cps-overlay.cps-reduced-motion *::after {
	animation-duration: 0.001ms;
	animation-iteration-count: 1;
	transition-duration: 0.001ms;
}

/* ==========================================================================
   SECTION 16: Print
   ========================================================================== */

@media print {
	#cps-overlay,
	.cps-overlay {
		display: none;
	}
}