/*
 * CapoFine skeleton loading — shared style for Onboard and Hire. Keep this file byte-identical in
 * Onboard client/public/capofine-skeleton.css and Hire frontend/app/capofine-skeleton.css.
 *
 * - Blocks use the warm neutrals of the shared tokens and a soft highlight sweep (1.4s).
 * - A region stays invisible for 180ms and then fades in, so fast loads never flash a skeleton.
 * - A region that continues a skeleton already on screen (--immediate) shows at once, so a load never blinks.
 * - A button busy with its own action shows three pulsing dots (.cf-busy-dots), never a spinning circle.
 * - prefers-reduced-motion: static blocks, no sweep and no fade; still dots.
 */
:root {
	--cf-skeleton-base: #ece9e7;
	--cf-skeleton-highlight: #f7f5f4;
	--cf-skeleton-radius: 8px;
	--cf-skeleton-duration: 1.4s;
	--cf-skeleton-delay: 180ms;
}

.cf-skeleton-region {
	opacity: 0;
	animation: cf-skeleton-in 160ms ease-out var(--cf-skeleton-delay) forwards;
}

.cf-skeleton-region--immediate {
	opacity: 1;
	animation: none;
}

.cf-skeleton {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--cf-skeleton-base);
	border-radius: var(--cf-skeleton-radius);
}

.cf-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, var(--cf-skeleton-highlight), transparent);
	animation: cf-skeleton-sweep var(--cf-skeleton-duration) ease-in-out infinite;
}

.cf-skeleton--circle {
	border-radius: 9999px;
}

.cf-skeleton-surface {
	background: #ffffff;
	border: 1px solid #ddd9d6;
	border-radius: 18px;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.cf-busy-dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 1.5em;
}

.cf-busy-dots > span {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background-color: currentColor;
	opacity: 0.3;
	animation: cf-busy-pulse 1s ease-in-out infinite;
}

.cf-busy-dots > span:nth-child(2) {
	animation-delay: 0.15s;
}

.cf-busy-dots > span:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes cf-skeleton-in {
	to {
		opacity: 1;
	}
}

@keyframes cf-busy-pulse {
	50% {
		opacity: 1;
	}
}

@keyframes cf-skeleton-sweep {
	to {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cf-skeleton::after {
		display: none;
		animation: none;
	}

	.cf-skeleton-region {
		animation-duration: 1ms;
	}

	.cf-busy-dots > span {
		animation: none;
		opacity: 0.6;
	}
}