/* Glitch text: two green-edged copies of the text flicker through slices.
   Rewritten from GlitchText in the Gatsby site's overlay.tsx; values unchanged.
   Usage: <div class="glitch-text" data-text="Same text">Same text</div> */

.glitch-text { position: relative; color: #fff; user-select: none; text-transform: uppercase; }
.glitch-text::before, .glitch-text::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%;
  clip: rect(0, 0, 0, 0);
}
.glitch-text::after { left: -1px; text-shadow: -2px 0 #b4fba8; animation: glitch-text-1 2s infinite linear alternate-reverse; }
.glitch-text::before { left: 1px; text-shadow: 1px 0 #b4fba8; animation: glitch-text-2 3s infinite linear alternate-reverse; }

@keyframes glitch-text-1 {
  0% { clip: rect(8px, 1620px, 81px, 0); }
  5.8823529412% { clip: rect(93px, 1620px, 10px, 0); }
  11.7647058824% { clip: rect(10px, 1620px, 84px, 0); }
  17.6470588235% { clip: rect(99px, 1620px, 9px, 0); }
  23.5294117647% { clip: rect(96px, 1620px, 104px, 0); }
  29.4117647059% { clip: rect(12px, 1620px, 75px, 0); }
  35.2941176471% { clip: rect(9px, 1620px, 56px, 0); }
  41.1764705882% { clip: rect(36px, 1620px, 47px, 0); }
  47.0588235294% { clip: rect(98px, 1620px, 23px, 0); }
  52.9411764706% { clip: rect(59px, 1620px, 59px, 0); }
  58.8235294118% { clip: rect(50px, 1620px, 26px, 0); }
  64.7058823529% { clip: rect(111px, 1620px, 91px, 0); }
  70.5882352941% { clip: rect(103px, 1620px, 49px, 0); }
  76.4705882353% { clip: rect(6px, 1620px, 68px, 0); }
  82.3529411765% { clip: rect(6px, 1620px, 16px, 0); }
  88.2352941176% { clip: rect(30px, 1620px, 28px, 0); }
  94.1176470588% { clip: rect(78px, 1620px, 73px, 0); }
  100% { clip: rect(78px, 1620px, 99px, 0); }
}
@keyframes glitch-text-2 {
  0% { clip: rect(29px, 1620px, 90px, 0); }
  5.8823529412% { clip: rect(19px, 1620px, 11px, 0); }
  11.7647058824% { clip: rect(60px, 1620px, 106px, 0); }
  17.6470588235% { clip: rect(5px, 1620px, 103px, 0); }
  23.5294117647% { clip: rect(83px, 1620px, 6px, 0); }
  29.4117647059% { clip: rect(99px, 1620px, 69px, 0); }
  35.2941176471% { clip: rect(23px, 1620px, 29px, 0); }
  41.1764705882% { clip: rect(50px, 1620px, 54px, 0); }
  47.0588235294% { clip: rect(75px, 1620px, 100px, 0); }
  52.9411764706% { clip: rect(77px, 1620px, 89px, 0); }
  58.8235294118% { clip: rect(55px, 1620px, 63px, 0); }
  64.7058823529% { clip: rect(22px, 1620px, 26px, 0); }
  70.5882352941% { clip: rect(15px, 1620px, 42px, 0); }
  76.4705882353% { clip: rect(114px, 1620px, 11px, 0); }
  82.3529411765% { clip: rect(89px, 1620px, 68px, 0); }
  88.2352941176% { clip: rect(100px, 1620px, 106px, 0); }
  94.1176470588% { clip: rect(97px, 1620px, 72px, 0); }
  100% { clip: rect(41px, 1620px, 56px, 0); }
}