/* Web 3.0 стили */
:root {
	--primary: #6e45e2;
	--secondary: #88d3ce;
	--dark: #1a1a2e;
	--darker: #16213e;
	--light: #f1f1f1;
	--neon-glow: 0 0 10px rgba(110, 69, 226, 0.8);
}

body {
	background-color: var(--dark);
	color: var(--light);
	font-family: 'Inter', sans-serif;
	overflow-x: hidden;
}

/* Градиенты */
.bg-dark-gradient {
	background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
	border-radius: 16px;
}

/* Неоновые эффекты */
.neon-shadow {
	box-shadow: var(--neon-glow);
}

.neon-text {
	text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
}

/* Анимации */
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-20px); }
}

.web3-animation {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
	border-radius: 50%;
	filter: blur(20px);
	opacity: 0.3;
	animation: float 6s ease-in-out infinite;
}

/* Современные элементы UI */
.card {
	transition: all 0.3s ease;
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), var(--neon-glow);
}

.btn-primary {
	background-color: var(--primary);
	border-color: var(--primary);
	transition: all 0.3s ease;
}

.btn-primary:hover {
	background-color: transparent;
	border-color: var(--primary);
	color: var(--primary);
	box-shadow: var(--neon-glow);
}

/* Гласс морфизм */
.glass-effect {
	background: rgba(26, 26, 46, 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Современные формы */
.form-control {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--light);
}

.form-control:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--primary);
	box-shadow: 0 0 0 0.25rem rgba(110, 69, 226, 0.25);
	color: var(--light);
}

/* Стили для Web 3.0 логотипа */
.web3-logo-container {
	position: relative;
	display: inline-block;
	padding: 0.5rem 0;
}

.web3-logo {
	position: relative;
	font-size: 1.8rem;
	font-weight: 700;
	color: #6e45e2;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: all 0.4s ease;
	z-index: 2;
	display: inline-block;
	background: linear-gradient(90deg, #6e45e2, #88d3ce, #6e45e2);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
}

.web3-logo-after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, #6e45e2, #88d3ce);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s ease;
	z-index: 1;
}

.web3-logo-container:hover .web3-logo {
	animation: gradientShift 2s linear infinite, pulseGlow 1.5s ease infinite alternate;
	background-size: 200% auto;
}

.web3-logo-container:hover .web3-logo-after {
	transform: scaleX(1);
	transform-origin: left;
	animation: lineGlow 1.5s ease infinite alternate;
}

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

@keyframes pulseGlow {
	0% {
		text-shadow: 0 0 5px rgba(110, 69, 226, 0.3),
					 0 0 10px rgba(136, 211, 206, 0.2);
	}
	100% {
		text-shadow: 0 0 15px rgba(110, 69, 226, 0.8),
					 0 0 25px rgba(136, 211, 206, 0.6),
					 0 0 35px rgba(136, 211, 206, 0.3);
	}
}

@keyframes lineGlow {
	0% {
		box-shadow: 0 0 5px rgba(110, 69, 226, 0.5),
					0 0 10px rgba(136, 211, 206, 0.3);
		opacity: 0.8;
	}
	100% {
		box-shadow: 0 0 15px rgba(110, 69, 226, 0.9),
					0 0 25px rgba(136, 211, 206, 0.6),
					0 0 35px rgba(136, 211, 206, 0.3);
		opacity: 1;
	}
}

/* Эффект "тикерного" изменения цвета букв */
.web3-logo-container:hover .web3-logo {
	display: inline-block;
}

.web3-logo-container:hover .web3-logo::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #88d3ce, #6e45e2, #88d3ce);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradientShift 3s linear infinite reverse;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.web3-logo-container:hover .web3-logo::before {
	opacity: 0.7;
}