/* ========== MOTION SYSTEM - LUXURY ENTERPRISE LANGUAGE ========== */
/* Inspired by Apple & Stripe - Minimalist Animated Philosophy */

/* ========== 1. MOTION VARIABLES & TIMING ========== */
:root {
	/* Timing - Carefully tuned easing curves */
	--timing-ultra-fast: 150ms;
	--timing-fast: 300ms;
	--timing-standard: 450ms;
	--timing-slow: 600ms;
	--timing-very-slow: 900ms;

	/* Easing curves - Physics-based */
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

	/* Apple-inspired curves */
	--ease-apple: cubic-bezier(0.42, 0, 0.58, 1);
	--ease-apple-natural: cubic-bezier(0.22, 1, 0.36, 1);

	/* Stripe-inspired curves */
	--ease-stripe: cubic-bezier(0.25, 0.8, 0.25, 1);

	/* Motion scales for different components */
	--motion-scale-small: 2px;
	--motion-scale-medium: 4px;
	--motion-scale-large: 8px;
}

/* ========== 2. MAGNETIC BUTTONS EFFECT ========== */
/* Subtle pull effect when hovering near button */

@keyframes magneticPull {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		filter: brightness(1.02);
	}
}

@keyframes glowExpand {
	0% {
		box-shadow: 0 0 0 0 rgba(239, 218, 85, 0.4);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(239, 218, 85, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(239, 218, 85, 0);
	}
}

.btn {
	position: relative;
	overflow: hidden;
	will-change: transform, box-shadow;
	transition: all var(--timing-standard) var(--ease-apple-natural);
}

/* Magnetic hover effect */
.btn:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Active magnetic press */
.btn:active {
	transform: translateY(0) scale(0.96);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Glow pulse on primary buttons */
.btn-primary {
	will-change: box-shadow;
}

.btn-primary:hover {
	animation: glowExpand 1.2s ease-out infinite;
	box-shadow: 0 12px 32px rgba(239, 218, 85, 0.25);
}

/* Enhanced button text animation */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transform: translateX(-100%);
	opacity: 0;
	transition: all var(--timing-fast) var(--ease-smooth);
}

.btn:hover::before {
	transform: translateX(100%);
	opacity: 1;
}

/* ========== 3. GRADIENT ANIMATIONS - SUBTLE ========== */
/* Moving gradients that feel premium and dynamic */

@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradientRotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Hero background animation removed */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(76, 46, 178, 0.1) 0%,
		rgba(239, 218, 85, 0.1) 50%,
		rgba(76, 46, 178, 0.1) 100%
	);
	pointer-events: none;
	z-index: 0;
}

