/**
 * RAWASYSTEM Express Checkout - Checkout Animations
 *
 * Animation keyframes, animation utility classes, staggered animation
 * support, CSS spinner, state transitions, and reduced-motion preferences.
 *
 * All animation classes are scoped inside .rawasystem-checkout-wrapper.
 * Keyframes are global (as required by CSS spec) but named with the
 * rawasystem- prefix to avoid collisions.
 *
 * @package RAWASYSTEM_Express_Checkout
 * @version 1.0.0
 */

/* ==========================================================================
   1. Keyframes — Core Animations
   ========================================================================== */

/* -- Fade In --------------------------------------------------------- */
@keyframes rawasystem-fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* -- Slide Up -------------------------------------------------------- */
@keyframes rawasystem-slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -- Slide Down ------------------------------------------------------ */
@keyframes rawasystem-slideDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -- Scale In -------------------------------------------------------- */
@keyframes rawasystem-scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* -- Pulse ----------------------------------------------------------- */
@keyframes rawasystem-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

/* -- Shake (error) --------------------------------------------------- */
@keyframes rawasystem-shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-4px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(4px);
	}
}

/* -- Shimmer (skeleton loading) -------------------------------------- */
@keyframes rawasystem-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

/* -- Checkmark draw -------------------------------------------------- */
@keyframes rawasystem-checkmark {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		transform: scale(1.15);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* -- Spin (loading spinner) ------------------------------------------ */
@keyframes rawasystem-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* -- Bounce In (success icon) ---------------------------------------- */
@keyframes rawasystem-bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

/* ==========================================================================
   2. Keyframes — Slide Transitions (for step changes)
   ========================================================================== */

/* -- Slide Left (entering from right, going forward) ----------------- */
@keyframes rawasystem-slide-left {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* -- Slide Right (entering from left, going backward) ---------------- */
@keyframes rawasystem-slide-right {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* -- Slide Out Left (exiting to the left) ---------------------------- */
@keyframes rawasystem-slide-out-left {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(-100%);
		opacity: 0;
	}
}

/* -- Slide Out Right (exiting to the right) -------------------------- */
@keyframes rawasystem-slide-out-right {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

/* ==========================================================================
   3. Keyframes — Additional UI Animations
   ========================================================================== */

/* -- Fade Up (subtle entrance from below) ---------------------------- */
@keyframes rawasystem-fade-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -- Bounce (gentle bounce for attention) ---------------------------- */
@keyframes rawasystem-bounce {
	0%, 100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-8px);
	}
	50% {
		transform: translateY(-4px);
	}
	70% {
		transform: translateY(-6px);
	}
}

/* -- Progress bar fill ----------------------------------------------- */
@keyframes rawasystem-progress {
	from {
		width: 0%;
	}
}

/* -- Highlight flash ------------------------------------------------- */
@keyframes rawasystem-highlight {
	0% {
		background-color: transparent;
	}
	30% {
		background-color: rgba(99, 102, 241, 0.08);
	}
	100% {
		background-color: transparent;
	}
}

/* -- Slide down for error messages ----------------------------------- */
@keyframes rawasystem-error-slide-down {
	from {
		opacity: 0;
		transform: translateY(-8px);
		max-height: 0;
	}
	to {
		opacity: 1;
		transform: translateY(0);
		max-height: 40px;
	}
}

/* -- Ripple effect for button clicks --------------------------------- */
@keyframes rawasystem-ripple {
	0% {
		transform: scale(0);
		opacity: 0.4;
	}
	100% {
		transform: scale(4);
		opacity: 0;
	}
}

/* -- Confetti burst -------------------------------------------------- */
@keyframes rawasystem-confetti {
	0% {
		opacity: 0;
		transform: translateY(0) rotate(0deg);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-40px) rotate(360deg);
	}
}

/* ==========================================================================
   4. Animation Utility Classes
   ========================================================================== */

/* -- Fade In --------------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-fadeIn {
	animation: rawasystem-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Slide Up -------------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-slideUp {
	animation: rawasystem-slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Slide Down ------------------------------------------------------ */
