@tailwind utilities;

/* Cursor animation */
.ajaxpress-animate-cursor,
.ajaxpress-animate-cursor * {
	cursor: var(--ajaxpress-cursor-mode);
}

/* Comment form processing state */
.ajaxpress-comment-form-processing {
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
	cursor: progress;
	position: relative;
}

.ajaxpress-comment-form-processing:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--ajaxpress-color-background, #fff);
	opacity: 0.5;
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	background-image: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 200% 100%;
	animation: ajaxpress-comment-shimmer 1.2s linear infinite;
	pointer-events: none;
}

@keyframes ajaxpress-comment-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Progress bar */
.ajaxpress-progressbar {
	@apply ap-fixed ap-left-0 ap-z-[9999] ap-w-0;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

.ajaxpress-progressbar.progressbar-wave {
	background: linear-gradient(
		90deg,
		var(--progressbar-color) 0%,
		color-mix(in srgb, var(--progressbar-color) 70%, white) 50%,
		var(--progressbar-color) 100%
	);
	background-size: 200% 100%;
	animation: progressbar-wave var(--animation-speed, 1.5s) linear infinite;
}

@keyframes progressbar-wave {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.ajaxpress-progressbar.preview {
	@apply ap-absolute;
}

.ajaxpress-progressbar-hidden {
	@apply ap-opacity-0 ap-z-0;
}

/* Spinner */
.ajaxpress-spinner {
	@apply ap-fixed ap-z-30 ap-hidden ap-left-0 ap-top-0 ap-w-full ap-h-full ap-items-center ap-justify-center ap-transition-all ap-duration-500;
}

.ajaxpress-spinner-hidden {
	animation: fade-out 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.ajaxpress-spinner:not(.ajaxpress-spinner-hidden) {
	@apply ap-flex;
}

.ajaxpress-spinner-overlay {
	@apply ap-absolute ap-left-0 ap-top-0 ap-w-full ap-h-full ap-z-30;
}

.ajaxpress-spinner-content {
	@apply ap-flex ap-items-center ap-justify-center ap-z-40 ap-transition-all ap-px-4 ap-py-2;
	max-width: 90vw;
	box-sizing: border-box;
}

.ajaxpress-spinner-image {
	@apply ap-transition-all ap-h-auto ap-flex-shrink-0;
	max-width: 80px;
	max-height: 80px;
}

.ajaxpress-spinner-text {
	@apply ap-transition-all ap-text-center;
	word-break: break-word;
	overflow-wrap: break-word;
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}
}

/* ===== FADE ===== */
.ajaxpress-animate-fade-out {
	animation: ap-fade-out var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ajaxpress-animate-fade-in {
	animation: ap-fade-in var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ap-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes ap-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ===== SLIDE ===== */
.ajaxpress-animate-slide-out {
	animation: ap-slide-out var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ajaxpress-animate-slide-in {
	animation: ap-slide-in var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ap-slide-out {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(-30px); opacity: 0; }
}

@keyframes ap-slide-in {
	from { transform: translateY(30px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* ===== FLIP ===== */
.ajaxpress-animate-flip-out {
	animation: ap-flip-out var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ajaxpress-animate-flip-in {
	animation: ap-flip-in var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ap-flip-out {
	from { transform: perspective(800px) rotateX(0); opacity: 1; }
	to { transform: perspective(800px) rotateX(90deg); opacity: 0; }
}

@keyframes ap-flip-in {
	from { transform: perspective(800px) rotateX(-90deg); opacity: 0; }
	to { transform: perspective(800px) rotateX(0); opacity: 1; }
}

/* ===== SCALE ===== */
.ajaxpress-animate-scale-out {
	animation: ap-scale-out var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ajaxpress-animate-scale-in {
	animation: ap-scale-in var(--ajaxpress-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ap-scale-out {
	from { transform: scale(1); opacity: 1; }
	to { transform: scale(0.9); opacity: 0; }
}

@keyframes ap-scale-in {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

/* Accessibility */
.ajaxpress-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border-width: 0 !important;
}

/* Enhanced Focus Indicators - Only active for keyboard users */
.ajaxpress-enhanced-focus.ajaxpress-keyboard-user a:focus,
.ajaxpress-enhanced-focus.ajaxpress-keyboard-user button:focus,
.ajaxpress-enhanced-focus.ajaxpress-keyboard-user input:focus,
.ajaxpress-enhanced-focus.ajaxpress-keyboard-user select:focus,
.ajaxpress-enhanced-focus.ajaxpress-keyboard-user textarea:focus,
.ajaxpress-enhanced-focus.ajaxpress-keyboard-user [tabindex]:focus {
	outline: 3px solid #4f46e5 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.3) !important;
}

/* High contrast mode support */
@media (forced-colors: active) {
	.ajaxpress-enhanced-focus.ajaxpress-keyboard-user a:focus,
	.ajaxpress-enhanced-focus.ajaxpress-keyboard-user button:focus,
	.ajaxpress-enhanced-focus.ajaxpress-keyboard-user input:focus,
	.ajaxpress-enhanced-focus.ajaxpress-keyboard-user select:focus,
	.ajaxpress-enhanced-focus.ajaxpress-keyboard-user textarea:focus,
	.ajaxpress-enhanced-focus.ajaxpress-keyboard-user [tabindex]:focus {
		outline: 3px solid CanvasText !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ajaxpress-animate-fade-out,
	.ajaxpress-animate-fade-in,
	.ajaxpress-animate-slide-out,
	.ajaxpress-animate-slide-in,
	.ajaxpress-animate-flip-out,
	.ajaxpress-animate-flip-in,
	.ajaxpress-animate-scale-out,
	.ajaxpress-animate-scale-in {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.ajaxpress-progressbar {
		transition: none !important;
	}

	html {
		scroll-behavior: auto !important;
	}
}