/* AWAKEN shared UI feedback: ripple, busy button spinner, top progress bar, page loading spinner. */

/* Ripple ("water") effect */
.awk-ripple-host {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.awk-ripple {
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	opacity: .26;
	transform: scale(0);
	pointer-events: none;
	animation: awk-ripple .6s cubic-bezier(.2, .6, .35, 1) forwards;
}

@keyframes awk-ripple {
	to {
		transform: scale(1);
		opacity: 0;
	}
}

/* Busy button: text hidden, spinner in its place, no second click */
.awk-busy {
	color: transparent !important;
	pointer-events: none;
	cursor: progress;
}

.awk-busy > * {
	visibility: hidden;
}

.awk-busy::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.05em;
	height: 1.05em;
	margin: -.525em 0 0 -.525em;
	box-sizing: border-box;
	border: 2px solid var(--awk-spin-color, #fff);
	border-right-color: transparent;
	border-radius: 50%;
	animation: awk-spin .7s linear infinite;
}

/* Top progress bar for slower requests */
.awk-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	z-index: 10000;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}

.awk-progress.show {
	opacity: 1;
}

.awk-progress span {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 35%;
	background: var(--accent, #4fd1c5);
	box-shadow: 0 0 8px var(--accent, #4fd1c5);
	animation: awk-progress 1.1s ease-in-out infinite;
}

@keyframes awk-progress {
	from {
		left: -35%;
	}

	to {
		left: 100%;
	}
}

/* Page loading placeholder */
.awk-loading {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 28px 4px;
	color: var(--muted, #9fb3c8);
}

.awk-spinner {
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border: 3px solid var(--accent, #4fd1c5);
	border-right-color: transparent;
	border-radius: 50%;
	animation: awk-spin .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.awk-busy::after,
	.awk-spinner {
		animation-duration: 1.6s;
	}

	.awk-progress span {
		animation: none;
		left: 0;
		width: 100%;
		opacity: .7;
	}
}