/*    3. TYPOGRAPHY
   ------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-text-primary);
}

.text-accent {
	color: var(--color-accent);
}

/* Glitch Text Effect */
.glitch-text {
	position: relative;
	display: inline-block;
}

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

.glitch-text::before {
	color: var(--color-purple-light);
	animation: glitch-effect 3s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
	clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
	opacity: 0.7;
}

.glitch-text::after {
	color: var(--color-accent);
	animation: glitch-effect 2.7s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse;
	clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
	opacity: 0.7;
}

@keyframes glitch-effect {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translate(-2px, 2px);
	}
	40% {
		transform: translate(-2px, -2px);
	}
	60% {
		transform: translate(2px, 2px);
	}
	80% {
		transform: translate(2px, -2px);
	}
	100% {
		transform: translate(0);
	}
}