/* Общие стили */
body {
	margin: 0;
	font-family: 'Arial', sans-serif; /* Можно выбрать любой другой шрифт */
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	/* Базовый анимированный градиент */
	background: linear-gradient(
		270deg,
		#1a0033,
		#330066,
		#6600cc,
		#9933ff,
		#cc66ff
	);
	background-size: 400% 400%;
	animation: gradientShift 15s ease infinite;
	color: #ffffff;
	text-align: center;
	overflow: hidden; /* Скрываем все, что выходит за пределы */
	position: relative; /* Для фона */
}

/* Анимация основного градиента */
@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Неоновый фон - первый слой (точки) */
body::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.1) 1px,
		transparent 1px
	); /* Мелкие точки */
	background-size: 20px 20px;
	animation: sparkle 8s ease-in-out infinite;
	z-index: 0;
}

@keyframes sparkle {
	0%,
	100% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.8;
	}
}

/* Неоновый фон - второй слой (основной пульсирующий круг) */
body::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px; /* Увеличенный размер */
	height: 300px;
	background: radial-gradient(
		circle,
		rgba(255, 0, 204, 0.4) 0%,
		rgba(102, 0, 204, 0.2) 50%,
		transparent 100%
	);
	border-radius: 50%;
	filter: blur(60px); /* Большее размытие */
	transform: translate(-50%, -50%) scale(2);
	animation: megaPulse 6s infinite ease-in-out;
	z-index: 0;
}

@keyframes megaPulse {
	0% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0.6;
	}
	33% {
		transform: translate(-50%, -50%) scale(2.8);
		opacity: 0.4;
	}
	66% {
		transform: translate(-50%, -50%) scale(2.2);
		opacity: 0.5;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0.6;
	}
}

/* Дополнительные неоновые элементы */
.container::before {
	content: '';
	position: absolute;
	top: 20%;
	left: 10%;
	width: 150px;
	height: 150px;
	background: radial-gradient(
		circle,
		rgba(204, 0, 255, 0.3) 0%,
		transparent 70%
	);
	border-radius: 50%;
	filter: blur(40px);
	animation: floatLeft 10s infinite ease-in-out;
	z-index: 0;
}

.container::after {
	content: '';
	position: absolute;
	bottom: 20%;
	right: 10%;
	width: 120px;
	height: 120px;
	background: radial-gradient(
		circle,
		rgba(255, 102, 255, 0.3) 0%,
		transparent 70%
	);
	border-radius: 50%;
	filter: blur(35px);
	animation: floatRight 8s infinite ease-in-out reverse;
	z-index: 0;
}

@keyframes floatLeft {
	0%,
	100% {
		transform: translateY(0px) translateX(0px);
		opacity: 0.4;
	}
	33% {
		transform: translateY(-20px) translateX(10px);
		opacity: 0.6;
	}
	66% {
		transform: translateY(10px) translateX(-5px);
		opacity: 0.5;
	}
}

@keyframes floatRight {
	0%,
	100% {
		transform: translateY(0px) translateX(0px);
		opacity: 0.3;
	}
	50% {
		transform: translateY(-15px) translateX(-10px);
		opacity: 0.7;
	}
}

@keyframes pulse {
	0% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0.5;
	}
	50% {
		transform: translate(-50%, -50%) scale(2.5);
		opacity: 0.3;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0.5;
	}
}

.container {
	position: relative; /* Чтобы элементы были поверх фона */
	z-index: 1;
	padding: 20px;
	max-width: 700px; /* Максимальная ширина контейнера */
	margin: 0 auto; /* Центрирование */
}

/* Круглая картинка */
.image-wrapper {
	margin-bottom: 30px; /* Отступ снизу */
	position: relative;
}

/* Добавляем дополнительное свечение для картинки */
.image-wrapper::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.1) 0%,
		transparent 70%
	);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: imageGlow 4s infinite ease-in-out;
	z-index: 0;
}

@keyframes imageGlow {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(0.9);
		opacity: 0.5;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.1);
		opacity: 0.8;
	}
}

.circular-image {
	width: 180px; /* Ширина картинки */
	height: 180px; /* Высота картинки */
	border-radius: 50%; /* Делает изображение круглым */
	border: 5px solid #ffffff; /* Белая обводка */
	object-fit: cover; /* Обеспечивает, чтобы изображение покрывало всю область */
	box-shadow: 0 0 30px rgba(102, 0, 204, 0.8), 0 0 60px rgba(255, 0, 204, 0.5); /* Усиленное неоновое свечение */
	position: relative;
	z-index: 1;
	animation: imagePulse 3s infinite ease-in-out;
}

