/**
 * components/skeleton.css — Loading state animations
 *
 * .mjc-skeleton        — Shimmer placeholder for content loading
 * .mjc-form-loading    — Applied to form during Ajax submission
 *
 * @package MJC_Fintech_Child
 */

/* =====================================================
   SKELETON SHIMMER
   ===================================================== */

.mjc-skeleton {
	background: linear-gradient(
		90deg,
		var(--color-border)          0%,
		rgba(255, 255, 255, 0.6)    50%,
		var(--color-border)         100%
	);
	background-size: 200% 100%;
	animation:       mjc-skeleton-shimmer 1.6s ease-in-out infinite;
	border-radius:   var(--radius-sm);
	pointer-events:  none;
}

@keyframes mjc-skeleton-shimmer {
	0%   { background-position:  200% 0; }
	100% { background-position: -200% 0; }
}


/* =====================================================
   FORM SUBMISSION LOADING STATE
   ===================================================== */

.mjc-form-loading {
	position:       relative;
	pointer-events: none;
}

.mjc-form-loading > * {
	opacity:    0.4;
	transition: opacity var(--transition-base);
}

.mjc-form-loading::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(34, 211, 238, 0.10),
		transparent
	);
	background-size: 50% 100%;
	animation:       mjc-skeleton-shimmer 1.2s infinite;
}


/* =====================================================
   REDUCED MOTION
   ===================================================== */

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

	.mjc-form-loading::after {
		animation: none;
	}
}