/*
 * PureCSS.com
 * https://purecss.com/examples/glitch-effect/
 * An animated text glitch using clip-path, pseudo-elements, and CSS keyframes — no JavaScript.
 */

.demo-glitch-effect .glitch-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
	}

.demo-glitch-effect .glitch {
		position: relative;
		font-size: 3rem;
		font-weight: 800;
		letter-spacing: .05em;
		color: var(--text);
		font-family: var(--font-mono);
	}

:is(.demo-glitch-effect .glitch)::before,:is(.demo-glitch-effect .glitch)::after {
			content: attr(data-text);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

:is(.demo-glitch-effect .glitch)::before {
			color: var(--teal);
			animation: glitch-1 1.5s infinite;
		}

:is(.demo-glitch-effect .glitch)::after {
			color: var(--coral);
			animation: glitch-2 1.5s infinite;
		}

/* ── Intense version ─── */

:is(.demo-glitch-effect .glitch-intense)::before {
			animation: glitch-intense-1 0.8s infinite;
		}

:is(.demo-glitch-effect .glitch-intense)::after {
			animation: glitch-intense-2 0.8s infinite;
		}

@keyframes glitch-1 {
	0%, 90%, 100% { clip-path: inset(0 0 100% 0); left: 0; }
	92%  { clip-path: inset(20% 0 60% 0); left: -3px; }
	94%  { clip-path: inset(50% 0 30% 0); left:  2px; }
	96%  { clip-path: inset(10% 0 75% 0); left: -2px; }
	98%  { clip-path: inset(65% 0 10% 0); left:  3px; }
}

@keyframes glitch-2 {
	0%, 88%, 100% { clip-path: inset(0 0 100% 0); left: 0; }
	90%  { clip-path: inset(40% 0 40% 0); left:  3px; }
	92%  { clip-path: inset(5%  0 80% 0); left: -3px; }
	94%  { clip-path: inset(75% 0 5%  0); left:  2px; }
	96%  { clip-path: inset(30% 0 55% 0); left: -2px; }
}

@keyframes glitch-intense-1 {
	0%, 72%, 100% { clip-path: inset(0 0 100% 0); left: 0; }
	74%  { clip-path: inset(10% 0 55% 0); left: -7px; }
	78%  { clip-path: inset(45% 0 20% 0); left:  6px; }
	82%  { clip-path: inset(70% 0 5%  0); left: -5px; }
	86%  { clip-path: inset(5%  0 72% 0); left:  8px; }
	90%  { clip-path: inset(30% 0 40% 0); left: -4px; }
	94%  { clip-path: inset(85% 0 3%  0); left:  5px; }
}

@keyframes glitch-intense-2 {
	0%, 68%, 100% { clip-path: inset(0 0 100% 0); left: 0; }
	71%  { clip-path: inset(60% 0 15% 0); left:  8px; }
	75%  { clip-path: inset(15% 0 60% 0); left: -7px; }
	79%  { clip-path: inset(88% 0 3%  0); left:  5px; }
	83%  { clip-path: inset(3%  0 88% 0); left: -8px; }
	87%  { clip-path: inset(40% 0 35% 0); left:  6px; }
	91%  { clip-path: inset(22% 0 58% 0); left: -5px; }
}