/* ==========================================
   Advanced Animations for Construction Website
   ========================================== */

/* ========== Entrance Animations ========== */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

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

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(100%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ========== Continuous Animations ========== */

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

@keyframes glow {
	0%, 100% {
		box-shadow: 0 0 5px rgba(255, 184, 0, 0.4);
	}
	50% {
		box-shadow: 0 0 20px rgba(255, 184, 0, 0.8), 0 0 30px rgba(255, 184, 0, 0.6);
	}
}

@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-20px);
	}
	60% {
		transform: translateY(-10px);
	}
}

@keyframes swing {
	20% {
		transform: rotate(15deg);
	}
	40% {
		transform: rotate(-10deg);
	}
	60% {
		transform: rotate(5deg);
	}
	80% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@keyframes heartbeat {
	0%, 100% {
		transform: scale(1);
	}
	10%, 30% {
		transform: scale(0.9);
	}
	20%, 40%, 60%, 80% {
		transform: scale(1.1);
	}
	50%, 70% {
		transform: scale(1.05);
	}
}

/* ========== Background Animations ========== */

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

@keyframes particles {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-100vh) translateX(50px);
		opacity: 0;
	}
}

/* ========== Text Animations ========== */

@keyframes typewriter {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes glitch {
	0% {
		text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
					-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
					-0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
	}
	14% {
		text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
					-0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
					-0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
	}
	15% {
		text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
					0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
					-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
	}
	49% {
		text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
					0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
					-0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
	}
	50% {
		text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
					0.05em 0 0 rgba(0, 255, 0, 0.75),
					0 -0.05em 0 rgba(0, 0, 255, 0.75);
	}
	99% {
		text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
					0.05em 0 0 rgba(0, 255, 0, 0.75),
					0 -0.05em 0 rgba(0, 0, 255, 0.75);
	}
	100% {
		text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
					-0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
					-0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
	}
}

/* ========== Utility Animation Classes ========== */

.animate-fade-in-up {
	animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in-down {
	animation: fadeInDown 0.8s ease-out;
}

.animate-fade-in-left {
	animation: fadeInLeft 0.8s ease-out;
}

.animate-fade-in-right {
	animation: fadeInRight 0.8s ease-out;
}

.animate-zoom-in {
	animation: zoomIn 0.6s ease-out;
}

.animate-float {
	animation: float 3s ease-in-out infinite;
}

.animate-pulse {
	animation: pulse 2s ease-in-out infinite;
}

.animate-glow {
	animation: glow 2s ease-in-out infinite;
}

.animate-bounce {
	animation: bounce 2s infinite;
}

.animate-swing {
	animation: swing 1s ease;
}

.animate-heartbeat {
	animation: heartbeat 1.5s ease-in-out infinite;
}

/* ========== Delay Classes ========== */

.delay-100 {
	animation-delay: 0.1s;
}

.delay-200 {
	animation-delay: 0.2s;
}

.delay-300 {
	animation-delay: 0.3s;
}

.delay-400 {
	animation-delay: 0.4s;
}

.delay-500 {
	animation-delay: 0.5s;
}

.delay-600 {
	animation-delay: 0.6s;
}

.delay-700 {
	animation-delay: 0.7s;
}

.delay-800 {
	animation-delay: 0.8s;
}

/* ========== Hover Animations ========== */

.hover-lift {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
	transform: translateY(-10px);
}

.hover-scale {
	transition: transform 0.3s ease;
}

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

.hover-rotate {
	transition: transform 0.3s ease;
}

.hover-rotate:hover {
	transform: rotate(5deg);
}

.hover-glow:hover {
	box-shadow: 0 0 20px rgba(255, 184, 0, 0.6);
	transition: box-shadow 0.3s ease;
}

/* ========== Scroll Reveal Animations ========== */

.reveal {
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
	opacity: 1;
	transform: translateY(0);
}

.reveal-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
	opacity: 1;
	transform: translateX(0);
}

.reveal-right {
	opacity: 0;
	transform: translateX(50px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
	opacity: 1;
	transform: translateX(0);
}

/* ========== Loading Animations ========== */

.spinner {
	animation: rotate 1s linear infinite;
}

.shimmer-effect {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.2) 20%,
		rgba(255, 255, 255, 0.5) 60%,
		rgba(255, 255, 255, 0)
	);
	background-size: 200% auto;
	animation: shimmer 2s linear infinite;
}

/* ========== Counter Animation ========== */

.counter {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.6s ease-out;
}

.counter.counting {
	opacity: 1;
	transform: translateY(0);
}

/* ========== Responsive Animation Adjustments ========== */

@media (max-width: 768px) {
	.animate-fade-in-up,
	.animate-fade-in-down,
	.animate-fade-in-left,
	.animate-fade-in-right {
		animation-duration: 0.5s;
	}
	
	.hover-lift:hover {
		transform: translateY(-5px);
	}
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}