/* ============================================
   СИНДИКАТ Neon — Glow Effects & Animations
   ============================================ */

/* --- Neon Text Glows --- */
.neon-cyan {
	color: #22D3EE;
	text-shadow:
		0 0 10px rgba(34, 211, 238, 0.3),
		0 0 20px rgba(34, 211, 238, 0.2),
		0 0 40px rgba(34, 211, 238, 0.1);
}

.neon-magenta {
	color: #D946EF;
	text-shadow:
		0 0 10px rgba(217, 70, 239, 0.3),
		0 0 20px rgba(217, 70, 239, 0.2),
		0 0 40px rgba(217, 70, 239, 0.1);
}

.neon-yellow {
	color: #FBBF24;
	text-shadow:
		0 0 10px rgba(251, 191, 36, 0.3),
		0 0 20px rgba(251, 191, 36, 0.2),
		0 0 40px rgba(251, 191, 36, 0.1);
}

/* --- Neon Border Glow --- */
.neon-border-cyan {
	border-color: #22D3EE !important;
	box-shadow: 0 0 10px rgba(34, 211, 238, 0.2), inset 0 0 10px rgba(34, 211, 238, 0.05);
}

.neon-border-magenta {
	border-color: #D946EF !important;
	box-shadow: 0 0 10px rgba(217, 70, 239, 0.2), inset 0 0 10px rgba(217, 70, 239, 0.05);
}

/* --- Keyframe Animations --- */

/* Fade In Up */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Fade In */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Neon Pulse */
@keyframes neonPulse {
	0%, 100% {
		text-shadow:
			0 0 10px rgba(34, 211, 238, 0.3),
			0 0 20px rgba(34, 211, 238, 0.2),
			0 0 40px rgba(34, 211, 238, 0.1);
	}
	50% {
		text-shadow:
			0 0 15px rgba(34, 211, 238, 0.5),
			0 0 30px rgba(34, 211, 238, 0.3),
			0 0 60px rgba(34, 211, 238, 0.15);
	}
}

@keyframes neonPulseMagenta {
	0%, 100% {
		text-shadow:
			0 0 10px rgba(217, 70, 239, 0.3),
			0 0 20px rgba(217, 70, 239, 0.2),
			0 0 40px rgba(217, 70, 239, 0.1);
	}
	50% {
		text-shadow:
			0 0 15px rgba(217, 70, 239, 0.5),
			0 0 30px rgba(217, 70, 239, 0.3),
			0 0 60px rgba(217, 70, 239, 0.15);
	}
}

/* Glow Orb Float */
@keyframes glowFloat {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(30px, -30px) scale(1.05);
	}
	66% {
		transform: translate(-20px, 20px) scale(0.95);
	}
}

/* Glow Orb Pulse */
@keyframes glowPulse {
	0%, 100% {
		opacity: 0.6;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.1);
	}
}

/* Shimmer for CTA buttons */
@keyframes shimmer {
	0% {
		background-position: -200% center;
	}
	100% {
		background-position: 200% center;
	}
}

/* Slide In Left */
@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Slide In Right */
@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Scale In */
@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* --- Animation Classes --- */
.animate-fade-in-up {
	animation: fadeInUp 0.6s ease forwards;
}

.animate-fade-in {
	animation: fadeIn 0.5s ease forwards;
}

.animate-neon-pulse {
	animation: neonPulse 3s ease-in-out infinite;
}

.animate-neon-pulse-magenta {
	animation: neonPulseMagenta 3s ease-in-out infinite;
}

.animate-glow-float {
	animation: glowFloat 8s ease-in-out infinite;
}

.animate-glow-pulse {
	animation: glowPulse 4s ease-in-out infinite;
}

.animate-slide-left {
	animation: slideInLeft 0.5s ease forwards;
}

.animate-slide-right {
	animation: slideInRight 0.5s ease forwards;
}

.animate-scale-in {
	animation: scaleIn 0.4s ease forwards;
}

/* --- Staggered Delays --- */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* --- Hover Effects --- */

/* Card hover glow */
.post-card:hover .post-card-title a {
	color: #22D3EE;
	text-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
}

/* Button hover shimmer */
.cta-primary:hover {
	background-size: 200% 100%;
	animation: shimmer 1.5s ease infinite;
}

/* Neon heading hover */
.neon-heading {
	transition: text-shadow 0.3s ease;
}

.neon-heading:hover {
	text-shadow:
		0 0 20px rgba(34, 211, 238, 0.5),
		0 0 40px rgba(34, 211, 238, 0.3),
		0 0 80px rgba(34, 211, 238, 0.15);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto;
	}
}