$primary: #7a7cff;
$secondary: #ff7eb3;
$accent: #6ecbf5;
$glass-bg: rgba(255, 255, 255, 0.1);
$glass-border: rgba(255, 255, 255, 0.2);
$text-light: rgba(255, 255, 255, 0.9);
$shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
$transition: all 0.3s ease;

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, #667eea, #764ba2, #6b8dd6, #8e37d7);
	background-size: 300% 300%;
	animation: gradient 15s ease infinite;
	color: $text-light;
	padding: 2rem;
	overflow-x: hidden;
}

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

@keyframes float {
	0% { transform: translateY(0) translateX(0) rotate(0deg); }
	25% { transform: translateY(-20px) translateX(15px) rotate(5deg); }
	50% { transform: translateY(-40px) translateX(0) rotate(0deg); }
	75% { transform: translateY(-20px) translateX(-15px) rotate(-5deg); }
	100% { transform: translateY(0) translateX(0) rotate(0deg); }
}

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

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

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

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

.glass-container {
	width: 100%;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	position: relative;
	z-index: 1;

	.glass-background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		overflow: hidden;

		.bubble {
			position: absolute;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
			filter: blur(5px);
			animation: float 15s infinite linear;

			&.bubble-1 {
				width: 300px;
				height: 300px;
				top: 10%;
				left: 5%;
				animation-duration: 25s;
			}

			&.bubble-2 {
				width: 200px;
				height: 200px;
				bottom: 15%;
				right: 10%;
				animation-duration: 20s;
			}

			&.bubble-3 {
				width: 150px;
				height: 150px;
				top: 40%;
				right: 20%;
				animation-duration: 15s;
			}

			&.bubble-4 {
				width: 250px;
				height: 250px;
				bottom: 30%;
				left: 20%;
				animation-duration: 30s;
			}
		}
	}

	.glass-card {
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		background: $glass-bg;
		border: 1px solid $glass-border;
		border-radius: 24px;
		padding: 2.5rem;
		box-shadow: $shadow;
		transition: $transition;

		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
		}

		&.hero-card {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1.5rem;

			.logo-group {
				display: flex;
				gap: 2rem;
				justify-content: center;
				align-items: center;

				.logo {
					height: 120px;
					transition: $transition;
					filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));

					&:hover {
						transform: scale(1.1);
						filter: drop-shadow(0 0 2em #646cffaa);
					}

					&.react {
						animation: logo-spin 20s linear infinite;

						&:hover {
							filter: drop-shadow(0 0 2em #61dafbaa);
						}
					}
				}
			}

			.gradient-heading {
				font-size: 3.5rem;
				background: linear-gradient(to right, $primary, $accent, $secondary);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
				margin: 0.5rem 0;
				font-weight: 700;
				letter-spacing: -0.5px;
			}

			.subtitle {
				font-size: 1.25rem;
				opacity: 0.85;
				max-width: 500px;
				line-height: 1.6;
			}
		}

		&.content-card {
			display: flex;
			flex-wrap: wrap;
			gap: 2.5rem;
			justify-content: space-between;
			align-items: center;

			.counter-card {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 1rem;
				min-width: 200px;

				.glass-button {
					backdrop-filter: blur(10px);
					-webkit-backdrop-filter: blur(10px);
					background: rgba(255, 255, 255, 0.15);
					border: 1px solid $glass-border;
					border-radius: 18px;
					padding: 1.5rem;
					width: 160px;
					height: 160px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					transition: $transition;
					box-shadow: $shadow;

					&:hover {
						background: rgba(255, 255, 255, 0.25);
						transform: scale(1.05);
					}

					.count-number {
						font-size: 3.5rem;
						font-weight: 700;
						line-height: 1;
						color: white;
					}

					.count-label {
						font-size: 1.1rem;
						color: white;
						margin-top: 0.5rem;
						opacity: 0.8;
					}
				}

				.counter-hint {
					font-size: 0.9rem;
					opacity: 0.7;
				}
			}

			.info-section {
				flex: 1;
				min-width: 300px;

				.info-text {
					font-size: 1.25rem;
					margin-bottom: 1.5rem;
					line-height: 1.6;

					code {
						background: rgba(255, 255, 255, 0.1);
						padding: 0.2rem 0.5rem;
						border-radius: 6px;
						font-family: monospace;
					}
				}

				.features {
					display: flex;
					gap: 1.5rem;
					flex-wrap: wrap;

					.feature {
						flex: 1;
						min-width: 140px;
						background: rgba(255, 255, 255, 0.08);
						border: 1px solid $glass-border;
						border-radius: 16px;
						padding: 1.5rem 1rem;
						text-align: center;
						transition: $transition;

						&:hover {
							background: rgba(255, 255, 255, 0.15);
							transform: translateY(-3px);
						}

						.feature-icon {
							font-size: 2.5rem;
							margin-bottom: 0.8rem;
						}

						.feature-text {
							font-weight: 600;
							font-size: 1.1rem;
						}
					}
				}
			}
		}

		&.footer-card {
			text-align: center;
			padding: 1.5rem 2.5rem;

			.footer-text {
				font-size: 1.1rem;
				margin-bottom: 1.5rem;
			}

			.social-links {
				display: flex;
				justify-content: center;
				gap: 2rem;
				flex-wrap: wrap;

				.social-link {
					color: $text-light;
					text-decoration: none;
					padding: 0.6rem 1.2rem;
					border-radius: 12px;
					background: rgba(255, 255, 255, 0.08);
					border: 1px solid $glass-border;
					transition: $transition;

					&:hover {
						background: rgba(255, 255, 255, 0.2);
						transform: translateY(-2px);
					}
				}
			}
		}
	}
}

.connection-subtitle {
	color: rgb(0, 255, 0);
	animation: fadeIn 1s ease-in-out infinite;
}

.glass-button:active {
	transform: scale(0.98);
	transition: transform 0.1s ease;
}

.bubble {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	animation: float 15s infinite ease-in-out;
}

.bubble-1 {
	width: 100px;
	height: 100px;
	top: 10%;
	left: 10%;
	animation-delay: 0s;
}

.bubble-2 {
	width: 150px;
	height: 150px;
	bottom: 15%;
	right: 10%;
	animation-delay: 2s;
}

.bubble-3 {
	width: 70px;
	height: 70px;
	top: 60%;
	left: 30%;
	animation-delay: 4s;
}

.bubble-4 {
	width: 120px;
	height: 120px;
	top: 30%;
	right: 25%;
	animation-delay: 6s;
}

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

.spinner {
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spin 1s ease-in-out infinite;
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
}

.connection-status {
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.5s ease-out;

	&.loading {
		background: rgba(255, 255, 255, 0.1);
		color: #aaa;
	}

	&.success {
		background: rgba(46, 204, 113, 0.2);
		color: #2ecc71;
		animation: pulse 2s infinite;
	}

	&.error {
		background: rgba(231, 76, 60, 0.2);
		color: #e74c3c;
	}
}

@media (max-width: 768px) {
	.glass-card {
		padding: 1.8rem !important;
	}

	.content-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.gradient-heading {
		font-size: 2.8rem;
	}

	.logo {
		height: 100px;
	}

	.features {
		justify-content: center;
	}
}