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

body {
	font-family: "Inter", sans-serif;
	background: linear-gradient(135deg, #4f8cff 0%, #a259ff 50%, #ff6ec4 100%);
	transition: background 0.5s;
}

.glass {
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
	transition: box-shadow 0.3s;
}

.weather-icon {
	animation: float 3s ease-in-out infinite;
	transition: transform 0.3s;
}

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

.pop-in {
	animation: popIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes popIn {
	0% {
		transform: scale(0.7);
		opacity: 0.2;
	}
	60% {
		transform: scale(1.1);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.fade-in {
	animation: fadeIn 0.7s ease;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.shimmer {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

input.seacrh-btn {
	box-shadow: 0 2px 8px 0 rgba(160, 89, 255, 0.08);
	transition: box-shadow 0.3s;
}
input.seacrh-btn:focus {
	box-shadow: 0 4px 16px 0 rgba(160, 89, 255, 0.18);
}

button {
	transition: transform 0.2s, box-shadow 0.2s;
}
button:active {
	transform: scale(0.97);
	box-shadow: 0 2px 8px 0 rgba(160, 89, 255, 0.12);
}

@media (max-width: 600px) {
	body {
		padding: 0.5rem;
	}
	.glass {
		padding: 1.5rem;
	}
}