/* Animated gradient text */
.gradient-text {
	background: linear-gradient(135deg, var(--blue) 0%, var(--green) 50%, var(--blue) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradientShift var(--timing-very-slow) var(--ease-smooth) infinite;
}

/* Value card gradient hover */
.value {
	--gradient-angle: 135deg;
	background: linear-gradient(var(--gradient-angle), var(--light) 0%, #f0f8ff 100%);
	background-size: 100% 100%;
	transition: background var(--timing-standard) var(--ease-smooth);
	will-change: background;
}

.value:hover {
	background: linear-gradient(calc(var(--gradient-angle) + 45deg), #f0f8ff 0%, var(--light) 100%);
}

/* ========== 4. TEXTURE REVEAL ON SCROLL ========== */
/* Progressive texture and detail reveal */

@keyframes textureReveal {
	0% {
		opacity: 0;
		clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
	}
	100% {
		opacity: 1;
		clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
	}
}

@keyframes textureSlideUp {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Progressive texture reveal for sections */
.section-texture {
	position: relative;
	overflow: hidden;
}

.section-texture::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(circle at 20% 50%, rgba(239, 218, 85, 0.02) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(76, 46, 178, 0.02) 0%, transparent 50%);
	opacity: 0;
	animation: fadeIn var(--timing-slow) var(--ease-smooth) 0.3s forwards;
	pointer-events: none;
	z-index: -1;
}

/* Card texture reveal on scroll */
.card,
.value,
.member {
	position: relative;
}

.card::after,
.value::after,
.member::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, transparent 50%, rgba(0, 0, 0, 0.02) 100%);
	opacity: 0;
	transition: opacity var(--timing-standard) var(--ease-smooth);
	pointer-events: none;
	border-radius: inherit;
}

.card:hover::after,
.value:hover::after,
.member:hover::after {
	opacity: 1;
}

/* ========== 5. PERSPECTIVE SHIFTS - 3D DEPTH ========== */
/* Subtle 3D rotation for depth perception */

@keyframes perspectiveRotateX {
	0%,
	100% {
		transform: perspective(1000px) rotateX(0deg);
	}
	50% {
		transform: perspective(1000px) rotateX(2deg);
	}
}

@keyframes perspectiveRotateY {
	0%,
	100% {
		transform: perspective(1200px) rotateY(0deg);
	}
	50% {
		transform: perspective(1200px) rotateY(-2deg);
	}
}

/* Card 3D tilt on hover */
.card-3d,
.value-3d,
.member-3d {
	perspective: 1200px;
	will-change: transform;
}

.card-3d:hover,
.value-3d:hover,
.member-3d:hover {
	transform: perspective(1200px) rotateY(4deg) rotateX(-2deg);
}

/* Smooth perspective transition */
.card-perspective,
.value-perspective {
	transition: transform var(--timing-standard) var(--ease-smooth);
}

/* ========== 6. LIQUID MORPHING EFFECTS ========== */
/* Smooth morphing between states */

@keyframes liquidMorphSmooth {
	0% {
		border-radius: 12px;
		transform: scale(1) skewY(0deg);
	}
	50% {
		border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
		transform: scale(1.02) skewY(-1deg);
	}
	100% {
		border-radius: 12px;
		transform: scale(1) skewY(0deg);
	}
}

@keyframes liquidMorphColor {
	0% {
		background: var(--light);
		filter: saturate(100%);
	}
	50% {
		background: linear-gradient(135deg, #f0f8ff, var(--light));
		filter: saturate(120%);
	}
	100% {
		background: var(--light);
		filter: saturate(100%);
	}
}

/* Enable morphing on interactive elements */
.morphing-element {
	transition: all var(--timing-standard) var(--ease-elastic);
	will-change: border-radius, background, transform;
}

.morphing-element:hover {
	animation: liquidMorphSmooth var(--timing-slow) var(--ease-smooth) infinite;
}

/* Liquid color morph */
.liquid-color:hover {
	animation: liquidMorphColor var(--timing-slow) var(--ease-smooth) infinite;
}

/* ========== 7. ADVANCED TRANSITIONS ========== */

/* Staggered reveal system */
.stagger-item {
	animation: textureSlideUp var(--timing-standard) var(--ease-smooth) backwards;
}

.stagger-item:nth-child(1) {
	animation-delay: 0ms;
}
.stagger-item:nth-child(2) {
	animation-delay: 80ms;
}
.stagger-item:nth-child(3) {
	animation-delay: 160ms;
}
.stagger-item:nth-child(4) {
	animation-delay: 240ms;
}
.stagger-item:nth-child(5) {
	animation-delay: 320ms;
}
.stagger-item:nth-child(n + 6) {
	animation-delay: calc((n - 6) * 80ms);
}

/* Progress bar animated reveal */
@keyframes progressFill {
	0% {
		width: 0%;
		opacity: 0;
	}
	100% {
		width: var(--progress-value, 60%);
		opacity: 1;
	}
}

.progress > span {
	animation: progressFill var(--timing-very-slow) var(--ease-apple) forwards !important;
	will-change: width;
}

/* ========== 8. PERFORMANCE OPTIMIZATION ========== */

/* Critical rendering path - Use transform & opacity only */
.optimized-animate {
	will-change: transform, opacity;
	transition: transform var(--timing-standard) var(--ease-smooth),
		opacity var(--timing-standard) var(--ease-smooth);
}

.optimized-animate:hover {
	transform: translateY(-4px) scale(1.02);
	opacity: 0.95;
}

/* GPU acceleration for smooth scrolling */
.gpu-accelerate {
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000px;
}

/* Composite layers for complex animations */
.composite-layer {
	will-change: auto;
	contain: layout style paint;
}

/* ========== 9. ACCESSIBILITY - REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
	:root {
		--timing-ultra-fast: 0ms;
		--timing-fast: 0ms;
		--timing-standard: 0ms;
		--timing-slow: 0ms;
		--timing-very-slow: 0ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		will-change: auto !important;
	}

	.btn:hover,
	.card:hover,
	.value:hover,
	.member:hover {
		transform: none !important;
	}
}

/* ========== 10. RESPONSIVE MOTION ========== */

/* Reduce motion on low-end devices */
@media (max-width: 480px) {
	:root {
		--timing-ultra-fast: 100ms;
		--timing-fast: 200ms;
		--timing-standard: 300ms;
		--timing-slow: 450ms;
		--timing-very-slow: 600ms;
	}

	.btn:hover {
		transform: translateY(-1px) scale(1.02);
	}

	.card:hover,
	.value:hover,
	.member:hover {
		transform: translateY(-2px);
	}

	/* Disable infinite animations on mobile */
	.btn-primary:hover {
		animation: none;
		box-shadow: 0 8px 20px rgba(239, 218, 85, 0.18);
	}

	.hero::after {
		animation: none;
	}

	.gradient-text {
		animation: none;
	}
}

/* ========== 11. LIGHT/DARK MODE SUPPORT ========== */

@media (prefers-color-scheme: dark) {
	.gradient-text {
		background: linear-gradient(135deg, #64b5f6 0%, #81c784 50%, #64b5f6 100%);
		background-size: 200% auto;
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.value::after,
	.card::after,
	.member::after {
		background: linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.1) 0%,
			transparent 50%,
			rgba(0, 0, 0, 0.1) 100%
		);
	}
}

/* ========== 12. UTILITY CLASSES ========== */

/* Common motion utilities */
.motion-smooth {
	transition: all var(--timing-standard) var(--ease-apple);
}

.motion-fast {
	transition: all var(--timing-fast) var(--ease-smooth);
}

.motion-slow {
	transition: all var(--timing-slow) var(--ease-smooth);
}

/* Transform utilities */
.hover-lift:hover {
	transform: translateY(-4px);
}

.hover-scale:hover {
	transform: scale(1.04);
}

.hover-brighten:hover {
	filter: brightness(1.05);
}

/* ========== LEGACY ANIMATION CLEANUP ========== */
/* Override conflicting styles from previous animations.css */

.btn {
	transition: all var(--timing-standard) var(--ease-apple-natural) !important;
}

.card {
	transition: all var(--timing-standard) var(--ease-smooth) !important;
}

.value {
	transition: all var(--timing-standard) var(--ease-smooth) !important;
}

.member {
	transition: all var(--timing-standard) var(--ease-smooth) !important;
}

.btn-submit {
	transition: all var(--timing-standard) var(--ease-apple-natural) !important;
}