/* ===== Глитч-эффект для заголовков (срабатывает один раз при появлении) ===== */
/* Используются только clip-path и text-shadow, без transform — чтобы не конфликтовать
   с fade-up анимациями GSAP, которые двигают элемент по Y. */

.glitch-run {
	-webkit-animation: heading-glitch .62s steps(1, end) .3s 1 both;
	animation: heading-glitch .62s steps(1, end) .3s 1 both;
}

@-webkit-keyframes heading-glitch {
	0%   { clip-path: inset(0 0 0 0); text-shadow: none; }
	6%   { clip-path: inset(0 0 0 0); text-shadow: 3px 0 #38a9ff, -3px 0 #3840ff; }
	12%  { clip-path: inset(0 0 58% 0); text-shadow: -4px 0 #38a9ff, 4px 0 #3840ff; }
	18%  { clip-path: inset(55% 0 0 0); text-shadow: 3px 0 #38a9ff, -3px 0 #3840ff; }
	26%  { clip-path: inset(34% 0 34% 0); text-shadow: -3px 0 #38a9ff, 3px 0 #3840ff; }
	34%  { clip-path: inset(0 0 0 0); text-shadow: 4px 0 #38a9ff, -4px 0 #3840ff; }
	42%  { clip-path: inset(0 0 28% 0); text-shadow: -2px 0 #38a9ff, 2px 0 #3840ff; }
	50%  { clip-path: inset(0 0 0 0); text-shadow: none; }
	60%  { clip-path: inset(16% 0 68% 0); text-shadow: 3px 0 #38a9ff, -3px 0 #3840ff; }
	70%  { clip-path: inset(0 0 0 0); text-shadow: -3px 0 #38a9ff, 3px 0 #3840ff; }
	82%  { clip-path: inset(0 0 0 0); text-shadow: 2px 0 #38a9ff, -2px 0 #3840ff; }
	100% { clip-path: inset(0 0 0 0); text-shadow: none; }
}

@keyframes heading-glitch {
	0%   { clip-path: inset(0 0 0 0); text-shadow: none; }
	6%   { clip-path: inset(0 0 0 0); text-shadow: 3px 0 #38a9ff, -3px 0 #3840ff; }
	12%  { clip-path: inset(0 0 58% 0); text-shadow: -4px 0 #38a9ff, 4px 0 #3840ff; }
	18%  { clip-path: inset(55% 0 0 0); text-shadow: 3px 0 #38a9ff, -3px 0 #3840ff; }
	26%  { clip-path: inset(34% 0 34% 0); text-shadow: -3px 0 #38a9ff, 3px 0 #3840ff; }
	34%  { clip-path: inset(0 0 0 0); text-shadow: 4px 0 #38a9ff, -4px 0 #3840ff; }
	42%  { clip-path: inset(0 0 28% 0); text-shadow: -2px 0 #38a9ff, 2px 0 #3840ff; }
	50%  { clip-path: inset(0 0 0 0); text-shadow: none; }
	60%  { clip-path: inset(16% 0 68% 0); text-shadow: 3px 0 #38a9ff, -3px 0 #3840ff; }
	70%  { clip-path: inset(0 0 0 0); text-shadow: -3px 0 #38a9ff, 3px 0 #3840ff; }
	82%  { clip-path: inset(0 0 0 0); text-shadow: 2px 0 #38a9ff, -2px 0 #3840ff; }
	100% { clip-path: inset(0 0 0 0); text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	.glitch-run {
		-webkit-animation: none;
		animation: none;
	}
}