@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
	font-family: 'Inter', sans-serif;
}

.project-card {
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateY(0);
}

.project-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.project-image {
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.project-overlay {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.project-card:hover .project-overlay {
	opacity: 1;
}

.status-badge {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.8;
	}
}

.progress-bar {
	animation: progressFill 2s ease-out;
}

@keyframes progressFill {
	from {
		width: 0%;
	}
}

.fade-in {
	animation: fadeInUp 0.6s ease-out forwards;
	opacity: 0;
	transform: translateY(30px);
}

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

.stagger-1 {
	animation-delay: 0.1s;
}

.stagger-2 {
	animation-delay: 0.2s;
}

.stagger-3 {
	animation-delay: 0.3s;
}

.stagger-4 {
	animation-delay: 0.4s;
}

.stagger-5 {
	animation-delay: 0.5s;
}

.stagger-6 {
	animation-delay: 0.6s;
}

.btn-primary {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	transition: all 0.3s ease;
}

.btn-primary:hover {
	background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

.category-tag {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------------------- modal ------------------------------------------------------------------------- */
.modal-overlay {
	backdrop-filter: blur(8px);
	animation: fadeIn 0.3s ease-out;
}

.modal-content {
	animation: slideInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

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

.modal-closing .modal-content {
	animation: slideOutScale 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar {
	transition: width 1s ease-out;
	animation: progressFill 1.5s ease-out;
}

@keyframes progressFill {
	from {
		width: 0%;
	}
}

.progress-circle {
	transform: rotate(-90deg);
}

.progress-circle circle {
	transition: stroke-dashoffset 1s ease-out;
}

.project-image {
	transition: transform 0.3s ease;
}

.modal-content:hover .project-image {
	transform: scale(1.02);
}

.close-btn {
	transition: all 0.2s ease;
}

.close-btn:hover {
	transform: scale(1.1);
}

.value-card {
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border: 1px solid #e2e8f0;
	transition: transform 0.2s ease;
}

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