@keyframes imagePulse {
	0%,
	100% {
		box-shadow: 0 0 30px rgba(102, 0, 204, 0.8), 0 0 60px rgba(255, 0, 204, 0.5);
	}
	50% {
		box-shadow: 0 0 40px rgba(102, 0, 204, 1), 0 0 80px rgba(255, 0, 204, 0.7);
	}
}

/* Заголовок */
h1 {
	font-size: 2.5em; /* Размер шрифта */
	margin-bottom: 15px;
	text-shadow: 0 0 15px #cc99ff, 0 0 30px #cc99ff, 0 0 45px #9933ff,
		0 0 60px #ff00cc; /* Усиленный неоновый эффект */
	line-height: 1.2;
	animation: textGlow 2s infinite ease-in-out alternate;
}

@keyframes textGlow {
	from {
		text-shadow: 0 0 15px #cc99ff, 0 0 30px #cc99ff, 0 0 45px #9933ff,
			0 0 60px #ff00cc;
	}
	to {
		text-shadow: 0 0 20px #cc99ff, 0 0 40px #cc99ff, 0 0 60px #9933ff,
			0 0 80px #ff00cc;
	}
}

/* Описание */
.description {
	font-size: 1.1em;
	line-height: 1.6;
	margin-bottom: 40px;
	padding: 0 20px; /* Отступы по бокам для текста */
	color: rgba(255, 255, 255, 0.9); /* Слегка прозрачный белый */
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Кнопка */
.cta-button {
	display: inline-block;
	background: linear-gradient(
		45deg,
		#ff00cc 0%,
		#cc00ff 25%,
		#9933ff 50%,
		#cc00ff 75%,
		#ff00cc 100%
	); /* Расширенный градиент */
	background-size: 200% 200%;
	color: #ffffff;
	padding: 15px 30px;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	border-radius: 30px; /* Скругленные углы */
	border: none;
	box-shadow: 0 0 20px rgba(255, 0, 204, 0.8), 0 0 40px rgba(204, 0, 255, 0.6),
		0 0 60px rgba(153, 51, 255, 0.4); /* Тройное неоновое свечение */
	transition: all 0.3s ease; /* Плавный переход при наведении */
	cursor: pointer;
	animation: buttonGlow 3s infinite ease-in-out,
		gradientMove 4s infinite ease-in-out;
	position: relative;
	overflow: hidden;
}

@keyframes buttonGlow {
	0%,
	100% {
		box-shadow: 0 0 20px rgba(255, 0, 204, 0.8), 0 0 40px rgba(204, 0, 255, 0.6),
			0 0 60px rgba(153, 51, 255, 0.4);
	}
	50% {
		box-shadow: 0 0 30px rgba(255, 0, 204, 1), 0 0 60px rgba(204, 0, 255, 0.8),
			0 0 90px rgba(153, 51, 255, 0.6);
	}
}

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

.cta-button:hover {
	background: linear-gradient(
		45deg,
		#cc00ff 0%,
		#ff00cc 25%,
		#ff66ff 50%,
		#ff00cc 75%,
		#cc00ff 100%
	); /* Инвертированный градиент при наведении */
	box-shadow: 0 0 30px rgba(255, 0, 204, 1), 0 0 60px rgba(204, 0, 255, 0.8),
		0 0 90px rgba(153, 51, 255, 0.6); /* Усиленное свечение */
	transform: translateY(-3px) scale(1.05); /* Легкий подъем и увеличение */
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
	h1 {
		font-size: 2em;
	}
	.description {
		font-size: 1em;
	}
	.circular-image {
		width: 150px;
		height: 150px;
	}
	.cta-button {
		font-size: 1.1em;
		padding: 12px 25px;
	}

	/* Уменьшаем неоновые эффекты на мобильных */
	body::after {
		width: 200px;
		height: 200px;
	}

	.container::before,
	.container::after {
		width: 100px;
		height: 100px;
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: 1.8em;
	}
	.description {
		font-size: 0.95em;
		padding: 0 10px;
	}
	.circular-image {
		width: 120px;
		height: 120px;
	}
	.cta-button {
		font-size: 1em;
		padding: 10px 20px;
	}

	/* Еще больше уменьшаем эффекты */
	body::after {
		width: 150px;
		height: 150px;
	}

	.container::before,
	.container::after {
		width: 80px;
		height: 80px;
	}
}