.rawasystem-checkout-wrapper .rawasystem-animate-slideDown {
	animation: rawasystem-slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Scale In -------------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-scaleIn {
	animation: rawasystem-scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* -- Pulse ----------------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-pulse {
	animation: rawasystem-pulse 2s ease-in-out infinite;
}

/* -- Shake ----------------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-shake {
	animation: rawasystem-shake 0.4s ease-in-out;
}

/* -- Bounce In ------------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-bounceIn {
	animation: rawasystem-bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* -- Spin ------------------------------------------------------------ */
.rawasystem-checkout-wrapper .rawasystem-animate-spin {
	animation: rawasystem-spin 0.6s linear infinite;
}

/* -- Entry animation (generic) --------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-in {
	animation: rawasystem-fade-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Exit animation (generic) ---------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-out {
	animation: rawasystem-fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
}

/* ==========================================================================
   5. Directional Slide Animation Classes
   ========================================================================== */

/* -- Slide in from left (going backward to a previous step) --------- */
.rawasystem-checkout-wrapper .rawasystem-animate-in--slide-left {
	animation: rawasystem-slide-left 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Slide in from right (going forward to next step) --------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-in--slide-right {
	animation: rawasystem-slide-right 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Slide out to the left ------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-animate-out--slide-left {
	animation: rawasystem-slide-out-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Slide out to the right ------------------------------------------ */
.rawasystem-checkout-wrapper .rawasystem-animate-out--slide-right {
	animation: rawasystem-slide-out-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==========================================================================
   6. Staggered Animation Support
   ========================================================================== */

/* Apply to a parent element to stagger children animations.
   Children should have the .rawasystem-stagger-item class. */

.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item {
	opacity: 0;
	animation: rawasystem-slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(1)  { animation-delay: 0.05s; }
.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(2)  { animation-delay: 0.1s; }
.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(3)  { animation-delay: 0.15s; }
.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(4)  { animation-delay: 0.2s; }
.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(5)  { animation-delay: 0.25s; }
.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(6)  { animation-delay: 0.3s; }
.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(7)  { animation-delay: 0.35s; }
.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(8)  { animation-delay: 0.4s; }
.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(9)  { animation-delay: 0.45s; }
.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item:nth-child(10) { animation-delay: 0.5s; }

/* Faster stagger for dense lists */
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item {
	animation-duration: 0.3s;
}

.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(1)  { animation-delay: 0.02s; }
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(2)  { animation-delay: 0.05s; }
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(3)  { animation-delay: 0.08s; }
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(4)  { animation-delay: 0.11s; }
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(5)  { animation-delay: 0.14s; }
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(6)  { animation-delay: 0.17s; }
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(7)  { animation-delay: 0.2s; }
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(8)  { animation-delay: 0.23s; }
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(9)  { animation-delay: 0.26s; }
.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item:nth-child(10) { animation-delay: 0.29s; }

/* Fade-in stagger variant */
.rawasystem-checkout-wrapper .rawasystem-stagger--fade > .rawasystem-stagger-item {
	animation-name: rawasystem-fadeIn;
	animation-duration: 0.25s;
}

/* Scale-in stagger variant */
.rawasystem-checkout-wrapper .rawasystem-stagger--scale > .rawasystem-stagger-item {
	animation-name: rawasystem-scaleIn;
	animation-duration: 0.35s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   7. CSS Spinner
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2.5px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: rawasystem-spin 0.6s linear infinite;
}

.rawasystem-checkout-wrapper .rawasystem-spinner--dark {
	border-color: rgba(0, 0, 0, 0.1);
	border-top-color: var(--rawasystem-primary);
}

.rawasystem-checkout-wrapper .rawasystem-spinner--sm {
	width: 14px;
	height: 14px;
	border-width: 2px;
}

.rawasystem-checkout-wrapper .rawasystem-spinner--lg {
	width: 32px;
	height: 32px;
	border-width: 3px;
}

/* Spinner centered inside a button */
.rawasystem-checkout-wrapper .rawasystem-btn-primary .rawasystem-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -10px;
	margin-left: -10px;
}

.rawasystem-checkout-wrapper .rawasystem-btn-next .rawasystem-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -10px;
	margin-left: -10px;
}

/* Full-page loading overlay */
.rawasystem-checkout-wrapper .rawasystem-loading-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(2px);
	z-index: var(--rawasystem-z-overlay);
	border-radius: inherit;
	animation: rawasystem-fadeIn 0.2s ease-out;
}

/* ==========================================================================
   8. State-Based Animation Classes
   ========================================================================== */

/* -- Loading state --------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-is-loading {
	pointer-events: none;
	position: relative;
}

.rawasystem-checkout-wrapper .rawasystem-is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.6);
	border-radius: inherit;
	z-index: 2;
}

/* -- Success state --------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-is-success .rawasystem-success-icon {
	animation: rawasystem-bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rawasystem-checkout-wrapper .rawasystem-is-success .rawasystem-success-message {
	animation: rawasystem-fade-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

/* -- Error state ----------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-is-error .rawasystem-input-error {
	animation: rawasystem-shake 0.4s ease-in-out;
}

.rawasystem-checkout-wrapper .rawasystem-is-error .rawasystem-field-error {
	animation: rawasystem-error-slide-down 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* -- Highlight updated values ---------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-is-highlighted {
	animation: rawasystem-highlight 1s ease-out;
}

/* -- CTA pulse ------------------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-btn-primary.rawasystem-pulse {
	animation: rawasystem-pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   9. Transition Utility Classes
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-transition-all {
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rawasystem-checkout-wrapper .rawasystem-transition-fast {
	transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.rawasystem-checkout-wrapper .rawasystem-transition-slow {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rawasystem-checkout-wrapper .rawasystem-transition-spring {
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rawasystem-checkout-wrapper .rawasystem-transition-none {
	transition: none !important;
}

/* Transform utilities for hover effects */
.rawasystem-checkout-wrapper .rawasystem-hover-lift:hover {
	transform: translateY(-2px);
}

.rawasystem-checkout-wrapper .rawasystem-hover-scale:hover {
	transform: scale(1.02);
}

.rawasystem-checkout-wrapper .rawasystem-hover-grow:hover {
	transform: scale(1.05);
}

.rawasystem-checkout-wrapper .rawasystem-active-press:active {
	transform: scale(0.97);
}

/* ==========================================================================
   10. Reduced Motion — Respect user preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.rawasystem-checkout-wrapper .rawasystem-animate-fadeIn,
	.rawasystem-checkout-wrapper .rawasystem-animate-slideUp,
	.rawasystem-checkout-wrapper .rawasystem-animate-slideDown,
	.rawasystem-checkout-wrapper .rawasystem-animate-scaleIn,
	.rawasystem-checkout-wrapper .rawasystem-animate-pulse,
	.rawasystem-checkout-wrapper .rawasystem-animate-shake,
	.rawasystem-checkout-wrapper .rawasystem-animate-bounceIn,
	.rawasystem-checkout-wrapper .rawasystem-animate-spin,
	.rawasystem-checkout-wrapper .rawasystem-animate-in,
	.rawasystem-checkout-wrapper .rawasystem-animate-out,
	.rawasystem-checkout-wrapper .rawasystem-animate-in--slide-left,
	.rawasystem-checkout-wrapper .rawasystem-animate-in--slide-right,
	.rawasystem-checkout-wrapper .rawasystem-animate-out--slide-left,
	.rawasystem-checkout-wrapper .rawasystem-animate-out--slide-right {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-stagger > .rawasystem-stagger-item,
	.rawasystem-checkout-wrapper .rawasystem-stagger--fast > .rawasystem-stagger-item,
	.rawasystem-checkout-wrapper .rawasystem-stagger--fade > .rawasystem-stagger-item,
	.rawasystem-checkout-wrapper .rawasystem-stagger--scale > .rawasystem-stagger-item {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-slider-track {
		transition: none !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-slider-container {
		transition: none !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-spinner {
		animation-duration: 1.5s !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-btn-primary.rawasystem-pulse {
		animation: none !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-scarcity-dot {
		animation: none !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-progress-fill {
		transition: none !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-urgency-bar::before {
		animation: none !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-urgency-bar svg,
	.rawasystem-checkout-wrapper .rawasystem-urgency-bar .rawasystem-urgency-icon {
		animation: none !important;
	}

	.rawasystem-checkout-wrapper .rawasystem-success-icon::before {
		animation: none !important;
	}

	/* Disable staggered step content animations */
	.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}