/* AI Writer – Typewriter Effect */

/* Обёртка и заголовок (вывод шорткода) */
.ai-writer-block {
	margin: 1.25em 0;
}

.ai-writer-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1em;
	font-weight: 600;
	margin: 0 0 0.6em;
	opacity: 0.85;
}

.ai-writer-title-icon {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	border-radius: 50%;
	flex: 0 0 auto;
	background: conic-gradient(
		from 210deg,
		#6839cf,
		#b054d4,
		#ff6b6b,
		#ffb84d,
		#4dd0ff,
		#6839cf
	);
	filter: saturate(1.3);
}

/* Текст: до старта символы скрыты, но занимают место — вёрстка не прыгает */
.ai-tw-ready .ai-tw-char,
.ai-tw-typing .ai-tw-char {
	visibility: hidden;
}

.ai-tw-ready .ai-tw-char.ai-tw-visible,
.ai-tw-typing .ai-tw-char.ai-tw-visible {
	visibility: visible;
}

.ai-tw-finished .ai-tw-char {
	visibility: visible;
}

/* ------- Постепенное проявление блоков секции ------- */

/* Скрытие через opacity: место сохраняется, вёрстка не прыгает */
.ai-tw-block-hidden {
	opacity: 0;
	transform: translateY(8px);
}

.ai-tw-block-hidden.ai-tw-block-revealed {
	opacity: 1;
	transform: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Строки таблиц не анимируются трансформом — только прозрачностью */
tr.ai-tw-block-hidden {
	transform: none;
}

/* ------- Курсор ------- */

.ai-tw-cursor {
	display: inline-block;
	vertical-align: baseline;
	margin-left: 0.12em;
	transition: opacity 0.5s ease;
}

.ai-tw-cursor--fade {
	opacity: 0;
}

/* Вариант «line» — классическая мигающая черта */
.ai-tw-cursor--line {
	width: 2px;
	height: 1em;
	transform: translateY(0.15em);
	background: currentColor;
	animation: ai-tw-blink 1s steps(1) infinite;
}

@keyframes ai-tw-blink {
	50% { opacity: 0; }
}

/* Вариант «alice» — градиентный AI-шар, как на Кинопоиске */
.ai-tw-cursor--alice {
	position: relative;
	width: 1em;
	height: 1em;
	transform: translateY(0.18em);
}

.ai-tw-cursor-layer,
.ai-tw-cursor-core {
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.ai-tw-cursor-core {
	background: radial-gradient(
		circle at 32% 30%,
		#ffffff 0%,
		#c9a2ff 28%,
		#8a4fd8 60%,
		#5e2ea6 100%
	);
	animation: ai-tw-pulse 1.6s ease-in-out infinite;
}

.ai-tw-cursor-layer1 {
	background: conic-gradient(
		from 0deg,
		#6839cf,
		#ff6b9d,
		#ffb84d,
		#4dd0ff,
		#6839cf
	);
	filter: blur(4px);
	opacity: 0.9;
	animation: ai-tw-spin 2.4s linear infinite;
}

.ai-tw-cursor-layer2 {
	inset: -35%;
	background: radial-gradient(
		circle,
		rgba(140, 82, 255, 0.55) 0%,
		rgba(77, 208, 255, 0.25) 45%,
		rgba(255, 107, 157, 0) 70%
	);
	filter: blur(6px);
	animation: ai-tw-pulse 1.6s ease-in-out infinite reverse;
}

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

@keyframes ai-tw-pulse {
	0%, 100% { transform: scale(0.85); }
	50% { transform: scale(1.05); }
}

/* ------- Стили «переливания» текста ------- */

/* 1. «Аврора» — плавно текущий фиолетово-розово-голубой градиент */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.ai-tw-style-aurora {
		background-image: linear-gradient(
			100deg,
			#6839cf 0%,
			#b054d4 20%,
			#ff6b9d 40%,
			#4dd0ff 60%,
			#8f6bff 80%,
			#6839cf 100%
		);
		background-size: 300% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: ai-tw-aurora 7s linear infinite;
	}
}

@keyframes ai-tw-aurora {
	to { background-position: -300% 0; }
}

/* 2. «Золото» — тёплый металлический перелив с бегущим бликом */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.ai-tw-style-gold {
		background-image: linear-gradient(
			110deg,
			#a8741a 0%,
			#e6b800 25%,
			#fff3b0 50%,
			#e6b800 75%,
			#a8741a 100%
		);
		background-size: 200% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: ai-tw-gold 3.5s ease-in-out infinite;
	}
}

@keyframes ai-tw-gold {
	0%   { background-position: 0% 0; }
	100% { background-position: -200% 0; }
}

/* 3. «Неон» — холодное пульсирующее свечение */
.ai-tw-style-neon {
	color: #4dd6ff;
	text-shadow:
		0 0 2px rgba(125, 249, 255, 0.8),
		0 0 10px rgba(0, 195, 255, 0.55),
		0 0 22px rgba(140, 82, 255, 0.35);
	animation: ai-tw-neon 2.4s ease-in-out infinite;
}

@keyframes ai-tw-neon {
	0%, 100% {
		text-shadow:
			0 0 2px rgba(125, 249, 255, 0.8),
			0 0 10px rgba(0, 195, 255, 0.55),
			0 0 22px rgba(140, 82, 255, 0.35);
	}
	50% {
		text-shadow:
			0 0 4px rgba(125, 249, 255, 1),
			0 0 16px rgba(0, 195, 255, 0.8),
			0 0 34px rgba(140, 82, 255, 0.6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ai-tw-cursor,
	.ai-writer-title-icon {
		animation: none !important;
	}
	.ai-tw-cursor-layer,
	.ai-tw-cursor-core {
		animation: none !important;
	}
	.ai-tw-char {
		visibility: visible !important;
	}
	.ai-tw-style-aurora,
	.ai-tw-style-gold,
	.ai-tw-style-neon {
		animation: none !important;
	}
	.ai-tw-block-hidden {
		opacity: 1 !important;
		transform: none !important;
	}
}
