/* GlitchCraft Engine effect: glitch-text
   Two ghost copies of an element's own text (via the CSS attr() function
   reading its data-text attribute), each clipped to one half and animated
   to periodically jump sideways — the classic RGB-split glitch title. Opt
   in per-element with class="glitch-text" data-text="same text as the
   element's own content" (data-text has to duplicate the content because
   attr() can only read an attribute, not the element's text node).

   Colors come from the site's own theme (--accent-2 falling back to
   --accent, then --accent) rather than the hardcoded lilac/gold this was
   extracted from (glitchcraft.studio's .glitch-text) — only the glitch
   treatment itself lives here; font/size/weight is left to the page's own
   CSS on .glitch-text, same as any other typography. */
.glitch-text {
  position: relative;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}
.glitch-text::before {
  color: var(--accent-2, var(--accent));
  clip-path: inset(0 0 55% 0);
  transform: translate(-4px, 0);
  opacity: 0.9;
  mix-blend-mode: screen;
}
.glitch-text::after {
  color: var(--accent);
  clip-path: inset(55% 0 0 0);
  transform: translate(4px, 0);
  opacity: 0.9;
  mix-blend-mode: screen;
}

/* Animation specifically (not the static ghost layers above) is gated on
   motion preference — same pattern chromatic-aberration.css uses. */
@media (prefers-reduced-motion: no-preference) {
  .glitch-text::before { animation: glitchcraft-glitch-text-1 4.5s infinite steps(1); }
  .glitch-text::after { animation: glitchcraft-glitch-text-2 4.5s infinite steps(1); }
}

@keyframes glitchcraft-glitch-text-1 {
  0%, 82%, 100% { transform: translate(-4px, 0); }
  83% { transform: translate(-13px, -3px); }
  85% { transform: translate(9px, 2px); }
  87% { transform: translate(-16px, 1px); }
  88% { transform: translate(6px, -2px); }
  90% { transform: translate(-4px, 0); }
}
@keyframes glitchcraft-glitch-text-2 {
  0%, 84%, 100% { transform: translate(4px, 0); }
  85% { transform: translate(14px, 3px); }
  87% { transform: translate(-10px, -2px); }
  89% { transform: translate(17px, -1px); }
  91% { transform: translate(4px, 0); }
}