/* --- Typography --- */
h1,
h2,
h3,
h4,
.nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.glitch-text {
  font-size: inherit;
  display: inline-block;
  position: relative;
}

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

.brand .glitch-text:hover::before,
.brand .glitch-text:hover::after,
.brand.active .glitch-text::before,
.brand.active .glitch-text::after {
  background-color: var(--accent-primary);
}

.glitch-text:hover::before,
.brand.active .glitch-text::before {
  left: 3px;
  text-shadow: -2px 0 var(--accent-secondary);
  animation: glitch-anim-1 1s infinite steps(2, end) alternate-reverse;
}

.glitch-text:hover::after,
.brand.active .glitch-text::after {
  left: -3px;
  text-shadow: -2px 0 var(--accent-primary);
  animation: glitch-anim-2 1.5s infinite steps(2, end) alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip-path: inset(20% 0 75% 0); transform: translate(2px, 0); }
  20% { clip-path: inset(60% 0 30% 0); transform: translate(-2px, 0); }
  40% { clip-path: inset(40% 0 55% 0); transform: translate(2px, 0); }
  60% { clip-path: inset(80% 0 15% 0); transform: translate(-2px, 0); }
  80% { clip-path: inset(10% 0 85% 0); transform: translate(2px, 0); }
  100% { clip-path: inset(30% 0 60% 0); transform: translate(-2px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 0); }
  20% { clip-path: inset(80% 0 10% 0); transform: translate(2px, 0); }
  40% { clip-path: inset(30% 0 65% 0); transform: translate(-2px, 0); }
  60% { clip-path: inset(5% 0 90% 0); transform: translate(2px, 0); }
  80% { clip-path: inset(50% 0 40% 0); transform: translate(-2px, 0); }
  100% { clip-path: inset(70% 0 25% 0); transform: translate(2px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-text:hover::before,
  .glitch-text:hover::after,
  .brand.active .glitch-text::before,
  .brand.active .glitch-text::after {
    display: none;
    animation: none;
  }
}